색상 코드 변환기

HEX, RGB, HSL, HSV 색상 코드를 서로 변환하고 실시간으로 미리보기할 수 있습니다. 웹 디자인과 그래픽 작업에 필수적인 도구입니다.

색상을 선택하거나 코드를 입력하세요
HEX 코드
RGB
HSL
HSV

인기 색상 팔레트

아래 색상을 클릭하여 적용해보세요:

색상 조화 (Color Harmony)

선택한 색상을 기준으로 생성된 조화로운 색상들:

접근성 확인

색상 대비 확인

웹 접근성 가이드라인(WCAG)을 준수하여 텍스트의 가독성을 확인하세요.

밝은 배경의 텍스트
어두운 배경의 텍스트

색상 코드 활용 가이드

🎨 HEX 코드

  • 웹에서 가장 일반적으로 사용
  • #RRGGBB 형태 (16진수)
  • CSS, HTML에서 주로 사용
  • 축약형: #RGB (예: #f0f)

🔴 RGB

  • Red, Green, Blue 값 (0-255)
  • 모니터, 카메라에서 사용
  • RGBA로 투명도 추가 가능
  • 프로그래밍에서 직관적

🌈 HSL

  • Hue(색조), Saturation(채도), Lightness(밝기)
  • 색상 조정이 직관적
  • 디자인 작업에 유용
  • HSLA로 투명도 추가 가능

💎 HSV

  • Hue(색조), Saturation(채도), Value(명도)
  • 포토샵 등 디자인 툴에서 사용
  • 색상 선택기에서 일반적
  • 색상 이론에 기반

색상 심리학

색상별 의미와 활용

  • 빨강: 열정, 에너지, 긴급함 - 액션 버튼, 경고
  • 파랑: 신뢰, 안정, 전문성 - 기업 사이트, 의료
  • 초록: 자연, 성장, 성공 - 환경, 금융, 건강
  • 주황: 창의성, 활력, 친근함 - 창작, 음식
  • 보라: 고급, 창의, 신비 - 럭셔리, 미용
  • 노랑: 밝음, 주의, 낙관 - 경고, 어린이

디자인 도구 연동

생성된 색상 코드 복사 방법

각 입력 필드를 클릭하면 자동으로 클립보드에 복사됩니다.

주요 디자인 툴에서 활용

  • Figma: Fill → Solid → HEX 입력
  • Photoshop: Color Picker → HSV/RGB 입력
  • Illustrator: Color Panel → RGB/HSB 입력
  • CSS: color, background-color 속성에 적용
  • Sketch: Inspector Panel → Fill Color