컬러 피커

이 페이지의 모든 색은 sRGB 색 공간에 속합니다. 1990년대 후반 브라우저가 채택한 뒤로 웹의 기본 색 공간입니다. 화면은 빨강, 초록, 파랑 빛을 섞으며 각 채널은 256단계(0–255)이므로 표현할 수 있는 색은 16,777,216가지입니다. RGB는 이 세 숫자를 그대로 쓰고, HEX는 같은 세 숫자를 16진수로 두 자리씩 씁니다. 따라서 #FF6600은 빨강 255, 초록 102, 파랑 0입니다. 세 자리 축약형은 각 자리를 두 번 반복한 것으로, #F60은 #FF6600과 같습니다.

HSL과 HSB(HSV라고도 함)는 같은 색을 손으로 조정하기 쉬운 방식으로 나타냅니다. 색상(Hue)은 색상환 위의 각도로 0°가 빨강, 120°가 초록, 240°가 파랑입니다. 차이는 마지막 값에 있습니다. HSL에서는 명도 100%가 항상 흰색이고 50%가 그 색상의 가장 순수한 형태입니다. HSB에서는 밝기 100%가 순수한 색상이고, 흰색을 만들려면 채도를 0%로 해야 합니다. Photoshop, Figma 같은 디자인 앱은 피커에 HSB를 쓰고 CSS는 hsl()을 기본으로 지원하므로 위에 두 가지를 모두 표시합니다.

화면은 빛을 더하고, 프린터는 시안, 마젠타, 옐로, 블랙 잉크로 빛을 뺍니다. 두 방식이 표현할 수 있는 색의 범위, 즉 색역(gamut)은 서로 다릅니다. 선명한 RGB 초록, 강렬한 파랑, 네온 오렌지처럼 채도가 매우 높은 화면 색은 프로세스 잉크로 재현할 수 있는 범위를 벗어나므로, 모니터에서 보던 것보다 탁하게 인쇄됩니다.

여기 표시되는 CMYK 값은 ICC 프로파일 없이 단순한 수학적 변환으로 구한 것이어서 대략적인 요청서에는 쓸 만하지만 실제 인쇄용은 아닙니다. 인쇄소는 유럽의 FOGRA39나 미국의 GRACoL처럼 용지와 인쇄기에 맞는 프로파일로 변환하며, 같은 RGB 색도 프로파일마다 잉크 비율이 다르게 나올 수 있습니다. 인쇄 작업에는 RGB나 HEX 값과 함께 인쇄소가 요구하는 프로파일을 보내세요.

WCAG 2.1은 두 색의 상대 휘도를 비교합니다. 밝은 색의 휘도에 0.05를 더한 값을 어두운 색의 휘도에 0.05를 더한 값으로 나눕니다. 결과는 1:1(같은 색)부터 21:1(흰 바탕에 검정)까지입니다. AA 수준은 일반 텍스트에 4.5:1, 큰 텍스트(18 pt 또는 굵게 14 pt)에 3:1 이상을 요구하고, AAA 수준은 이를 7:1과 4.5:1로 높입니다. 입력란 테두리나 아이콘 같은 사용자 인터페이스 요소는 성공 기준 1.4.11에 따라 주변과 3:1 대비가 필요합니다.

휘도는 눈이 가장 민감한 초록에 파랑보다 훨씬 큰 가중치를 둡니다. 그래서 두 색 모두 채도가 꽉 차 보여도 흰 바탕의 노란 글자는 크게 미달하고 흰 바탕의 짙은 파랑은 쉽게 통과합니다. 로고와 순수 장식용 텍스트는 이 규칙에서 제외됩니다.

이미지 팔레트 기능은 브라우저의 캔버스로 파일을 읽고, 긴 변을 최대 200픽셀로 줄인 뒤 1982년 폴 헤크버트(Paul Heckbert)가 제시한 메디안 컷(median-cut) 방식으로 비슷한 픽셀을 묶습니다. 색 범위를 가장 넓은 채널 방향으로 계속 나눠 여섯 그룹이 남으면, 각 그룹의 평균색이 견본이 됩니다. 투명 픽셀은 무시하므로 투명 배경의 로고에서는 로고의 색만 나옵니다.

색을 얻었다면 단색 위주의 로고는 벡터로 쓰는 편이 나은 경우가 많습니다. 이미지 SVG 변환은 이 색을 그대로 유지한 도형으로 로고를 따 주고, 채널 헤더를 디자인한다면 유튜브 배너 크기 조정이 안전 영역을 고려해 작품을 2560 × 1440에 맞춰 줍니다.