색상 코드 변환 가이드 — HEX, RGB, HSL 차이와 변환법
작성
웹 디자인과 개발에서 색상을 지정할 때 HEX, RGB, HSL 등 다양한 표기법을 사용합니다. 각 형식의 차이와 변환 방법을 정리합니다.
색상 코드 형식 비교
| 형식 | 빨간색 표기 | 특징 |
|---|---|---|
| HEX | #FF0000 | 6자리 16진수, CSS에서 가장 흔함 |
| RGB | rgb(255, 0, 0) | 빨강·초록·파랑 각 0~255 |
| HSL | hsl(0, 100%, 50%) | 색상·채도·명도, 직관적 조절 |
자주 쓰는 색상 코드
| 색상 | HEX | RGB |
|---|---|---|
| 검정 | #000000 | rgb(0, 0, 0) |
| 흰색 | #FFFFFF | rgb(255, 255, 255) |
| 빨강 | #FF0000 | rgb(255, 0, 0) |
| 초록 | #00FF00 | rgb(0, 255, 0) |
| 파랑 | #0000FF | rgb(0, 0, 255) |
| 노랑 | #FFFF00 | rgb(255, 255, 0) |
| 회색 | #808080 | rgb(128, 128, 128) |
색상 코드 변환기로 바로 확인하기
HEX, RGB, HSL 코드를 입력하면 나머지 형식으로 즉시 변환하고 색상을 미리 볼 수 있습니다.
자주 묻는 질문
HEX 코드에서 #은 무엇인가요?
CSS에서 16진수 색상 코드임을 표시하는 접두사입니다. #FF0000은 빨간색, #00FF00은 초록색, #0000FF는 파란색입니다.
RGB와 RGBA의 차이는?
RGBA는 RGB에 Alpha(투명도) 채널을 추가한 것입니다. Alpha는 0(완전 투명)~1(완전 불투명)으로 지정합니다. 예: rgba(255, 0, 0, 0.5) = 반투명 빨간색.
HSL이 RGB보다 좋은 점은?
HSL은 색상(Hue), 채도(Saturation), 명도(Lightness)로 구성되어 사람의 색 인식 방식과 가깝습니다. 밝기만 바꾸거나 채도만 조절하기가 편리합니다.