색상 변환기이란?
컬러 컨버터는 웹 개발자, 그래픽 디자이너 및 디지털 색상을 다루는 모든 사람에게 필수적인 도구입니다. HEX(16진수), RGB(빨간색-초록색-파란색), HSL(색상-채도-명도)의 세 가지 가장 널리 사용되는 색상 형식 간의 즉시적이고 정확한 변환을 제공합니다. HEX 표기는 # 뒤에 여섯 개의 16진 숫자를 써서 #FF5733과 같이 표시되며, CSS와 웹 디자인의 표준 형식입니다. RGB 형식은 rgb(255, 87, 51)로 표현되며, 각 채널의 강도를 지정하여 색상을 정의합니다. HSL 형식은 hsl(11, 100%, 60%)로 쓰며, 색상을 색상(0~360도 색상환 각도), 채도(선명도 0~100%), 명도(밝기 0~100%)로 설명합니다. 이 컨버터는 라이브 색상 미리보기, WCAG 대비 비율 확인, 변환 기록 기능도 포함하고 있습니다. Figma나 Sketch에서 CSS로의 색상 변환, 디자인 시스템 구축, 색상 팔레트 생성, CSS 색상 문제 디버깅에 이상적인 도구입니다.
이 계산기를 사용해야 할 때
- 디자이너의 색상 사양을 CSS 호환 값으로 변환할 때.
- 디자인 시스템을 구축할 때.
- HSL을 사용하여 색상 팔레트를 만들 때.
- WCAG AA 및 AAA 준수를 위한 색상 대비를 확인할 때.
- 기존 코드의 레거시 색상 값을 변환할 때.
- CSS 색상 문제를 디버깅할 때.
단계:
- 모든 형식으로 색상 값을 입력.
- 탭을 사용하여 입력 형식 선택.
- 세 형식으로 변환된 값 보기.
- 복사 버튼으로 결과 복사.
- WCAG 대비 뱃지 확인.
공식
HEX → RGB: #RRGGBB를 10진수 값으로 분할
RGB → HSL: RGB 정규화 → 색상/채도/명도 검색
HSL → RGB: 크로마 공식으로 변환
HEX: #RRGGBB (각 0-255)
RGB: rgb(R, G, B) (0-255)
HSL: hsl(H°, S%, L%) (H: 0-360, S/L: 0-100)
사용 사례
- CSS 색상 값 변환
- 기본 색상에서 색상 스키마 만들기
- 디자인 시스템 색상 매칭
- HSL을 통한 색상 관계 이해
주요 이점
- HEX, RGB, HSL 형식 간에 즉시 색상 변환
- 입력하면서 업데이트되는 라이브 색상 미리보기 보기
- WCAG 대비 비율을 자동 AA/AAA 뱃지로 확인
- 변환 기록에 액세스
- 원클릭으로 모든 형식 복사
- 브라우저에서 완전히 작동하며 데이터를 전송하지 않음
전문가 팁
- 색상 변형을 만들려면 HSL을 사용하세요.
- CSS와 HTML에는 항상 HEX를 사용하세요.
- WCAG 대비 요구 사항에 대해 색상 선택을 확인하세요.
- 디자인 시스템을 구축할 때 기본 팔레트를 HSL로 정의하세요.
- HEX 값은 대소문자를 구분하지 않습니다.
피해야 할 일반적인 실수
- HEX 색상 입력 시 # 접두사를 잊는 것.
- 255를 초과하거나 0 미만의 RGB 값을 사용하는 것.
- HSL 색상 범위(0-360)와 RGB(0-255)를 혼동하는 것.
- HSL 명도와 RGB 밝기가 동일하다고 가정하는 것.
주요 용어 설명
- HEX: CSS 및 웹 디자인에 사용되는 16진수 색상 표기법.
- RGB: 빨간색-초록색-파란색 색상 모델.
- HSL: 색상-채도-명도 색상 모델.
- 색상 공간: 색상을 구성하고 표현하는 수학적 모델.
- WCAG 대비 비율: 텍스트와 배경 사이의 휘도 차이의 수치적 측정.
관련 개념
예시
입력: #FF5733 (HEX) → RGB: rgb(255, 87, 51) → HSL: hsl(11, 100%, 60%). 입력: hsl(200, 50%, 50%) → RGB: rgb(64, 149, 191) → HEX: #4095BF.
결과 해석 방법
컨버터는 색상을 세 형식 동시에 표시합니다. HEX는 웹 개발에서 가장 일반적인 형식입니다. RGB는 개별 색상 채널에 대한 직접적인 제어를 제공합니다. HSL은 인간의 이해를 위한 가장 직관적인 형식입니다.