색상 코드 변환기
HEX · RGB · HSL · CMYK 색상 코드 즉시 변환
⚡ 즉시 변환
🎨 컬러 피커
📋 클립보드 복사
🌟 팔레트 생성
색상 코드 변환
HEX 코드 직접 입력
#
HEX 6자리 입력 또는 왼쪽 색상판 클릭
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;
🌟 관련 색상 팔레트 (밝기 단계)
📋 색상 코드 형식 안내
| 형식 | 예시 | 사용처 |
|---|---|---|
| HEX | #7C3AED | CSS, HTML, 디자인 툴 (Figma, Photoshop) |
| RGB | rgb(124, 58, 237) | CSS, 웹 개발, 포토샵 |
| HSL | hsl(263, 84%, 58%) | CSS, 색상 조정이 직관적 |
| CMYK | cmyk(48%, 76%, 0%, 7%) | 인쇄 디자인 (Adobe Illustrator) |
| HSB/HSV | hsb(263, 76%, 93%) | Adobe 계열 앱 색상 선택기 |
❓ 자주 묻는 질문
Q. HEX 코드란 무엇인가요?
HEX 코드는 색상을 16진수로 표현한 방식입니다. #RRGGBB 형태로 빨강(RR), 초록(GG), 파랑(BB) 각각 00~FF(0~255) 값을 가집니다. 웹과 디자인에서 가장 많이 사용됩니다.
Q. RGB와 CMYK의 차이는 무엇인가요?
RGB는 빛의 3원색(Red, Green, Blue)으로 모니터·화면에서 사용하는 가산 혼합 방식입니다. CMYK는 잉크의 4색(Cyan, Magenta, Yellow, Key/Black)으로 인쇄에서 사용하는 감산 혼합 방식입니다. 웹은 RGB, 인쇄물은 CMYK를 사용하세요.
Q. HSL과 HSB/HSV의 차이는 무엇인가요?
HSL은 Hue(색조), Saturation(채도), Lightness(밝기)이고, HSB/HSV는 Hue, Saturation, Brightness/Value입니다. CSS에서는 HSL을, Adobe 포토샵/일러스트레이터에서는 HSB를 주로 사용합니다.
Q. Figma에서 색상 코드를 어떻게 복사하나요?
Figma에서 색상 선택 후 우측 패널에 HEX 코드가 표시됩니다. 이 코드를 위 변환기에 입력하면 RGB, HSL, CMYK 등 다른 형식으로 즉시 변환할 수 있습니다.