빠른 사용법
세 단계로 확인합니다.
- 1HEX 또는 RGB·HSL 채널을 입력합니다
3·6자리 HEX와 범위 제한 숫자 채널 중 편한 형식으로 색상을 조정합니다.
- 2네 가지 색상 모델을 비교합니다
HEX·RGB·HSL·HSV와 CSS custom property 초안을 동시에 확인합니다.
- 3사용 문맥과 gamut을 확인합니다
복사한 sRGB 값을 실제 브라우저·디자인 시스템·wide gamut 요구와 비교합니다.
결과 읽기
색상 모델은 같은 sRGB 색상을 다른 좌표로 표현합니다.
HSL·HSV는 사람이 조정하기 편한 변환 표현이지만 지각적으로 균일하지 않아 같은 수치 변화가 같은 시각 차이를 뜻하지 않습니다.HEX16진 채널
R·G·B 각 8bit를 두 자리 16진수로 이어 #RRGGBB를 만듭니다.
HSL색조·채도·명도
RGB 최대·최소 채널 차이로 hue와 saturation을 계산합니다.
HSV색조·채도·값
밝은 채널을 value로 사용해 색 선택기와 시각 비교에 활용합니다.
alpha, Display-P3, Lab/LCH, CMYK와 색상 프로파일은 지원하지 않습니다. 브랜드 색 정본과 접근성 대비는 별도 도구·실기기에서 확인하세요.
이럴 때 유용합니다.
- 개발용 색상 코드 변환
- CSS 변수 초안
- 디자인 시안 채널 검산
함께 확인하세요.
- sRGB·불투명 색상만 지원
- HSL/HSV 반올림 오차 가능
- 인쇄·wide gamut 미지원
자주 묻는 질문
사용 전 알아둘 점
HEX와 HSL을 왕복하면 값이 조금 달라질 수 있나요?
정수 반올림 때문에 중간 HSL 값을 다시 RGB로 바꾸면 1 정도 채널 차이가 날 수 있습니다.
투명도도 변환하나요?
현재는 불투명 #RRGGBB만 다루며 alpha는 별도로 설계해야 합니다.
색상값이 서버로 전송되나요?
아닙니다. 모든 계산과 복사는 현재 브라우저에서만 수행합니다.