Oh MyUtils

색상 변환기 - HEX, RGB, HSL, HSV 변환 온라인

HEX, RGB, HSL, HSV 형식 간 색상 변환. 컬러 피커로 시각적 선택, CSS 색상 코드 복사 — 무료 색상 코드 변환기.

자주 묻는 질문

색상 변환기란 무엇인가요?

색상 변환기는 HEX, RGB, HSL, HSV, CMYK 등 다양한 형식 간에 색상 값을 변환하는 도구입니다. 각 형식은 색상을 다르게 표현합니다: HEX는 16진수 표기법(#FF5733), RGB는 빨강-초록-파랑 값(rgb(255, 87, 51)), HSL은 색상-채도-명도(hsl(14, 100%, 60%)), CMYK는 인쇄용입니다. 이 도구는 웹 개발, 디자인, 접근성 작업을 위한 원활한 변환을 지원합니다.

HEX, RGB, HSL의 차이점은 무엇인가요?

HEX는 CSS와 디자인 도구에서 일반적으로 사용되는 6자리 16진수 형식(#RRGGBB)입니다. RGB(빨강, 초록, 파랑)는 각 채널에 0-255의 10진수 값을 사용하여 프로그래밍 조작에 직관적입니다. HSL(색상, 채도, 명도)은 더 인간 친화적입니다: 색상은 색(0-360도), 채도는 강도(0-100%), 명도는 밝기(0-100%)입니다. 간결한 표기에는 HEX를, 계산에는 RGB를, 시각적으로 색상 속성을 조정할 때는 HSL을 사용하세요.

HSV와 HSL의 차이점은 무엇인가요?

HSV(색상, 채도, 명도)와 HSL(색상, 채도, 밝기) 모두 동일한 색상 요소(0-360도)를 사용하지만, 밝기를 표현하는 방식이 다릅니다. HSV에서 최대 Value(V=100%)는 순수한 색상을 제공하고, HSL에서 최대 Lightness(L=100%)는 항상 흰색이 됩니다. HSV는 페인트 혼합에 더 직관적으로 매핑되어 그래픽 디자이너와 색상 선택기에서 선호됩니다. HSL은 명도 조정이 예측 가능한 틴트와 쉐이드를 생성하므로 CSS에 더 적합합니다.

WCAG 대비율이란 무엇이며 왜 중요한가요?

WCAG(웹 콘텐츠 접근성 지침) 대비율은 전경색과 배경색 간의 휘도 차이를 측정합니다. 비율은 1:1(대비 없음)에서 21:1(흰색 위의 검정)까지입니다. 접근성 준수를 위해 일반 텍스트는 4.5:1(AA) 또는 7:1(AAA)이 필요하고, 큰 텍스트(18px+ 굵게 또는 24px+)는 3:1(AA) 또는 4.5:1(AAA)이 필요합니다. 적절한 대비는 시각 장애가 있는 사용자와 다양한 조명 조건에서 콘텐츠를 읽을 수 있도록 보장합니다.

색상 조화란 무엇이며 어떻게 사용하나요?

색상 조화는 색상환에서의 위치를 기반으로 미적으로 조화로운 색상 조합입니다. 보색은 서로 반대편에 있어(예: 파랑과 주황) 높은 대비를 만듭니다. 유사색은 인접해 있어(예: 파랑, 청록, 초록) 조화로운 디자인을 만듭니다. 삼원색은 삼각형을 형성해(예: 빨강, 노랑, 파랑) 균형 잡힌 다양성을 제공합니다. 강조에는 보색을, 일관된 디자인에는 유사색을, 생동감 있는 인터페이스에는 삼원색을 사용하세요.

이 색상 변환기는 안전하고 개인정보가 보호되나요?

네. 이 도구는 클라이언트 측 JavaScript를 사용하여 100% 브라우저에서 실행됩니다. 색상 데이터, 팔레트 또는 디자인 정보가 서버로 전송되지 않습니다. 모든 변환, 대비 계산 및 팔레트 생성은 사용자의 기기에서 로컬로 이루어집니다. 따라서 기밀 브랜드 색상, 클라이언트 프로젝트 또는 민감한 디자인 작업에도 안전하게 사용할 수 있습니다.

코드 예제

// HEX to RGB
const hexToRgb = (hex) => {
  const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
  return result ? {
    r: parseInt(result[1], 16),
    g: parseInt(result[2], 16),
    b: parseInt(result[3], 16)
  } : null;
};

// RGB to HSL
const rgbToHsl = (r, g, b) => {
  r /= 255; g /= 255; b /= 255;
  const max = Math.max(r, g, b), min = Math.min(r, g, b);
  let h, s, l = (max + min) / 2;
  if (max === min) { h = s = 0; }
  else {
    const d = max - min;
    s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
    switch (max) {
      case r: h = ((g - b) / d + (g < b ? 6 : 0)) / 6; break;
      case g: h = ((b - r) / d + 2) / 6; break;
      case b: h = ((r - g) / d + 4) / 6; break;
    }
  }
  return { h: Math.round(h * 360), s: Math.round(s * 100), l: Math.round(l * 100) };
};

console.log(hexToRgb('#FF5733')); // { r: 255, g: 87, b: 51 }
console.log(rgbToHsl(255, 87, 51)); // { h: 11, s: 100, l: 60 }

관련 도구