색 변환기 (HEX · RGB · HSL · OKLCH)

사용법

위 칸에 색을 넣으면 네 가지 표기법으로 한 번에 바꿔 줍니다. 어떤 형식으로 붙여넣어도 알아서 인식합니다. 디자인 도구에서 복사한 #3b82f6, 개발자도구에서 복사한 rgb(59, 130, 246), CSS에 적혀 있던 hsl(217 91% 60%)을 그대로 넣으면 됩니다. 색상 선택기로 직접 고를 수도 있습니다.

각 표기법 옆의 복사 버튼을 누르면 CSS에 바로 붙여넣을 수 있는 형태로 복사됩니다. 값을 바꾸면 주소가 함께 바뀌므로, 그 주소를 그대로 공유하면 상대방도 같은 색을 보게 됩니다.

OKLCH는 비교적 최근에 브라우저에 들어온 표기법입니다. L은 밝기(0~100%), C는 채도, H는 색상 각도입니다. 아래에서 이 표기법이 왜 생겼는지 설명합니다.

실제 응용

표기법마다 잘하는 일이 다르다

네 가지는 같은 색을 다르게 적는 방법일 뿐이지만, 손으로 값을 만질 때의 편의가 크게 다릅니다.

HSL로 색을 밝게 하면 왜 탁해지나

실무에서 자주 겪는 문제입니다. 브랜드 색을 정해 두고 밝은 변형을 만들려고 HSL의 L만 올렸는데, 어떤 색은 멀쩡하고 어떤 색은 뿌옇게 뜹니다.

HSL의 L은 사람이 느끼는 밝기가 아니라 계산상의 중간값이기 때문입니다. 같은 L: 50%라도 노랑은 눈부시게 밝고 파랑은 어둡습니다. 그래서 여러 색을 같은 L로 맞춰 팔레트를 만들면 색마다 밝기가 제각각으로 보입니다.

OKLCH의 L은 사람의 지각에 맞춰 설계된 값입니다. 위 변환기에 순수 노랑(#ffff00)과 순수 파랑(#0000ff)을 넣어 보세요. HSL에서는 둘 다 L: 50%지만, OKLCH에서는 노랑이 약 97%, 파랑이 약 45%로 나옵니다. 실제로 보이는 차이가 숫자에 그대로 담깁니다.

팔레트를 만들 때

브랜드 색 하나에서 단계별 팔레트(50~900 같은)를 만들 일이 많습니다. OKLCH로 옮겨 놓고 L만 일정 간격으로 바꾸면 밝기가 고르게 나뉜 팔레트가 나옵니다. 색상(H)과 채도(C)는 그대로 두면 됩니다.

:root {
  /* H와 C는 고정, L만 단계별로 */
  --brand-100: oklch(92% 0.05 260);
  --brand-300: oklch(78% 0.11 260);
  --brand-500: oklch(62% 0.19 260);  /* 기준색 */
  --brand-700: oklch(48% 0.16 260);
  --brand-900: oklch(32% 0.10 260);
}

어두운 쪽에서 C를 조금 낮춘 이유는, 밝기가 낮아지면 표현할 수 있는 채도의 한계도 함께 낮아지기 때문입니다. 값을 그대로 두면 화면에 표현할 수 없는 색이 되어 브라우저가 임의로 잘라냅니다.

변환해도 색이 그대로인지 확인하는 법

표기법을 바꾸면 반올림 때문에 값이 미세하게 달라질 수 있습니다. 이 도구는 왕복 변환이 원래 값으로 돌아오는지를 기준으로 만들었습니다. HEX에서 OKLCH로 갔다가 다시 HEX로 돌아왔을 때 같은 코드가 나오는지 실제 색 여러 개로 확인했습니다.

다만 OKLCH는 화면이 표현할 수 있는 범위(sRGB)보다 넓은 색을 적을 수 있습니다. C 값을 크게 올리면 화면에 없는 색이 되고, 그때는 가장 가까운 표현 가능한 색으로 잘립니다. 이 도구도 같은 방식으로 잘라서 보여줍니다.