이미지 변환
색상 코드 변환
CMYK는 장치 비의존 근사값입니다. 실제 인쇄 색은 용지·잉크·프로파일에 따라 달라지므로 인쇄 교정본과 대조 확인이 필요합니다.
명도 대비 검사 (WCAG)
일반 텍스트 — 이 정도 크기로 읽힙니다
큰 텍스트 (24px 이상)
팔레트 생성
보색
유사색
삼색조
명도 단계
색상 도구 기능
Color Converter — HEX, RGB, HSL, CMYK를 동시에 보여줍니다. 입력은 HEX·rgb()·hsl()은 물론 green·tomato 같은 CSS 색 이름까지 알아서 인식하며, 색상 선택기로 눈으로 고를 수도 있습니다. Contrast Checker — 글자색과 배경색의 명도 대비를 WCAG 2.1 공식으로 계산해 AA·AAA 기준 통과 여부를 바로 보여줍니다. 실제 글자가 어떻게 보이는지 미리보기로 함께 확인할 수 있습니다. Palette Generator — 기준색에서 보색·유사색·삼색조와 9단계 명도 팔레트를 만들어 줍니다. 색을 누르면 HEX가 복사됩니다. 모든 계산은 브라우저 안에서 이루어집니다.
사용 방법
① 색상 칸에 HEX·RGB·HSL 또는 색 이름을 입력하거나 색상 선택기로 고릅니다. ② HEX·RGB·HSL·CMYK 네 가지 표기가 바로 표시되고, 누르면 복사됩니다. ③ 명도 대비를 보려면 글자색과 배경색을 각각 입력합니다. 대비비와 AA·AAA 통과 여부가 계산됩니다. ④ 아래 팔레트에서 어울리는 색을 골라 복사합니다.
이런 때 사용하세요
• 디자인 시안의 HEX를 CSS나 디자인 툴용 표기로 바꾸기 • 웹 접근성 점검에서 글자색이 기준에 미달하는지 확인 • 브랜드 컬러에서 어울리는 보조 색 찾기 • 버튼·배지용 명도 단계 만들기 • 인쇄 의뢰 전 CMYK 근사값 확인
자주 묻는 질문
- Q. 어떤 형식으로 입력할 수 있나요?
- A. HEX(#16A34A, #1A4), rgb(22,163,74), hsl(142,76%,36%)는 물론 green·tomato 같은 CSS 색 이름도 인식합니다. 브라우저의 색 해석기를 그대로 쓰기 때문에 CSS에서 유효한 표기라면 대부분 동작합니다.
- Q. 명도 대비는 몇 대 1이어야 하나요?
- A. WCAG 2.1 기준으로 일반 텍스트는 AA 4.5:1, AAA 7:1입니다. 큰 텍스트(24px 이상, 또는 굵은 글씨 18.66px 이상)는 AA 3:1, AAA 4.5:1로 완화됩니다. 이 도구는 네 기준을 모두 함께 보여줍니다.
- Q. CMYK 값을 인쇄소에 그대로 줘도 되나요?
- A. 권하지 않습니다. 여기서 보여주는 CMYK는 장치 특성을 고려하지 않은 단순 변환식의 결과입니다. 실제 인쇄 색은 용지·잉크·컬러 프로파일에 따라 달라지므로, 색이 중요한 작업이라면 인쇄소의 프로파일로 변환하고 교정본을 확인하세요.
- Q. 투명도(알파)도 다루나요?
- A. 현재는 불투명한 색만 다룹니다. rgba나 8자리 HEX를 넣으면 알파를 뺀 RGB 값으로 인식합니다. 반투명한 요소의 실제 대비는 아래에 깔린 배경색과 섞인 결과로 계산해야 합니다.
- Q. 명도 단계는 어떻게 만들어지나요?
- A. 기준색의 색상(H)과 채도(S)를 유지한 채 명도(L)만 10%에서 90%까지 9단계로 바꿉니다. 디자인 시스템의 색 단계를 잡을 때 출발점으로 쓰기 좋습니다.