웹 디자인과 개발에서 색상 코드는 필수입니다. HEX, RGB, HSL 등 다양한 형식이 있으며, 상황에 따라 적절히 변환해 사용해야 합니다.
HEX 코드란?
16진수로 색상을 표현하는 방식입니다. #으로 시작하며 6자리(또는 3자리)로 구성됩니다.
- #FF0000 = 빨강
- #00FF00 = 초록
- #0000FF = 파랑
- #FFFFFF = 흰색
- #000000 = 검정
RGB란?
빨강(Red), 초록(Green), 파랑(Blue)의 조합으로 색상을 표현합니다. 각 값은 0-255 범위입니다.
예: rgb(255, 0, 0) = 빨강
HSL이란?
색조(Hue), 채도(Saturation), 명도(Lightness)로 색상을 표현합니다.
- Hue: 0-360도 (색상환 위치)
- Saturation: 0-100% (선명도)
- Lightness: 0-100% (밝기)
변환 공식
HEX → RGB
각 2자리씩 16진수를 10진수로 변환합니다.
#3B82F6 → R:59, G:130, B:246
RGB → HEX
각 값을 16진수로 변환 후 합칩니다.
rgb(59, 130, 246) → #3B82F6
색상 선택 팁
- 대비: 텍스트와 배경 색상은 명도 차이를 크게
- 조화: 색상환에서 인접하거나 보색 활용
- 일관성: 브랜드 컬러를 정해 통일감 유지
마무리
색상 변환기를 활용하면 HEX, RGB, HSL 간 변환을 쉽게 할 수 있습니다. 디자인 작업에 활용해보세요.