이 도구에 대해
색상 코드 변환기란?
HEX, RGB, HSL 색상 코드를 상호 변환하는 도구입니다. 웹 디자인과 개발에서 색상을 다양한 형식으로 표현해야 할 때 유용합니다. 색상 선택기로 원하는 색상을 직접 고를 수도 있습니다.
사용 방법
- HEX, RGB, HSL 중 하나의 형식으로 색상 코드를 입력합니다.
- 또는 색상 선택기에서 원하는 색상을 클릭합니다.
- 나머지 형식의 코드가 자동으로 변환되어 표시됩니다.
- 필요한 형식의 값을 복사합니다.
주요 기능
- HEX, RGB, HSL 세 가지 색상 코드 형식 지원
- 시각적 색상 선택기 제공
- 실시간 상호 변환
- 색상 미리보기
팁
- HEX 코드는 CSS에서 가장 많이 사용되는 색상 표현 방식입니다.
- HSL은 색조(Hue), 채도(Saturation), 밝기(Lightness)로 구성되어 색상 조절이 직관적입니다.
- RGB 값은 각 채널이 0~255 범위이며, rgba()로 투명도도 설정할 수 있습니다.
색상 코드 변환기
HEX, RGB, HSL 색상 코드를 상호 변환합니다
#3B82F6
자주 묻는 질문
CSS에서 HEX, RGB, HSL 중 어떤 것을 사용해야 하나요?▼
HEX(#FF5733)는 가장 간결하고 널리 사용됩니다. RGB/RGBA는 투명도(알파 채널)가 필요할 때 적합합니다. HSL은 색상 조작에 가장 직관적입니다 — 색조를 변경하면 색상환이 회전하고, 밝기를 조절하면 밝아지거나 어두워집니다. 프로그래밍으로 색상 변형을 생성할 때는 HSL이 편리합니다.
HEX 코드 3자리와 6자리 표기의 차이는 무엇인가요?▼
3자리 HEX(#F00)는 각 자릿수를 두 번 반복하는 축약형입니다: #F00 = #FF0000. 각 쌍이 동일한 숫자일 때만 사용 가능합니다. #ABC = #AABBCC이지만, #A1B2C3의 축약형은 없습니다. 8자리 HEX(#FF000080)는 알파 투명도를 추가합니다.
접근성이 좋은 색상 조합은 어떻게 선택하나요?▼
WCAG 가이드라인은 일반 텍스트에 최소 4.5:1, 큰 텍스트에 3:1의 대비율을 요구합니다. HSL을 사용하면 밝기를 빠르게 조절하여 대비를 개선할 수 있습니다. 밝은 배경에 어두운 텍스트(또는 반대)를 사용하고 충분한 밝기 차이를 두면 가독성이 보장됩니다.