색상 변환기

색상 변환기란?

색상 변환기는 웹 디자인과 개발에서 필수적인 HEX, RGB, HSL 세 가지 색상 형식을 실시간으로 상호 변환하는 온라인 도구입니다. 디자이너가 포토샵에서 추출한 RGB 값을 CSS에 사용할 HEX 코드로 변환하거나, 기존 색상의 밝기만 조절하기 위해 HSL로 변환하는 등 다양한 상황에서 활용할 수 있습니다.

색상 값을 입력하면 즉시 다른 모든 형식으로 변환되며, 미리보기를 통해 실제 색상을 확인할 수 있습니다. 변환된 색상 코드는 클릭 한 번으로 복사하여 바로 사용할 수 있어 작업 효율을 크게 높여줍니다.

이런 상황에서 사용하세요

• 웹 개발 – 디자인 시안의 RGB 색상을 CSS에서 사용할 HEX 코드로 변환할 때
• UI/UX 디자인 – 브랜드 색상의 밝기나 채도를 조절한 변형 색상을 만들 때 (HSL 활용)
• 색상 팔레트 구성 – 기준 색상에서 같은 색조의 다양한 밝기 색상을 추출할 때
• 크로스 플랫폼 작업 – 포토샵(RGB), 일러스트레이터(HEX), CSS(다양한 형식) 간 색상 값 통일
• 접근성 검토 – 색상 대비 검사를 위해 정확한 색상 값을 확인할 때
• 프레젠테이션 – 발표 자료에 사용할 색상 코드를 빠르게 확인하고 복사할 때

주요 기능

• 실시간 양방향 변환 – HEX, RGB, HSL 어떤 값을 입력해도 나머지 형식이 즉시 업데이트됩니다. 수동으로 변환 버튼을 누를 필요가 없습니다.
• 시각적 컬러 피커 – 색상환에서 직접 색상을 선택할 수 있습니다. 정확한 값을 모르더라도 원하는 색상을 시각적으로 찾을 수 있습니다.
• CSS 코드 즉시 복사 – color: #D4AF37; 형태의 CSS 코드를 바로 복사할 수 있습니다. HEX, RGB, HSL 세 가지 형식 중 선택 가능합니다.
• 색상 히스토리 자동 저장 – 사용한 색상이 자동으로 저장되어 이전에 사용한 색상을 쉽게 다시 불러올 수 있습니다. 브라우저를 닫아도 유지됩니다.
• 랜덤 색상 생성 – 영감이 필요할 때 랜덤 색상을 생성하여 새로운 색상 아이디어를 얻을 수 있습니다.
• 직관적인 입력 – RGB는 0-255 범위의 슬라이더, HSL은 색상환(0-360°)과 백분율로 입력하여 각 형식의 특성에 맞게 조작할 수 있습니다.

사용 방법

1. 색상 선택 – 컬러 피커를 클릭하여 색상환에서 원하는 색상을 선택하거나, HEX/RGB/HSL 입력 필드에 알고 있는 값을 직접 입력하세요.
2. 실시간 확인 – 입력한 색상이 미리보기 영역에 즉시 표시됩니다. 동시에 세 가지 형식 모두 자동으로 계산되어 표시됩니다.
3. 코드 복사 – 필요한 형식 옆의 “복사” 버튼을 클릭하면 클립보드에 복사됩니다. CSS 코드가 필요하면 하단의 “CSS 복사” 버튼을 사용하세요.
4. 히스토리 활용 – 이전에 사용한 색상은 하단 히스토리에 자동 저장됩니다. 색상 칩을 클릭하면 해당 색상이 즉시 적용됩니다.

색상 형식 상세 설명

HEX (16진수 색상 코드)

웹에서 가장 널리 사용되는 색상 표현 방식입니다. #RRGGBB 형태로 빨강(R), 초록(G), 파랑(B) 값을 각각 00부터 FF까지의 16진수로 표현합니다.

• 예시: #D4AF37 (골드), #FF5733 (주황), #3498DB (파랑)
• 단축 표기: 각 색상 채널이 같은 문자로 반복되면 3자리로 줄일 수 있습니다. #FF0000 → #F00
• 장점: 짧고 간결함, CSS/HTML에서 표준으로 사용, 복사/붙여넣기가 편리함
• 사용처: CSS 스타일시트, HTML 인라인 스타일, 디자인 시스템 문서화

RGB (빨강, 초록, 파랑)

빛의 삼원색을 기반으로 한 가산 혼합 색상 모델입니다. 각 색상 채널은 0부터 255까지의 값을 가지며, 세 색상이 혼합되어 최종 색상이 결정됩니다.

• 예시: rgb(212, 175, 55) (골드), rgb(255, 255, 255) (흰색), rgb(0, 0, 0) (검정)
• 작동 원리: 모든 값이 0이면 검정, 모든 값이 255이면 흰색이 됩니다
• 장점: 직관적인 색상 혼합 이해, 포토샵 등 그래픽 툴과 호환, 프로그래밍에서 색상 계산 용이
• 사용처: 그래픽 소프트웨어, JavaScript 색상 조작, 애니메이션 색상 전환

HSL (색상, 채도, 밝기)

인간의 색상 인지 방식에 가까운 표현법입니다. 색상환의 각도(Hue), 색의 선명도(Saturation), 밝고 어두운 정도(Lightness)로 색상을 정의합니다.

• 예시: hsl(46, 67%, 52%) (골드), hsl(0, 100%, 50%) (순수한 빨강)
• H (색상): 0° = 빨강, 60° = 노랑, 120° = 초록, 180° = 청록, 240° = 파랑, 300° = 자홍
• S (채도): 0% = 회색조, 100% = 순수한 색상
• L (밝기): 0% = 검정, 50% = 순수 색상, 100% = 흰색
• 장점: 같은 색조에서 밝기/채도 조절이 쉬움, 색상 팔레트 생성에 유용, 색상 관계 이해가 직관적
• 사용처: CSS 변수를 활용한 테마 시스템, 호버 효과(밝기만 변경), 일관된 색상 팔레트 구성

색상 선택 팁

• 브랜드 색상 변형: 기본 브랜드 색상을 HSL로 변환한 뒤, L(밝기) 값만 조절하면 같은 색조의 밝은/어두운 변형을 쉽게 만들 수 있습니다.
• 보색 찾기: HSL에서 H(색상) 값에 180을 더하면 보색을 얻을 수 있습니다. 예: 파랑(240°)의 보색은 노랑(60°)입니다.
• 유사색 찾기: H 값을 30° 간격으로 조절하면 조화로운 유사색 팔레트를 만들 수 있습니다.
• 접근성 고려: 텍스트와 배경의 색상 대비는 WCAG 기준 4.5:1 이상을 권장합니다. 밝기(L) 차이가 충분한지 확인하세요.

자주 묻는 질문