색상 코드 변환기 (컬러 피커)

HEX, RGB, HSL은 무엇인가

화면에 보이는 모든 색은 빨강(Red), 초록(Green), 파랑(Blue) 빛을 섞어 만듭니다. RGB는 그 비율을 그대로 숫자로 적은 것으로, rgb(29, 78, 216)은 빨강은 아주 조금, 초록은 조금, 파랑은 많이 섞였다는 뜻입니다. 채널마다 0부터 255까지 256단계가 있습니다.

HEX는 같은 세 숫자를 16진수로 쓴 것입니다. 29, 78, 216은 각각 1d, 4e, d8이 되므로 #1d4ed8이라고 씁니다. #777처럼 세 자리 코드는 #777777을 줄인 것이고, 여덟 자리 코드는 마지막 두 자리로 불투명도를 나타냅니다. 웹 디자인이나 브랜드 가이드에서 흔히 말하는 색상 코드는 대부분 이 HEX 코드입니다.

HSL은 같은 색을 손으로 조절하기 쉬운 방식으로 나타냅니다. 색상(Hue)은 색상환의 각도로 0이 빨강, 120이 초록, 240이 파랑이고, 채도(Saturation)는 선명한 정도, 밝기(Lightness)는 검정에서 흰색까지입니다. hsl(224, 76%, 48%)은 위의 파란색과 같은 색입니다. 포토샵 등에서 HSB라고 부르는 HSV는 Lightness 대신 Value(Brightness) 값을 써서, 순색이 50%가 아니라 100%에 놓입니다.

OKLCH는 CSS에 새로 들어온 형식입니다. 밝기를 사람 눈이 느끼는 방식으로 재기 때문에 OKLCH 밝기가 같은 두 색은 실제로도 비슷하게 밝아 보입니다. HSL에서는 그렇지 않습니다. 디자인 시스템에서 밝은 색부터 어두운 색까지 고른 간격의 색상표를 만들 때 유용합니다.

어떤 형식을 언제 쓸까

• HEX: CSS, 디자인 툴, 브랜드 가이드. 짧고 거의 모든 앱에서 쓸 수 있습니다.
• RGB, rgba(): 오래된 코드에서 투명도를 넣거나 프로그램이 숫자 세 개를 요구할 때.
• HSL: 색을 손으로 조금씩 바꿀 때. 마우스를 올렸을 때 밝기를 올리거나, 채도를 낮춰 차분한 색을 만드는 식입니다.
• HSV/HSB: 포토샵이나 피그마 색상 선택기의 숫자와 맞출 때.
• OKLCH: 최신 CSS로 색상표나 테마를 만들 때.
• CMYK: 인쇄용 대략적인 참고값으로만 씁니다. 이유는 아래에서 설명합니다.

화면 색과 인쇄 색이 다른 이유

화면은 빛을 더해서 색을 만드는 가산 혼합 방식이라 빨강, 초록, 파랑을 모두 최대로 켜면 흰색이 됩니다. 인쇄는 청록(시안), 자홍(마젠타), 노랑, 검정(K) 잉크로 빛을 빼는 감산 혼합 방식이고, 처음부터 흰 종이 위에 색을 얹습니다. 그래서 화면에서 선명한 파랑이나 초록 중 상당수는 인쇄로 그대로 재현할 수 없습니다. 이 도구의 CMYK 값은 종이나 인쇄기의 특성을 모르는 간단한 공식으로 구한 값이라, 실제 색 프로파일로 작업하는 인쇄소는 다른 숫자를 쓸 수 있습니다. 명함이나 포스터처럼 중요한 인쇄물은 교정쇄를 받아 색을 확인하는 것이 좋습니다.

명도 대비와 웹 접근성 기본

글자와 배경의 밝기가 너무 비슷하면 햇빛 아래에서 휴대폰을 볼 때나 저시력 사용자에게 읽기 어렵습니다. WCAG(웹 콘텐츠 접근성 지침, 국내 KWCAG도 같은 기준을 씁니다)는 이를 명도 대비로 나타냅니다. 값은 1:1(차이 없음)부터 21:1(흰 바탕에 검정)까지입니다. 예를 들어 회색 #777777을 흰 배경에 쓰면 4.47:1로, 일반 글자에 필요한 AA 기준 4.5:1에 살짝 못 미칩니다. 큰 제목이라면 통과입니다. 이 도구는 값을 반올림하지 않으므로 4.49:1이면 미달입니다. 또 색만으로 의미를 전달하지 않는 것도 중요합니다. 오류의 빨강이나 성공의 초록에는 글자나 아이콘을 함께 쓰세요.

밝은 색, 어두운 색, 어울리는 색

밝은 색(틴트)은 흰색과, 어두운 색(셰이드)은 검정과 같은 간격으로 섞은 색입니다. 버튼 호버, 테두리, 배경용 색을 바로 얻을 수 있어 간단한 색상표로 쓰기 좋습니다. 보색은 색상환 반대편에 있는 색으로 강하게 눈에 띄고, 유사색은 양옆 30°에 있는 색이라 함께 쓰면 차분한 느낌을 줍니다. 고른 색으로 화면 전체를 채워 보고 싶다면 흰 화면 도구에서 원하는 색을 지정할 수 있습니다. 이 색 조합으로 웹사이트 이미지를 준비한다면 이미지 용량 줄이기 도구로 파일을 가볍게 만들어 두세요.