HEX, RGB, HSL, OKLCH: 색상 형식 고르기

HEX와 RGB: 같은 숫자를 두 가지로 적은 것

화면은 빨강, 초록, 파랑 빛을 섞고, 표준 sRGB 색 공간에서 각 채널은 0부터 255까지이므로 약 1,670만 가지 조합이 나옵니다. RGB 표기는 세 숫자를 그대로 씁니다. rgb(59 130 246)처럼요. HEX는 같은 세 숫자를 16진수 두 자리씩으로 씁니다. 59는 3B, 130은 82, 246은 F6이므로 색은 #3B82F6입니다. #39F 같은 세 자리 HEX는 #3399FF를 줄인 것입니다.

투명도는 네 번째 채널인 알파로 더합니다. HEX에서는 두 자리를 더 붙이고(#3B82F680은 약 50% 불투명), 최신 CSS에서는 빗금 뒤에 씁니다. rgb(59 130 246 / 50%)처럼요. HEX와 RGB는 같은 값을 적는 방식일 뿐이라서 서로 바꿔도 잃는 것이 없습니다.

HSL: 조정하기 쉽지만 밝기는 오해를 부른다

HSL은 색을 색상(0~360의 각도, 빨강 0, 초록 120, 파랑 240), 채도, 명도로 나타냅니다. 손으로 변형을 만들기 편합니다. 색상은 그대로 두고 명도만 바꾸면 더 어두운 색이 되고, 색상 각도를 돌리면 어울리는 강조색이 됩니다. 예시의 파란색은 약 hsl(217 91% 60%)입니다.

문제는 HSL의 명도가 눈에 보이는 밝기가 아니라 계산식이라는 점입니다. 순수한 노랑과 순수한 파랑은 둘 다 hsl(… 100% 50%)이지만 노랑이 몇 배나 밝습니다. 상대 휘도가 노랑은 약 0.93, 파랑은 약 0.07입니다. 그래서 HSL 명도만 바꿔 만든 팔레트는 고르지 않게 보이고, 글자 대비는 HSL 값으로 판단할 수 없으며 휘도로 계산해야 합니다.

OKLCH: 사람의 지각에 맞춘 형식

CSS Color Level 4에 포함되어 현재 주요 브라우저가 지원하는 OKLCH는 색을 지각 밝기, 채도(색의 진함), 색상으로 나타냅니다. OKLCH 밝기가 같은 두 색은 거의 같은 밝기로 보이므로 팔레트의 단계가 고르게 보이고, 색상을 바꿔도 겉보기 밝기가 유지됩니다. 그래서 디자인 시스템이나 자동으로 만드는 팔레트에 잘 맞습니다.

OKLCH는 많은 최신 화면이 보여 주는 Display P3처럼 sRGB 밖의 색도 표현할 수 있습니다. 이를 보여 줄 수 없는 화면에서는 브라우저가 표현할 수 있는 가장 가까운 색으로 바꿉니다. 어디서나 똑같이 보여야 하는 디자인이라면 중요한 색은 sRGB 안에 두세요.

화면 색은 인쇄 색이 아니다

프린터는 빛을 내는 대신 빛을 반사하는 종이 위에 청록, 자홍, 노랑, 검정 잉크를 섞습니다. 화면의 밝은 색, 특히 선명한 파랑과 초록 중 상당수는 아예 인쇄할 수 없고, 같은 CMYK 값도 종이와 인쇄기에 따라 다르게 보입니다. RGB를 CMYK로 제대로 바꾸려면 실제 인쇄 조건에 맞는 색 프로파일이 필요합니다.

RGB 숫자를 CMYK 퍼센트로 바꾸는 간단한 공식은 출발점일 뿐, 인쇄용으로 바로 쓸 수 있는 색이 아닙니다. 인쇄물에서도 맞아야 하는 브랜드 색이라면 인쇄소에 어떤 프로파일을 쓸지 묻거나 인쇄된 색상 견본에서 고르고, 교정쇄로 확인하세요.

어떤 형식을 쓸까

도구 사이에 색을 복사할 때는 HEX가 가장 널리 통합니다. 투명도와 읽기 쉬운 코드에는 빗금을 쓰는 최신 rgb()가 명확합니다. 손으로 색조를 조정할 때는 결과를 눈으로 확인한다는 전제에서 HSL이 직관적입니다. 고른 단계가 필요한 팔레트, 테마, 그라디언트에는 OKLCH가 가장 예측 가능한 결과를 줍니다.

어떤 형식이든 글자와 배경의 조합은 대비 검사기로 확인하세요. WCAG는 AA 수준에서 일반 글자에 최소 4.5:1, 큰 글자에 3:1의 대비율을 요구하며, 어떤 색상 형식도 그것을 저절로 보장하지 않습니다.

• 도구 간 손실 없는 복사에는 HEX나 rgb()를 쓴다
• 밝기나 대비를 HSL 명도로 판단하지 않는다
• 고른 단계가 필요한 팔레트에는 OKLCH를 쓴다
• 어디서나 같아야 하는 핵심 색은 sRGB 안에 둔다
• 인쇄 색은 간단한 공식이 아니라 인쇄소의 프로파일로 정한다
• 모든 글자 색을 배경과 함께 대비 검사한다