HEX, RGB, HSL, HSV, HWB, OKLCH, CMYK 출력 기본 색상 선택기와 불투명도 슬라이더 흰색·검은색 대비 WCAG 2 대비율 명암 팔레트 자동 생성

색상 변환기 - HEX, RGB, HSL, OKLCH, CMYK & 대비 검사

왜 색상 형식을 변환할까요?

디자이너와 개발자는 다양한 색상 형식을 사용합니다. 디자인 도구의 HEX, CSS의 rgb()와 hsl(), Tailwind CSS v4 같은 최신 디자인 시스템의 OKLCH, 인쇄용 CMYK까지. 이 도구는 이들 사이를 즉시 변환합니다.

모든 변환은 네트워크 요청 없이 브라우저에서 계산됩니다.

접근성 좋은 색상, 추적 없음.

1
#3B82F6, rgb(59 130 246), hsl(217 91% 60%), oklch(...), cmyk(...) 또는 tomato 같은 색 이름 등 어떤 CSS 형식으로든 색을 입력하세요. 컬러 피커로 고를 수도 있습니다.
2
투명도가 필요하면 불투명도 슬라이더를 조절하세요. 8자리 HEX와 rgba를 포함한 모든 형식이 함께 갱신됩니다.
3
필요한 형식을 복사하세요. 디자인 전달에는 HEX, CSS에는 rgb()나 hsl(), 최신 디자인 토큰에는 OKLCH, 인쇄 참고용으로는 CMYK를 씁니다.
4
흰 글자와 검은 글자에 대한 WCAG 대비를 확인하고, 팔레트의 색을 클릭해 더 밝거나 어두운 변형을 살펴보세요.

디자이너가 Figma에서 #0EA5E9를 보내면 hsl()로 바꿔 명도만 조절해 hover, active 상태를 만들 수 있습니다.

본문 텍스트는 WCAG AA 기준 최소 4.5:1 대비가 필요합니다. 브랜드 색을 흰 글자 버튼 배경으로 쓰기 전에 확인하세요.

생성된 음영을 Tailwind CSS나 디자인 시스템의 50~900 팔레트의 출발점으로 활용하세요.

화면 색을 CMYK로 바꿔 인쇄소와 소통하세요. 근사값일 뿐이며 정확한 인쇄 색은 종이와 프린터 프로파일에 따라 달라집니다.

RGB와 HSL의 차이는?+

둘 다 같은 색을 표현합니다. RGB는 빨강, 초록, 파랑 빛을 섞고, HSL은 색상, 채도, 명도로 표현해 "10% 더 밝게"처럼 사람이 조정하기 쉽습니다.

OKLCH를 쓰는 이유는?+

OKLCH는 지각적으로 균일해서 HSL과 달리 같은 명도 변화가 눈에도 같은 차이로 보입니다. 모든 최신 브라우저가 지원하며 일관된 색상 스케일과 다크 테마를 만들기 쉽습니다.

필요한 대비율은?+

WCAG AA는 일반 텍스트에 4.5:1, 큰 텍스트(약 24px, 굵게는 19px)에 3:1을 요구합니다. AAA는 각각 7:1과 4.5:1입니다.

CMYK 값은 정확한가요?+

아닙니다. 색상 프로파일 없이 화면 RGB를 CMYK로 바꾸면 수학적 근사값입니다. 브랜드에 중요한 인쇄물은 교정 인쇄를 요청하거나 팬톤을 참고하세요.