🎨 색상 변환기

HEX, RGB, HSL 색상 코드를 서로 변환하고 흰색·검은색 글자와의 명도 대비(WCAG)를 확인합니다.

HEX, RGB, HSL

모니터는 빨강(R)·초록(G)·파랑(B) 빛을 섞어 색을 만듭니다. RGB는 각 채널을 0~255로, HEX는 같은 값을 16진수 두 자리씩 #RRGGBB로 적은 것입니다. #FF0000은 rgb(255, 0, 0), 순수한 빨강입니다.

HSL은 색상(Hue, 0~360도), 채도(Saturation), 명도(Lightness)로 표현해 "같은 색인데 조금 더 밝게" 같은 조정이 쉽습니다. 디자인 시스템에서 색 단계를 만들 때 자주 씁니다.

글자와 배경의 대비가 낮으면 읽기 어렵습니다. 웹 접근성 지침(WCAG) AA는 본문 글자에 4.5:1 이상, 큰 글자에 3:1 이상을 요구합니다. 버튼 배경색을 정할 때 흰 글자와 검은 글자 중 어느 쪽이 기준을 넘는지 확인해 보세요.

#FFF처럼 세 자리 HEX는 무엇인가요?

각 자리를 두 번 반복한 축약형으로 #FFF는 #FFFFFF와 같습니다.

인쇄용 CMYK로도 바꿀 수 있나요?

화면색(RGB)과 인쇄색(CMYK)은 표현 범위가 달라 정확한 변환에는 색상 프로파일이 필요합니다. 이 도구는 화면용 색만 다룹니다.