색상 코드는 어떻게 변환하나요?
위 입력칸에 알고 있는 색상 코드를 그대로 넣으면 됩니다. 헥스 코드(#FF5733, FF5733, #F53, 여덟 자리 #FF573380), rgb()·rgba(), hsl(), hsv(), cmyk(), oklch(), CSS 색 이름을 모두 읽고, 나머지 형식이 한꺼번에 바뀝니다. 같은 색을 형식별로 적으면 다음과 같습니다.
| 형식 | #FF5733 | 주로 쓰는 곳 |
|---|---|---|
| HEX | #FF5733 | CSS, HTML, 피그마 등 디자인 툴 |
| RGB | rgb(255, 87, 51) | CSS, 화면, 이미지 편집 |
| HSL | hsl(11, 100%, 60%) | CSS에서 밝기·채도 조절 |
| HSV / HSB | hsv(11, 80%, 100%) | 포토샵·피그마 색상 선택기 |
| CMYK | cmyk(0%, 66%, 80%, 0%) | 인쇄물 작업의 참고값 |
| OKLCH | oklch(68% 0.21 33.7) | 최신 CSS, 고르게 보이는 팔레트 |
HEX, RGB, HSL, CMYK는 무엇이 다른가요?
RGB는 빨강·초록·파랑 빛을 각각 0~255로 섞는 방식입니다. HEX(헥스 코드)는 같은 세 숫자를 16진수로 적은 것입니다. HSL은 색상(0~360°)·채도·밝기로 색을 나타내고, HSV(HSB)는 밝기 대신 명도를 써서 대부분의 색상 선택기가 이 방식을 보여줍니다. CMYK는 인쇄에 쓰는 시안·마젠타·노랑·검정 잉크 비율입니다. OKLCH는 사람 눈에 고르게 보이도록 만든 밝기·채도·색상 표기로, W3C CSS Color Module Level 4에 정의되어 있고 Oklab 색 공간(Björn Ottosson, A perceptual color space for image processing(2020))을 바탕으로 합니다.
헥스 코드를 RGB로 바꾸려면
헥스 코드를 두 자리씩 나눠 16진수를 10진수로 바꿉니다. #FF5733은 FF = 255, 57 = 87, 33 = 51이므로 rgb(255, 87, 51)입니다. 계산 과정은 HEX RGB 변환기, 반대 방향은 RGB HEX 변환기에서 볼 수 있습니다.
RGB·HEX를 CMYK로 바꾸려면
R·G·B를 255로 나누고 K = 1 − 가장 큰 값, C = (1 − R − K) ÷ (1 − K)로 계산하며 M·Y도 같은 방식입니다. #FF5733은 cmyk(0%, 66%, 80%, 0%)입니다. 자세한 내용은 RGB CMYK 변환기와 CMYK RGB 변환기에 있습니다.
변환기마다 CMYK 값이 다른 이유
이 변환기는 CMYK를 RGB의 단순한 반대값으로 보는 산술 공식을 씁니다. ICC 색상 프로파일을 거치지 않기 때문에 결과는 인쇄용 확정값이 아니라 참고값입니다. 포토샵과 일러스트레이터는 색상 설정에 지정된 프로파일(예: Japan Color 2001 Coated, U.S. Web Coated SWOP)로 변환하고 잉크 총량 제한도 반영하며, 어두운 색에는 검정(K)을 더 섞습니다. 그래서 같은 색이라도 프로그램이 보여주는 CMYK 값은 이 공식과 다릅니다. 인쇄물은 인쇄소가 쓰는 프로파일을 받아 디자인 프로그램에서 변환하는 것이 안전합니다.
명도 대비는 어떻게 계산하나요?
WCAG 2.2는 두 색의 상대 휘도를 비교합니다. sRGB 각 채널을 255로 나눈 뒤 선형값으로 바꾸고(0.04045 이하는 12.92로 나누고, 그보다 크면 ((v + 0.055) / 1.055)2.4), L = 0.2126 R + 0.7152 G + 0.0722 B로 휘도를 구합니다. 대비는 밝은 색을 L1로 두고 (L1 + 0.05) / (L2 + 0.05)로 계산하며 1:1부터 21:1까지 나옵니다.
본문 글자는 AA 기준 4.5:1, AAA 기준 7:1 이상이어야 합니다. 큰 글자(18pt 이상, 굵은 글씨는 14pt 이상)는 AA 3:1, AAA 4.5:1입니다. #FF5733는 흰 배경과 3.15:1, 검정 배경과 6.66:1입니다. 출처: W3C 웹 콘텐츠 접근성 지침(WCAG) 2.2(2024년 12월 12일 권고안).
이미지에서 색상 코드를 찾으려면
이미지 색상 코드 추출에서 사진이나 로고를 올리고 원하는 지점을 누르면 HEX 코드가 나옵니다. 그 코드를 여기에 붙여 넣으면 RGB·CMYK 등으로 바꿀 수 있습니다.
자주 쓰는 색상 코드표
| HEX | RGB | CMYK | 이름 | |
|---|---|---|---|---|
#FFFFFF | 255, 255, 255 | 0, 0, 0, 0 | 흰색 (white) | |
#000000 | 0, 0, 0 | 0, 0, 0, 100 | 검정 (black) | |
#FF0000 | 255, 0, 0 | 0, 100, 100, 0 | 빨강 (red) | |
#00FF00 | 0, 255, 0 | 100, 0, 100, 0 | 라임 (lime) | |
#0000FF | 0, 0, 255 | 100, 100, 0, 0 | 파랑 (blue) | |
#FFFF00 | 255, 255, 0 | 0, 0, 100, 0 | 노랑 (yellow) | |
#00FFFF | 0, 255, 255 | 100, 0, 0, 0 | 시안 (aqua) | |
#FF00FF | 255, 0, 255 | 0, 100, 0, 0 | 마젠타 (fuchsia) | |
#808080 | 128, 128, 128 | 0, 0, 0, 50 | 회색 (gray) | |
#FFA500 | 255, 165, 0 | 0, 35, 100, 0 | 주황 (orange) | |
#800080 | 128, 0, 128 | 0, 100, 0, 50 | 보라 (purple) | |
#008080 | 0, 128, 128 | 100, 0, 0, 50 | 청록 (teal) | |
#1E90FF | 30, 144, 255 | 88, 44, 0, 0 | 도저블루 (dodgerblue) | |
#2E8B57 | 46, 139, 87 | 67, 0, 37, 45 | 시그린 (seagreen) | |
#FF5733 | 255, 87, 51 | 0, 66, 80, 0 |
계산식은 W3C CSS Color Module Level 4, W3C 웹 콘텐츠 접근성 지침(WCAG) 2.2(2024년 12월 12일 권고안), Björn Ottosson, A perceptual color space for image processing(2020) 기준으로 2026년 10월에 확인했습니다.