색상 코드 변환기 - HEX RGB HSL CMYK 즉시 변환

Q: HEX 코드란 무엇인가요?

색상을 16진수로 표현한 방식입니다. #RRGGBB 형태로 00~FF 값을 가집니다.

Q: RGB와 CMYK의 차이는 무엇인가요?

RGB는 화면용 가산 혼합, CMYK는 인쇄용 감산 혼합 방식입니다.

Q: WCAG 대비 비율이란?

웹 접근성 지침에서 요구하는 텍스트와 배경의 명도 대비 비율입니다. AA 기준 4.5:1 이상이 필요합니다.

🎨 색상 코드 변환기 HEX · RGB · HSL · CMYK · 보색·유사색 팔레트 · WCAG 대비 비율

⚡ 즉시 변환 🎨 컬러 피커 📋 클립보드 복사 🌈 색상 조화 팔레트 ♿ WCAG 대비 검사

🎨 색상 코드 변환

HEX 코드 직접 입력

🎨 바이올렛

⚡ 빠른 색상 선택

HEX #7C3AED

RGB rgb(124, 58, 237)

HSL hsl(263, 84%, 58%)

CMYK cmyk(48%, 76%, 0%, 7%)

HSB / HSV hsb(263, 76%, 93%)

CSS 변수 –color: #7C3AED;

RGB (0~1) 0.49, 0.23, 0.93

Android / Swift 0xFF7C3AED

♿ WCAG 접근성 대비 비율 (흰색·검정 배경 기준)

5.2:1 AA ✓ AAA ✓ 흰 배경

4.0:1 AA ✓ AAA ✗ 검정 배경

🌟 밝기 단계 팔레트 (클릭하면 선택)

🎯 색상 조화 팔레트

📋 색상 코드 형식 완전 가이드 각 색상 코드 형식은 사용 목적이 달라요. 웹 개발, 디자인, 인쇄 용도에 맞게 선택하세요.

🔣 HEX

예)#7C3AED

•CSS, HTML, Figma, Sketch

•웹 디자인에서 가장 많이 사용

🎨 RGB

예)rgb(124,58,237)

•CSS, 포토샵, JavaScript

•투명도는 rgba() 사용

🌀 HSL

예)hsl(263,84%,58%)

•CSS, 색상 직관적 조정

•밝기·채도 수치로 쉽게 변경

🖨️ CMYK

예)cmyk(48,76,0,7)

•인쇄 디자인 전용

•Illustrator, InDesign

🎛️ HSB / HSV

예)hsb(263,76%,93%)

•Photoshop, Illustrator

•Adobe 계열 색상 선택기

📱 Android / Swift

예)0xFF7C3AED

•Android XML, Kotlin

•iOS Swift / SwiftUI

🌈 색상 조화 이론 가이드 위 색상 조화 팔레트에서 자동 생성되는 4가지 배색 이론을 참고하세요.

🔄 보색 (Complementary)

•색상환에서 정반대(180°) 색상

•강렬한 대비 효과 → CTA 버튼, 로고

•예: 파랑 ↔ 주황, 빨강 ↔ 초록

🎨 유사색 (Analogous)

•색상환에서 ±30° 인접 색상

•자연스럽고 조화로운 느낌

•배경·그라디언트·카드 디자인에 적합

🔺 삼각배색 (Triadic)

•색상환에서 120° 간격 3색

•생동감 있고 균형 잡힌 배색

•인포그래픽, 아이콘 시스템에 적합

♿ WCAG 대비 기준

•AA 기준: 4.5:1 이상 (일반 텍스트)

•AAA 기준: 7:1 이상 (강화 기준)

•큰 텍스트(18px+): AA 3:1, AAA 4.5:1

❓ 자주 묻는 질문

Q. HEX 코드란 무엇인가요? 색상을 16진수로 표현한 방식이에요. #RRGGBB 형태로 빨강(RR)·초록(GG)·파랑(BB) 각각 00~FF(0~255) 값을 가져요. 3자리 단축형(#RGB)도 지원되며 #FFF는 #FFFFFF와 동일해요. 웹과 디자인 도구에서 가장 많이 사용돼요.

Q. RGB와 CMYK의 차이는 무엇인가요? RGB는 빛의 3원색(Red·Green·Blue)으로 모니터·화면에서 쓰는 가산 혼합이에요. 모든 색을 합치면 흰색이 돼요. CMYK는 잉크 4색(Cyan·Magenta·Yellow·Key/Black)으로 인쇄에서 쓰는 감산 혼합이에요. 웹은 RGB, 인쇄물은 CMYK를 사용해요.

Q. WCAG 대비 비율이란 무엇인가요? 웹 접근성 지침(WCAG)에서 요구하는 텍스트와 배경의 명도 대비 비율이에요. AA 기준(4.5:1 이상)을 충족하면 시각 장애인도 텍스트를 읽을 수 있어요. 공공기관 웹사이트는 AA 이상 충족이 권장돼요.

Q. Figma에서 색상 코드를 복사하는 방법은? 요소 선택 → 우측 패널 Fill 섹션 → HEX 코드 클릭하여 복사해요. 이 코드를 위 변환기에 붙여넣으면 RGB·HSL·CMYK 등으로 즉시 변환돼요. Figma의 Inspect 탭에서도 다양한 형식으로 확인 가능해요.

Q. Android/Swift 색상 코드는 어떻게 사용하나요? Android XML에서는 android:textColor="#7C3AED", Kotlin에서는 Color.parseColor("#7C3AED")로 사용해요. Swift(UIKit)에서는 UIColor(hex: 0x7C3AED) 형식으로 사용해요.