🎨 Color Converter

🎨 색상 표현 방식

디지털 환경에서 색상을 표현하는 방법은 여러 가지가 있습니다. 각 형식은 서로 다른 용도와 장점을 가지고 있으며, 웹 개발, 디자인, 인쇄 등 다양한 분야에서 사용됩니다. Color Converter는 이러한 다양한 색상 형식을 쉽게 변환하여 원하는 환경에 맞는 색상 코드를 빠르게 얻을 수 있도록 도와줍니다.

HEX:  #FF5733
RGB:  rgb(255, 87, 51)
HSL:  hsl(11, 100%, 60%)
CMYK: cmyk(0%, 66%, 80%, 0%)

💡 Color Converter 사용 사례

• 웹 개발: 디자인 목업의 RGB 색상을 CSS HEX 코드로 변환
• 디자인 작업: 웹용 HEX 색상을 인쇄용 CMYK로 변환
• 브랜드 가이드: 브랜드 색상을 모든 형식으로 문서화
• 색상 조정: HSL로 밝기나 채도 값을 정확히 조정
• 접근성 검토: RGB 값으로 색상 대비 계산
• 크로스 플랫폼: iOS, Android, Web 간 색상 코드 통일

🔧 사용 방법

1. 색상 입력: HEX, RGB, HSL, CMYK 중 하나의 형식으로 색상 입력
2. 컬러 피커 사용: 시각적으로 색상을 선택하여 자동 변환
3. 샘플 색상: 자주 사용하는 색상 샘플 클릭하여 빠르게 적용
4. 자동 변환: 입력 즉시 모든 형식으로 자동 변환
5. 복사: 원하는 형식의 색상 코드를 클릭하여 복사

🌈 주요 색상 형식

🔄 RGB와 CMYK의 차이

🎨 HSL 색상 조정 팁

💻 프로그래밍 언어별 사용 예시

/* HEX */
color: #FF5733;
background: #00AA99;

/* RGB */
color: rgb(255, 87, 51);
background: rgba(0, 170, 153, 0.8);

/* HSL */
color: hsl(11, 100%, 60%);
background: hsla(174, 100%, 33%, 0.8);

// HEX to RGB 변환
function hexToRgb(hex) {
  const r = parseInt(hex.slice(1, 3), 16);
  const g = parseInt(hex.slice(3, 5), 16);
  const b = parseInt(hex.slice(5, 7), 16);
  return `rgb(${r}, ${g}, ${b})`;
}

// RGB to HEX 변환
function rgbToHex(r, g, b) {
  return "#" + [r, g, b].map(x => {
    const hex = x.toString(16);
    return hex.length === 1 ? "0" + hex : hex;
  }).join('');
}

# RGB to HEX
def rgb_to_hex(r, g, b):
    return '#{:02x}{:02x}{:02x}'.format(r, g, b)

# HEX to RGB
def hex_to_rgb(hex_code):
    hex_code = hex_code.lstrip('#')
    return tuple(int(hex_code[i:i+2], 16) for i in (0, 2, 4))

❓ 자주 묻는 질문 (FAQ)