색상 선택기

색상 선택기 이용 방법

1. 휠에서 색상(각도)과 채도(중심에서의 거리)를 고르고, 아래 슬라이더로 밝기와 투명도를 조절합니다. 휠은 마우스·터치 드래그와 키보드 화살표(Shift+화살표는 10단위)로 움직일 수 있습니다.
2. 이미 알고 있는 색이 있다면 색상 코드 입력칸에 HEX·rgb()·hsl()·CSS 색 이름을 붙여 넣거나, RGB·HSL·HSV·CMYK 숫자를 직접 입력합니다.
3. 오른쪽 결과에서 필요한 형식의 복사 버튼을 누릅니다. 주소창 링크에 현재 색이 담기므로 그대로 공유할 수 있습니다.
4. 아래 탭에서 조화 팔레트, 명도 단계(50~950)를 만들고 대비 검사로 글자가 잘 읽히는지 확인합니다.

지원하는 색상 형식

변환 원리

HEX는 RGB 각 채널(0~255)을 16진수 두 자리로 적은 것이라 정보 손실 없이 서로 바뀝니다. HSL과 HSV는 같은 RGB를 원통 좌표로 다시 표현한 것으로, HSL의 L(명도)은 50%일 때 가장 선명하고 HSV의 V(밝기)는 100%일 때 가장 선명합니다. CMYK는 K = 1 − max(R, G, B), C = (1 − R − K) ÷ (1 − K)처럼 단순 공식으로 구한 값이라 실제 인쇄 색과는 차이가 있습니다.

명도 대비 기준 (WCAG 2.2)

대비율은 두 색의 상대 휘도 L로 (밝은 L + 0.05) ÷ (어두운 L + 0.05)를 계산하며 1:1(같은 색)부터 21:1(검정과 흰색)까지 나옵니다. 판정은 반올림하지 않은 값으로 하므로 4.499:1은 AA 미달입니다.

팔레트를 잘 만드는 팁

• 보색은 강조 버튼처럼 눈에 띄어야 하는 곳에 조금만 쓰고, 넓은 면적에는 유사색이나 단색 조화가 안정적입니다.
• 브랜드 색 하나로 명도 단계를 만들면 배경(50~100), 테두리(200~300), 기본(500~600), 글자(700~900)에 일관되게 쓸 수 있습니다.
• 밝은 노랑·연두 위의 흰 글자는 대비가 2:1도 안 되는 경우가 많습니다. 결과 카드의 흰/검정 배경 대비를 먼저 확인하세요.
• 투명도가 있는 색은 실제로 놓일 배경에 따라 보이는 색이 달라집니다. 대비 검사는 배경과 합성한 색으로 계산합니다.