컬러 변환기

컬러 변환기란?

컬러 변환기는 HEX, RGB, HSL, OKLCH 등 어떤 형식으로 색을 입력해도 같은 색을 다른 모든 형식으로 보여주는 도구입니다. 브랜드 컬러를 맞출 때, CSS 변수를 디버깅할 때, 다크 모드와 라이트 모드 팔레트를 비교할 때, 접근성 명도 대비를 확인할 때 디자이너와 개발자가 매일 쓰는 일상 도구죠.

CSS는 여러 컬러 모델을 지원하고, 각각 장점이 다릅니다. HEX와 RGB는 빨강·초록·파랑 빛의 양으로 색을 표현해요. HSL은 색상(hue), 채도(saturation), 명도(lightness)로 나뉘어 훨씬 직관적입니다. OKLCH는 지각 기반 모델로, 숫자가 같은 양만큼 바뀌면 사람 눈에도 같은 양만큼 변한 것처럼 보입니다 — 그래서 틴트, 셰이드, 접근성 좋은 팔레트를 만들 때 특히 유용합니다.

접근성은 색 자체가 아니라 명도 대비에서 옵니다. WCAG는 텍스트와 배경 사이의 대비비를 정의하는데, 본문은 최소 4.5:1, 큰 제목은 3:1이 필요해요. 좋은 컬러 도구라면 이 두 수치를 색 옆에 함께 보여줘서, 접근성이 떨어지는 UI를 실수로 배포하지 않게 도와줍니다.

색을 변환하면서 함께 익히는 것들

• HEX는 사실 RGB의 짧은 표기일 뿐입니다 — #ff8800은 rgb(255, 136, 0)과 같은 색이에요.
• HSL은 *색상*(어떤 색인지), *채도*(얼마나 선명한지), *명도*(얼마나 밝은지)를 분리합니다. R/G/B를 일일이 만지는 것보다 한 축만 조절하기가 훨씬 직관적이죠.
• OKLCH는 지각적으로 균일합니다. OKLCH의 L 값을 10% 올리면 어떤 색상이든 비슷한 정도로 밝아진 것처럼 보여요. HSL은 이렇게 동작하지 않습니다.

색상 변환과 대비 확인, 단계별 사용법

1. 1

   색 입력하기

   HEX, RGB, HSL, OKLCH 중 어떤 값이든 붙여넣거나, 스포이드 또는 브라우저 기본 컬러 피커로 색을 골라보세요.

2. 2

   모든 형식을 한 번에 확인

   같은 색이 지원하는 모든 형식으로 한꺼번에 표시됩니다. 원하는 값을 클릭하면 클립보드에 바로 복사돼요.

3. 3

   HSL 또는 OKLCH 슬라이더로 미세 조정

   명도 슬라이더를 끌어 올리면 틴트(밝은 색), 내리면 셰이드(어두운 색)가 됩니다. 시각적으로 일정한 간격을 원한다면 OKLCH의 명도를 쓰세요.

4. 4

   텍스트 색과의 대비 확인

   대비 패널에서 흰색·검정 배경 모두에 대해 WCAG 비율을 보여줍니다. 본문은 4.5 이상, 큰 제목은 3 이상을 목표로 잡으세요.

5. 5

   CSS에 값 가져다 쓰기

   코드베이스 스타일에 맞는 형식을 고르면 됩니다 — 디자인 토큰에는 HEX, 모던한 팔레트에는 OKLCH, calc()로 다듬고 싶을 땐 HSL이 편해요.

CSS 컬러 형식 한눈 정리

실무에서 자주 마주치는 다섯 가지 형식과, 같은 색을 각각으로 표현한 예시입니다. 전체 색상 문법은 MDN의 <color> 페이지에서 확인하세요.

직접 해보면 좋은 컬러 변환 예시

color: #6c8cff;color: rgb(108 140 255);color: hsl(228 100% 71%);color: oklch(67% 0.16 268);

--brand:        oklch(67% 0.16 268);--brand-light:  oklch(78% 0.12 268);--brand-lighter:oklch(88% 0.08 268);--brand-dark:   oklch(55% 0.18 268);--brand-darker: oklch(40% 0.16 268);

background: rgb(108 140 255 / 0.5);background: #6c8cff80;

컬러 변환에서 자주 하는 실수

• 다른 색상끼리 HSL 명도를 비교하기. hsl(60 100% 50%)(노랑)과 hsl(240 100% 50%)(파랑)은 L이 같지만 체감 밝기는 완전히 다릅니다 — 시각적 비교가 필요하면 OKLCH를 쓰세요.
• 3자리 HEX(#abc)가 6자리(#aabbcc)의 줄임 표기라는 사실을 잊는 것.
• 최신 rgb(... / alpha) 대신 rgba(...)를 계속 쓰는 것 — 둘 다 동작하지만 슬래시 문법이 현재 표준이고 도구에서도 더 읽기 쉽습니다.

컬러 변환기 자주 묻는 질문