컬러 피커
색상 코드를 확인하고 다양한 포맷으로 변환합니다.
정보 입력
계산 결과
#3B82F6rgb(59, 130, 246)hsl(217, 91%, 60%)HEX, RGB, HSL 색상 코드를 자유롭게 변환하고 미리보세요!
컬러 피커는 웹 개발, 그래픽 디자인, UI/UX 디자인 등에서 색상을 정확하게 선택하고 다양한 포맷으로 변환하여 활용할 수 있는 필수 도구입니다.
HEX(#RRGGBB), RGB(레드, 그린, 블루), HSL(색상, 채도, 명도) 세 가지 주요 색상 포맷을 실시간으로 상호 변환하고 색상 미리보기를 통해 결과를 즉시 확인할 수 있습니다.
웹사이트 디자인 시 브랜드 색상을 정확하게 설정하거나, 디자인 작업 중 일관된 색상 팔레트를 관리할 때, 또는 색상 코드를 모르는 상황에서 원하는 색상을 탐색할 때 유용하게 활용할 수 있습니다.
- 1
색상 선택
색상 피커를 클릭하거나, HEX/RGB 값을 직접 입력합니다.
- 2
변환 형식 확인
HEX, RGB, HSL 세 가지 형식이 동시에 표시됩니다.
- 3
대비율 검사
전경색·배경색을 지정하면 WCAG 기준 대비율과 등급이 자동 계산됩니다.
- 4
복사·사용
원하는 형식의 복사 버튼을 눌러 CSS·디자인 파일에 바로 사용하세요.
예시 1 — 브랜드 메인 컬러
HEX #3b82f6 (파란색) → RGB(59, 130, 246) → HSL(217, 91%, 60%). 흰색(#ffffff) 배경 대비율 = 4.63:1 → AA 등급(일반 텍스트 4.5:1 기준 충족). 이 색상을 버튼·링크 메인 컬러로 사용할 수 있습니다.
예시 2 — 어두운 테마 배경색
HEX #1e293b (남색) → RGB(30, 41, 59) → HSL(215, 32%, 17%). 흰색 텍스트(#ffffff)와 대비율 = 12.7:1 → AAA 등급. 어두운 배경에 밝은 텍스트를 쓸 때 이 대비율을 확보하면 접근성이 보장됩니다.
16진수 2자리를 10진수로 변환합니다.
색상 코드 활용 팁
QHEX, RGB, HSL 중 어떤 형식을 써야 하나요?
용도에 따라 다릅니다. CSS·웹 디자인에서는 HEX(#3b82f6)이 가장 보편적입니다. 색상·채도·명도를 직관적으로 조절해야 할 때는 HSL(hsl(217, 91%, 60%))이 편리합니다. RGB는 이미지 편집기나 디스플레이 제어에서 자주 쓰입니다. 어떤 형식이든 이 계산기에서 서로 변환할 수 있습니다.
Q접근성 대비율은 어떻게 확인하나요?
WCAG 2.1 기준 일반 텍스트는 전경-배경 대비율 4.5:1 이상, 큰 텍스트(18pt 이상)는 3:1 이상이어야 합니다. 이 도구에서 두 색상을 입력하면 대비율과 등급(AAA/AA/ Fail)을 자동 계산해 줍니다. 웹사이트·앱 디자인 시 반드시 확인하세요.
Q색상blind 접근성 검사는 어떻게 하나요?
이 도구는 기본적인 대비율만 확인합니다. 색각 이상(protanopia, deuteranopia, tritanopia) 시뮬레이션은 별도 도구(Coblis, Color Oracle 등)를 사용하세요. 대비율이 높으면 색각 이상에서도 구별 가능성이 높아지므로, 이 도구에서 먼저 대비를 확보하는 것이 좋은 1단계입니다.
Q색상 온도(따뜻한색·차가운색)는 어떻게 조절하나요?
HSL 모드에서 색상(H) 값을 조절하면 됩니다. H 0~60(빨강~노랑)은 따뜻한색, H 180~270(청록~보라)은 차가운색 영역입니다. 웹사이트 톤·브랜드 아이덴티티를 맞출 때 이 축을 이해하면 좋습니다.
Q생성된 색상 값을 CSS에 바로 쓸 수 있나요?
네. HEX(#3b82f6), RGB(rgb(59,130,246)), HSL(hsl(217,91%,60%)) 모두 CSS 속성에 그대로 붙여넣을 수 있습니다. 복사 버튼으로 원하는 형식을 클립보드에 복사한 뒤, CSS 파일이나 스타일 시트에 바로 사용하세요.