HEX 컬러 피커 사용법
- 큰 색상 견본을 클릭해 시스템 색상 선택 창을 열거나,
#1E90FF같은 HEX 코드 또는tomato같은 색상 이름을 입력하세요. - HEX, RGB, HSL, HSV, CMYK 중 필요한 형식을 복사하세요. 틴트, 셰이드, 배색 견본을 클릭하면 해당 HEX 코드가 복사됩니다.
- 명도 대비 상자에서 이 색상 위의 흰색 또는 검은색 텍스트가 WCAG AA·AAA 기준을 충족하는지 확인하세요.
HEX 색상 코드의 원리
#FF6347 같은 HEX 색상 코드는 3바이트로 이루어집니다: 빨강(FF = 255), 초록(63 = 99), 파랑(47 = 71). 각 채널은 00부터 FF까지이므로 표현할 수 있는 색은 256 × 256 × 256 = 16,777,216가지입니다. 세 값이 같으면 회색 계열이 되며(#000000은 검은색, #808080은 중간 회색, #FFFFFF는 흰색), 값이 클수록 색이 밝아집니다.
틴트, 셰이드와 색상 조화(배색)
틴트는 선택한 색에 흰색을 섞은 색이고, 셰이드는 검은색을 섞은 색입니다. 컬러 피커는 두 가지를 10% 단위로 보여 주므로 브랜드 색상에 맞는 호버 상태, 테두리, 배경색을 만들 때 유용합니다.
색상 조화는 채도와 명도는 그대로 두고 색상환에서 색상(hue)만 회전시켜 만듭니다:
- 보색(180°) – 정반대에 있는 색으로, 강한 대비가 필요한 강조 버튼(CTA)에 적합합니다.
- 유사색(±30°) – 색상환에서 이웃한 색으로, 차분하고 통일감 있는 팔레트를 만듭니다.
- 3색 조화(±120°) – 같은 간격으로 떨어진 세 가지 색으로, 선명하면서도 균형 잡힌 디자인에 어울립니다.
색상 명도 대비와 WCAG 기준
웹 콘텐츠 접근성 지침(WCAG)은 일반 텍스트에 최소 4.5:1(AA 등급), AAA 등급에는 7:1의 명도 대비를 요구합니다. 큰 텍스트(18 pt 이상 또는 14 pt 이상 굵은 글꼴)는 AA 등급 기준이 3:1입니다. 명도 대비는 텍스트 색과 배경색의 상대 휘도를 비교한 값으로, 1:1(같은 색)부터 21:1(흰 바탕에 검은 글자)까지입니다.
자주 묻는 질문
HEX 색상 코드란 무엇인가요?
HEX 색상 코드는 16진수 여섯 자리로 색을 나타내는 방식입니다. 빨강 두 자리, 초록 두 자리, 파랑 두 자리로 구성되며, 예를 들어 #FF6347은 tomato 색입니다. CSS, HTML, 디자인 도구, 이미지 편집기에서 모두 사용할 수 있습니다.
HEX 코드로 몇 가지 색을 표현할 수 있나요?
256 × 256 × 256 = 16,777,216가지 색을 표현할 수 있습니다. 알파 값 두 자리를 추가하면(#RRGGBBAA) 각 색마다 256단계의 투명도도 지정할 수 있습니다.
어떤 CSS 색상 이름을 지원하나요?
CSS Color Module에 정의된 148개 색상 이름을 모두 지원합니다. aliceblue부터 yellowgreen까지, rebeccapurple도 포함됩니다. HEX 입력란에 이름을 입력하거나, 도구 아래 목록을 필터링한 뒤 색상을 클릭해 선택하세요.