색상 코드 변환기
HEX, RGB, HSL 색상 코드를 입력하면 나머지 형식으로 즉시 변환합니다.
HEX
#FF0000
RGB
rgb(255, 0, 0)
HSL
hsl(0, 100%, 50%)
사용법
- HEX, RGB, HSL 중 아무 값이나 입력합니다.
- 나머지 형식이 자동으로 계산되고 색상 미리보기가 표시됩니다.
- 필요한 형식의 복사 버튼을 눌러 CSS에 바로 붙여넣으세요.
색상 모델 비교
- HEX (#RRGGBB)
- 16진수 6자리로 색상을 표현합니다. 웹에서 가장 흔히 쓰이며 간결합니다.
- RGB (r, g, b)
- 빨강, 초록, 파랑 각각 0~255 값으로 빛의 양을 지정합니다. RGBA로 투명도를 추가할 수 있습니다.
- HSL (h, s%, l%)
- 색상(0~360도), 채도(0~100%), 명도(0~100%)로 표현합니다. 색 조합을 만들거나 밝기를 조절할 때 직관적입니다.
자주 쓰는 색상 코드 표
디자인 작업에서 자주 사용하는 기본 색상의 HEX, RGB, HSL 값을 정리했습니다.
| 색상 | HEX | RGB | HSL |
|---|---|---|---|
| 빨강 | #FF0000 | rgb(255, 0, 0) | hsl(0, 100%, 50%) |
| 주황 | #FF8800 | rgb(255, 136, 0) | hsl(32, 100%, 50%) |
| 노랑 | #FFFF00 | rgb(255, 255, 0) | hsl(60, 100%, 50%) |
| 초록 | #00FF00 | rgb(0, 255, 0) | hsl(120, 100%, 50%) |
| 하늘 | #00BFFF | rgb(0, 191, 255) | hsl(195, 100%, 50%) |
| 파랑 | #0000FF | rgb(0, 0, 255) | hsl(240, 100%, 50%) |
| 보라 | #8B00FF | rgb(139, 0, 255) | hsl(273, 100%, 50%) |
| 분홍 | #FF69B4 | rgb(255, 105, 180) | hsl(330, 100%, 71%) |
| 흰색 | #FFFFFF | rgb(255, 255, 255) | hsl(0, 0%, 100%) |
| 검정 | #000000 | rgb(0, 0, 0) | hsl(0, 0%, 0%) |
| 회색 | #808080 | rgb(128, 128, 128) | hsl(0, 0%, 50%) |
| 갈색 | #8B4513 | rgb(139, 69, 19) | hsl(25, 76%, 31%) |
CSS 색상 함수 활용 팁
최신 CSS에서는 다양한 색상 함수를 지원합니다. 상황에 맞는 함수를 선택하면 스타일시트 관리가 편해집니다.
- rgba() — 투명도 조절
- rgba(255, 0, 0, 0.5)처럼 네 번째 값(0~1)으로 투명도를 지정합니다. 오버레이, 그림자, 반투명 배경에 유용합니다.
- hsla() — 색상 체계적 관리
- 색상(H)을 고정하고 채도(S)와 명도(L)만 바꾸면 같은 계열의 밝은/어두운 색을 쉽게 만들 수 있습니다. 디자인 시스템에서 색상 팔레트를 구성할 때 특히 유리합니다.
- CSS 변수와 함께 쓰기
- --primary-h, --primary-s, --primary-l처럼 HSL 값을 CSS 변수로 저장하면, hsl(var(--primary-h), var(--primary-s), var(--primary-l))로 조합해 테마 변경이 간편해집니다.
자주 묻는 질문
HEX 색상 코드란?
HEX 색상 코드는 빨강(R), 초록(G), 파랑(B) 각 채널을 16진수 두 자리로 표현한 6자리 코드입니다. 앞에 #을 붙여 #FF0000처럼 씁니다. 웹 디자인에서 가장 널리 쓰이는 색상 표기법입니다.
RGB와 HSL의 차이는?
RGB는 빨강, 초록, 파랑 빛의 양을 0~255로 지정하고, HSL은 색상(Hue), 채도(Saturation), 명도(Lightness)로 지정합니다. HSL이 사람이 색을 인식하는 방식에 더 가깝기 때문에, 밝기나 채도를 조절할 때 더 직관적입니다.
CSS에서 어떤 형식을 쓰는 게 좋나요?
모든 최신 브라우저가 HEX, RGB, HSL을 모두 지원합니다. HEX는 짧아서 간편하고, RGB는 투명도(RGBA)를 쓸 때 편리하며, HSL은 색 조합을 만들 때 유리합니다. 팀의 코딩 컨벤션에 따라 선택하면 됩니다.
입력한 정보가 저장되나요?
아닙니다. 모든 변환은 브라우저 안에서만 이루어지고, 입력한 값은 서버로 전송되지 않습니다.
HEX 3자리 축약 코드는 어떻게 사용하나요?
#RGB 형태의 3자리 코드는 각 자리를 두 번 반복한 것과 같습니다. 예를 들어 #F00은 #FF0000(빨강), #0CF는 #00CCFF(하늘색)입니다. 코드를 짧게 쓸 수 있어 CSS에서 자주 활용됩니다.