🎨 색상코드 변환기 – HEX ↔ RGB ↔ HSL 즉시 변환표

색상코드 변환기를 사용하면 HEX(16진수) 색상코드를 RGB·HSL·CMYK로, 또는 RGB 값을 HEX·HSL로 즉시 변환할 수 있습니다. 웹 디자인, 앱 UI, 그래픽 작업 시 필요한 색상 형식을 한 번에 확인하고 복사하세요. 피커로 색상을 직접 선택하거나, 아래 웹 표준 색상표(Web Color Chart)에서 원하는 색상을 클릭하면 모든 코드가 자동으로 변환됩니다.

🗂️ 웹 표준 색상표 (Web Color Chart) – 클릭하면 즉시 변환

아래 색상표는 CSS·HTML에서 자주 사용하는 웹 표준 색상(Named Colors)을 정리한 것입니다. 색상을 클릭하면 위 변환기에 자동으로 입력되어 HEX·RGB·HSL 코드를 즉시 확인할 수 있습니다.

📖 색상코드란? HEX·RGB·HSL·CMYK 완벽 정리

디지털 디자인에서 색상을 표현하는 방식은 크게 네 가지입니다. 각 방식마다 사용하는 환경과 목적이 다르므로, 상황에 맞게 변환하여 사용하는 것이 중요합니다.

🔄 색상코드 변환 공식

색상코드 변환은 수학적 공식을 기반으로 합니다. 주요 변환 공식을 정리합니다.

• HEX → RGB: HEX 코드를 두 자리씩 나누어 각각 16진수→10진수로 변환. 예) #FF5733 → R=255, G=87, B=51
• RGB → HEX: R·G·B 각 값을 16진수로 변환 후 2자리 zero-padding으로 이어붙임. 예) R=255→FF, G=87→57, B=51→33 → #FF5733
• RGB → HSL: R·G·B를 0~1 정규화 후 최댓값·최솟값·델타로 H(색조)·S(채도)·L(명도) 계산
• RGB → CMYK: R’=R/255, G’=G/255, B’=B/255로 정규화. K=1-max(R’,G’,B’). C=(1-R’-K)/(1-K), M·Y도 동일 방식 계산

💡 색상코드 사용 팁 – 디자이너·개발자를 위한 실전 가이드

색상 작업 시 알아두면 유용한 실전 팁을 정리했습니다.

• 단축 HEX 활용: #FF0000은 #F00으로, #FFFFFF은 #FFF로 단축 가능. CSS에서 3자리로도 동일하게 동작합니다.
• 투명도(알파) 추가: HEX에 2자리 추가 → #FF573380 (50% 투명). CSS rgba() 또는 #RRGGBBAA 형식 사용.
• 색상 대비 확인: WCAG 웹 접근성 기준은 일반 텍스트 대비비 4.5:1 이상, 큰 텍스트 3:1 이상을 권장합니다.
• 인쇄물 제작 시: 모니터에서 본 RGB 색상과 인쇄된 CMYK 결과물은 다를 수 있습니다. 반드시 CMYK로 변환 후 교정쇄를 확인하세요.
• CSS 변수 활용: :root { --primary: #2C4A6E; }처럼 CSS 변수로 관리하면 색상 일관성 유지에 좋습니다.
• HSL로 색상 변형: 동일한 H(색조)에서 L(명도)만 변경하면 같은 계열의 밝은 색·어두운 색을 쉽게 만들 수 있습니다.

🌈 색상 계열별 HEX 코드 모음

디자인 작업에서 자주 쓰이는 색상 계열별 대표 HEX 코드를 정리했습니다. 각 코드를 클릭하면 변환기에 바로 적용됩니다.

• 빨강 계열: #FF0000 (순수 빨강), #DC143C (크림슨), #FF4500 (오렌지레드), #B22222 (파이어브릭), #FF6B6B (살몬레드)
• 파랑 계열: #0000FF (순수 파랑), #1E90FF (도저블루), #4169E1 (로얄블루), #00BFFF (딥스카이블루), #87CEEB (스카이블루)
• 초록 계열: #008000 (초록), #32CD32 (라임그린), #228B22 (포레스트그린), #00FA9A (미디엄스프링그린), #90EE90 (라이트그린)
• 노랑·주황 계열: #FFD700 (골드), #FFA500 (오렌지), #FF8C00 (다크오렌지), #FFFF00 (옐로), #F0E68C (카키)
• 보라·분홍 계열: #800080 (퍼플), #EE82EE (바이올렛), #FF1493 (딥핑크), #FF69B4 (핫핑크), #DA70D6 (오키드)
• 무채색 계열: #000000 (블랙), #FFFFFF (화이트), #808080 (그레이), #C0C0C0 (실버), #F5F5F5 (화이트스모크)

❓ 자주 묻는 질문 (FAQ)