컬러 코드 변환기
HEX·RGB·HSL·HSV·OKLCH·CMYK 컬러 코드를 서로 변환합니다. 글자와 배경의 명암비(WCAG)도 확인할 수 있습니다.
1. 색 입력하기
컬러 코드를 붙여 넣거나 왼쪽 네모를 눌러 색을 고릅니다.
예: #FF6B35, rgb(255, 107, 53), hsl(16, 100%, 60%), C0 M58 Y79 K0, tomato
2. 변환 결과
오른쪽 버튼으로 CSS에 바로 붙여 넣을 수 있는 형태로 복사할 수 있습니다.
- HEX
- —
- RGB
- —
- HSL
- —
- HSV (HSB)
- —
- OKLCH
- —
- CMYK(참고값)
- —
- CSS 색 이름
- —
3. 명암비 확인하기
글자와 배경 색의 조합이 읽기 쉬운지 WCAG(웹 접근성 기준)로 확인합니다.
입력한 색을 쓸 곳
위에서 색을 입력하면 여기에 미리보기가 나옵니다.
명암비
—
- 일반 글자 AA4.5 : 1 이상—
- 일반 글자 AAA7 : 1 이상—
- 큰 글자 AA3 : 1 이상—
- 큰 글자 AAA4.5 : 1 이상—
큰 글자는 18pt(24px) 이상, 또는 굵은 글꼴로 14pt(약 18.7px) 이상인 글자입니다.
변환은 이 기기 안에서 이루어지며, 입력한 색은 어디에도 전송되지 않습니다.
CMYK는 인쇄용 색 설정(ICC 프로파일)을 쓰지 않고 계산한 참고값입니다. 인쇄소에 파일을 넘길 때는 디자인 프로그램에서 확인하세요.
도움이 되었다면 공유해 주세요
잘 작동하지 않거나 ‘이랬으면 좋겠다’ 싶은 점이 있다면
사용 방법
1. 컬러 코드 입력하기
‘컬러 코드’ 칸에 변환할 색의 코드(예: #FF6B35)를 입력합니다. 입력하는 즉시 아래 ‘변환 결과’에 RGB·HSL·HSV·OKLCH·CMYK와 CSS 색 이름이 나옵니다.
왼쪽 ‘컬러 코드’ 칸에 변환할 색의 코드(예: #FF6B35)를 입력합니다. 입력하는 즉시 오른쪽 ‘변환 결과’에 RGB·HSL·HSV·OKLCH·CMYK와 CSS 색 이름이 나옵니다.
2. 색을 골라서 입력하기
‘컬러 코드’ 칸 왼쪽의 색 네모를 탭합니다. 색을 고르는 창이 열리고, 고른 색의 코드가 칸에 들어가며 결과도 바뀝니다.
‘컬러 코드’ 칸 왼쪽의 색 네모를 클릭합니다. 색을 고르는 창이 열리고, 고른 색의 코드가 칸에 들어가며 결과도 바뀝니다.
3. 결과 복사하기
‘변환 결과’에서 ‘RGB’ 오른쪽의 버튼을 탭하면 rgb(…) 형태로 복사합니다. 아래 ‘결과 모두 복사’를 탭하면 모든 형식을 한 줄씩 복사합니다.
‘변환 결과’에서 ‘RGB’ 오른쪽의 버튼을 클릭하면 rgb(…) 형태로 복사합니다. 아래 ‘결과 모두 복사’를 클릭하면 모든 형식을 한 줄씩 복사합니다.
4. 명암비 확인하기
아래 ‘명암비 확인하기’에서 ‘배경 색’ 오른쪽의 ‘검은색’을 탭합니다. 검은 배경 위의 글자 미리보기와 명암비, 일반 글자·큰 글자가 AA·AAA 기준을 충족하는지가 나옵니다.
아래 ‘명암비 확인하기’에서 ‘배경 색’ 오른쪽의 ‘검은색’을 클릭합니다. 검은 배경 위의 글자 미리보기와 명암비, 일반 글자·큰 글자가 AA·AAA 기준을 충족하는지가 나옵니다.
이럴 때 추천해요
디자인 시안의 색을 CSS로 쓰고 싶을 때
디자인 프로그램에서 복사한 HEX를 붙여 넣으면 rgb()나 hsl(), 새로운 oklch() 형식이 바로 나옵니다.
웹 제작·앱 개발자
글자 색이 읽기 쉬운지 확인하고 싶을 때
글자와 배경 색을 입력하기만 하면 명암비와 WCAG의 AA·AAA 충족 여부를 알 수 있습니다.
접근성을 신경 쓰는 디자이너
화면 색을 인쇄용 CMYK로 가늠하고 싶을 때
전단지나 명함을 만들 때 웹의 색이 CMYK로 어느 정도가 되는지 짐작할 수 있습니다.
인쇄물을 만드는 사람
브랜드 색을 여러 형식으로 정리하고 싶을 때
‘결과 모두 복사’로 HEX부터 CMYK까지 한 번에 복사해 자료나 가이드라인에 붙여 넣을 수 있습니다.
홍보·브랜드 담당자
사용하기 전에 알아 두세요
- CMYK는 계산으로 구한 참고값입니다. 인쇄소의 색 설정(ICC 프로파일)에 맞춘 정확한 값은 디자인 프로그램에서 확인하세요.
- 이미지에서 색을 뽑아내고 싶을 때는 이미지에서 색 추출를 이용하세요.
- PANTONE 같은 별색 번호나 먼셀 값으로는 변환할 수 없습니다.
컬러 코드 형식의 차이
화면의 색은 빛의 삼원색(빨강·초록·파랑)의 세기로 나타냅니다. HEX(#FF6B35)와 RGB(rgb(255, 107, 53))는 같은 값을 16진수와 10진수로 쓴 것이고, HSL과 HSV는 이를 ‘색상·채도·명도’로 바꿔 사람이 색을 조절하기 쉽게 한 형식입니다. OKLCH는 사람 눈이 느끼는 방식에 가까운 밝기로 나타내기 때문에 밝기를 맞춘 배색을 만들기 쉬워, 새로운 CSS에서 쓰이기 시작했습니다.
CMYK는 인쇄 잉크(시안·마젠타·옐로·블랙)의 양입니다. 화면의 색은 빛, 인쇄는 잉크이므로 같은 색을 완전히 똑같이 낼 수는 없습니다. 이 도구의 CMYK는 널리 쓰이는 계산식으로 구한 참고값입니다. 명암비는 글자와 배경의 밝기 차이를 1~21로 나타낸 것으로, WCAG에서는 일반 글자의 경우 4.5 이상(AA), 7 이상(AAA)이 기준입니다.
자주 묻는 질문
컬러 코드 변환과 명암비에 대해 궁금해하기 쉬운 점을 모았습니다.
입력한 색이 어딘가로 전송되나요?
전송되지 않습니다. 변환도 명암비 계산도 사용 중인 기기의 브라우저 안에서만 이루어집니다.
어떤 형식으로 입력할 수 있나요?
#FF6B35·#F63 같은 HEX(# 없이도 가능), rgb()·rgba(), hsl()·hsla(), hsv()·hsb(), oklch(), cmyk()·‘C0 M58 Y79 K0’, tomato 같은 CSS 색 이름을 읽어 들입니다. ‘255, 107, 53’처럼 숫자만 입력하면 RGB로 읽습니다. 전각 문자로 입력해도 괜찮습니다.
투명도(알파)가 있는 색도 변환할 수 있나요?
네. #FF6B3580 같은 8자리 HEX나 rgba(255, 107, 53, 0.5)를 입력하면 HEX는 8자리로, RGB·HSL·OKLCH는 불투명도를 붙여서 보여 줍니다. HSV와 CMYK에는 불투명도를 쓰는 형식이 없어서 색만 보여 줍니다.
HSL로 변환했다가 되돌리면 값이 1씩 어긋나는 이유는 무엇인가요?
HSL·HSV는 다른 사이트나 디자인 프로그램과 마찬가지로 정수로 반올림해서 보여 줍니다. 반올림한 값에서 되돌리면 RGB가 1~2 정도 어긋날 수 있습니다. 정확한 값이 필요할 때는 HEX나 RGB를 쓰세요.
CMYK 값을 인쇄에 그대로 써도 되나요?
참고값으로 써 주세요. 실제 인쇄 색은 종이와 잉크, 인쇄소의 색 설정(ICC 프로파일)에 따라 달라집니다. 이 도구의 값은 색 설정을 쓰지 않는 일반적인 계산식으로 구한 것입니다. 파일을 넘기기 전에 디자인 프로그램이나 인쇄소에서 확인하세요.
OKLCH는 무엇인가요?
밝기(L)·채도(C)·색상(H)으로 색을 나타내는 형식으로, 사람 눈이 느끼는 방식에 가깝다는 것이 특징입니다. 밝기 값을 맞추면 색상이 달라도 비슷한 밝기로 보입니다. 최신 브라우저의 CSS에서 oklch()로 쓸 수 있습니다.
OKLCH로 입력한 색이 조금 바뀝니다.
OKLCH로는 일반 화면(sRGB)에서 표현할 수 없는 선명한 색도 쓸 수 있습니다. 그런 색은 밝기와 색상은 그대로 두고, 표현할 수 있는 데까지 채도를 낮춘 색으로 바꿉니다. 이때는 입력 칸 아래에 안내가 나옵니다.
명암비의 AA·AAA는 무엇인가요?
웹 접근성 기준(WCAG 2)의 달성 수준입니다. 일반 글자는 4.5 이상이면 AA, 7 이상이면 AAA이고, 큰 글자(18pt 이상, 또는 굵은 글꼴로 14pt 이상)는 3 이상이면 AA, 4.5 이상이면 AAA입니다.
명암비가 4.49인데 4.5로 표시되지 않는 이유는 무엇인가요?
기준에 아주 조금 못 미치는 조합이 ‘통과’로 보이지 않도록, 소수점 아래 둘째 자리까지 남기고 버려서 표시하며 그 값으로 판정합니다.
무료인가요?
무료입니다. 가입할 필요가 없고 광고도 없습니다.
다른 도구
- 소비세 계산기(세금 포함⇔세전)
금액만 입력하면 세전 금액·세금·세금 포함 금액을 바로 계산합니다. 일본의 10%·8%(경감세율)와 다른 세율도 쓸 수 있습니다.
- 나이 계산기(만 나이·나이 조견표)
생년월일만 고르면 만 나이·세는나이·띠·다음 생일까지 남은 날을 바로 알 수 있습니다. 출생 연도별 나이 조견표도 있습니다.
- 날짜 계산기(며칠 후·며칠 전)
기준일로부터 며칠 후·며칠 전·몇 영업일 후의 날짜와 요일을 바로 알려 줍니다. 주말과 공휴일을 빼고 셀 수도 있습니다.
- 시간 계산기(근무시간 합계)
출근·퇴근·휴게 시간으로 일한 시간을 구해 합계합니다. 시간 더하기·빼기와 소수 시간 변환도 할 수 있습니다.
- 더치페이 계산기(N분의 1)
합계와 인원만 입력하면 1인당 금액이 바로 나옵니다. 100원 단위 올림, 상사는 더 많이 같은 차등, 총무의 끝전 조정도 됩니다.
- 유닉스 시간 변환(에포크 초 ⇔ 날짜·시간)
유닉스 시간(에포크 초·밀리초)을 UTC·이 기기·일본 시간의 날짜와 시간으로, 날짜와 시간을 유닉스 시간으로 바로 변환합니다.