색상 코드 변환기
HEX, RGB, HSL 색상 코드를 실시간으로 상호 변환하세요. 컬러 피커로 색상을 선택하고, CSS에 바로 사용할 수 있는 형식으로 복사할 수 있습니다.
웹 기본 색상표 (CSS Named Colors)
| 색상명 | HEX | RGB | 용도 예시 |
|---|---|---|---|
| black | #000000 | rgb(0, 0, 0) | 텍스트 기본 |
| white | #FFFFFF | rgb(255, 255, 255) | 배경 기본 |
| red | #FF0000 | rgb(255, 0, 0) | 경고, 오류 |
| green | #008000 | rgb(0, 128, 0) | 성공, 확인 |
| blue | #0000FF | rgb(0, 0, 255) | 링크 기본 |
| yellow | #FFFF00 | rgb(255, 255, 0) | 주의, 강조 |
| orange | #FFA500 | rgb(255, 165, 0) | 경고 |
| purple | #800080 | rgb(128, 0, 128) | 프리미엄 |
| gray | #808080 | rgb(128, 128, 128) | 비활성 |
| navy | #000080 | rgb(0, 0, 128) | 비즈니스 |
| teal | #008080 | rgb(0, 128, 128) | 모던 디자인 |
| coral | #FF7F50 | rgb(255, 127, 80) | 트렌디 |
| gold | #FFD700 | rgb(255, 215, 0) | 프리미엄, 등급 |
| tomato | #FF6347 | rgb(255, 99, 71) | UI 액센트 |
| steelblue | #4682B4 | rgb(70, 130, 180) | 대시보드 |
| hotpink | #FF69B4 | rgb(255, 105, 180) | 패션, 뷰티 |
RGB, HSL, HEX — 웹 색상 모델의 이해
RGB는 빨강(Red), 초록(Green), 파랑(Blue) 빛을 혼합하는 가산혼합 모델입니다. 각 채널은 0~255 값을 가지며, 세 값이 모두 0이면 검정, 모두 255이면 흰색입니다. HSL은 색상(Hue, 0~360도), 채도(Saturation, 0~100%), 명도(Lightness, 0~100%)로 표현하며, "이 색을 좀 더 밝게" 같은 직관적인 조절이 쉬워 디자이너가 선호합니다. 버튼의 hover 상태처럼 같은 색조에서 밝기만 바꿀 때 HSL이 특히 편리합니다.
HEX 코드는 RGB 값을 16진수로 축약한 표기법으로, 1990년대 초기 웹에서 표준으로 자리 잡았습니다. CSS에서 색상을 지정하는 방법은 크게 4가지입니다: named color(red, blue 등 148개), HEX(#FF0000), rgb()/rgba() 함수, hsl()/hsla() 함수. 최신 CSS에서는 oklch(), color() 등 넓은 색 영역(wide gamut)을 지원하는 함수도 추가되었습니다. 프로젝트 내에서 한 가지 형식으로 통일하면 코드 일관성이 높아집니다.
웹 접근성 측면에서 WCAG 색상 대비 기준을 준수하는 것이 중요합니다. AA 등급은 일반 텍스트 4.5:1, 큰 텍스트(18pt 이상) 3:1의 대비 비율을 요구하며, AAA 등급은 각각 7:1, 4.5:1입니다. 한편 웹 화면용 RGB와 인쇄용 CMYK(시안·마젠타·옐로·블랙)는 색 재현 원리가 다릅니다. RGB는 빛의 가산혼합이고 CMYK는 잉크의 감산혼합이므로, 화면에서 보던 색이 인쇄물에서 달라질 수 있습니다. 인쇄물 제작 시에는 반드시 CMYK 프로파일로 변환하여 확인해야 합니다.
사용법
- 색상 선택 — 컬러 피커를 클릭하거나 HEX, RGB, HSL 값을 직접 입력하세요.
- 형식 확인 — 입력한 색상이 HEX, RGB, HSL 세 가지 형식으로 자동 변환됩니다.
- 복사하여 사용 — 원하는 형식의 복사 버튼을 눌러 CSS 코드에 바로 붙여넣으세요.
자주 묻는 질문
HEX 색상 코드는 # 기호와 6자리 16진수(0~F)로 색상을 표현하는 방식입니다. 앞 2자리는 빨강, 중간 2자리는 초록, 마지막 2자리는 파랑 값을 나타냅니다. 예: #3B82F6은 파란색입니다.
RGB는 빨강(Red), 초록(Green), 파랑(Blue)의 빛 혼합으로 색상을 표현합니다. HSL은 색상(Hue), 채도(Saturation), 명도(Lightness)로 표현하여 사람이 직관적으로 이해하기 쉽습니다.
HEX는 가장 널리 사용되며 간결합니다. RGB는 투명도(rgba)를 추가할 때 편리하고, HSL은 색상 조합이나 밝기 조절 시 직관적입니다. 프로젝트 컨벤션에 따라 선택하세요.
현재 이 변환기는 불투명 색상(HEX 6자리, RGB, HSL)만 지원합니다. 투명도가 필요한 경우 변환된 값에 알파 채널을 수동으로 추가하세요 (예: rgba(59, 130, 246, 0.5)).
네, 컬러 피커에서 색상을 선택하면 HEX, RGB, HSL 값이 모두 자동으로 업데이트됩니다. 원하는 형식의 복사 버튼을 눌러 바로 사용하세요.
WCAG 2.1 기준으로 일반 텍스트는 배경과 4.5:1 이상의 대비 비율(AA 등급)이 필요하고, 큰 텍스트(18pt 이상)는 3:1 이상이면 됩니다. AAA 등급은 일반 텍스트 7:1, 큰 텍스트 4.5:1을 요구합니다.
Tailwind CSS v4에서는 @theme 블록에서 --color-* CSS 변수로 색상을 정의합니다. 예를 들어 --color-brand: #3B82F6;을 추가하면 bg-brand, text-brand 등의 유틸리티 클래스로 사용할 수 있습니다.
RGB는 빛의 가산혼합(화면용)이고, CMYK는 잉크의 감산혼합(인쇄용)입니다. RGB는 빨강+초록+파랑을 섞으면 흰색이 되지만, CMYK는 시안+마젠타+옐로+블랙을 섞으면 검정에 가까워집니다. 웹 디자인을 인쇄물로 옮길 때는 반드시 CMYK로 변환해야 색상이 정확합니다.