본문으로 건너뛰기

색상 변환기

HEX, RGB, HSL 색상 형식 간 변환을 지원하는 무료 온라인 도구입니다.

#3498DB

🎨 색상 선택

HEX

웹에서 가장 많이 사용

RGB

HSL

🎨 미리 설정된 색상

HEX, RGB, HSL 색상 형식 간 변환을 지원합니다. 색상 피커로 직접 색상을 선택하거나, 값을 직접 입력할 수 있습니다.

색상 형식이란?​

디지털 환경에서 색상을 표현하는 다양한 방법이 있습니다. 각 형식은 특정 용도와 장점이 있으며, 상황에 따라 적절한 형식을 선택해야 합니다.

주요 기능​

  • 3가지 형식 지원: HEX, RGB, HSL
  • 실시간 변환: 한 형식을 변경하면 모든 형식이 자동 업데이트
  • 색상 피커: 시각적으로 색상 선택
  • 큰 미리보기: 선택한 색상을 크게 확인
  • 즉시 복사: 각 형식을 클릭 한 번으로 복사
  • 프리셋 색상: 10가지 인기 있는 색상 제공

색상 형식 설명​

HEX (Hexadecimal) - 16진수​

웹에서 가장 많이 사용되는 형식입니다.

형식:

#RRGGBB

예제:

#3498db  /* 파란색 */
#e74c3c  /* 빨간색 */
#2ecc71  /* 초록색 */

구조:

  • #: 접두사
  • RR: 빨강 (00-FF)
  • GG: 초록 (00-FF)
  • BB: 파랑 (00-FF)

3자리 단축 형식:

#f00  /* #ff0000과 동일 */
#abc  /* #aabbcc와 동일 */

장점:

  • 간결함
  • CSS에서 기본 형식
  • 복사하기 쉬움

단점:

  • 사람이 이해하기 어려움
  • 색상 조정이 직관적이지 않음

RGB (Red, Green, Blue)​

빛의 삼원색을 사용한 형식입니다.

형식:

rgb(R, G, B)

예제:

rgb(52, 152, 219)   /* 파란색 */
rgb(231, 76, 60)    /* 빨간색 */
rgb(46, 204, 113)   /* 초록색 */

값 범위:

  • 각 채널: 0-255
  • 0 = 어두움, 255 = 밝음

RGBA (투명도 포함):

rgba(52, 152, 219, 0.5)  /* 50% 투명도 */

장점:

  • 이해하기 쉬움
  • 각 색상 채널 독립적 조정 가능
  • 프로그래밍에서 직관적

단점:

  • HEX보다 길음
  • 밝기 조정이 직관적이지 않음

HSL (Hue, Saturation, Lightness)​

색조, 채도, 명도를 사용한 형식입니다.

형식:

hsl(H, S%, L%)

예제:

hsl(204, 70%, 53%)   /* 파란색 */
hsl(6, 78%, 57%)     /* 빨간색 */
hsl(145, 63%, 49%)   /* 초록색 */

값 범위:

  • H (Hue): 0-360° (색조 휠)
    • 0° = 빨강
    • 120° = 초록
    • 240° = 파랑
  • S (Saturation): 0-100% (채도)
    • 0% = 회색
    • 100% = 순수한 색
  • L (Lightness): 0-100% (명도)
    • 0% = 검정
    • 50% = 순수한 색
    • 100% = 하양

HSLA (투명도 포함):

hsla(204, 70%, 53%, 0.5)  /* 50% 투명도 */

장점:

  • 색상 조정이 매우 직관적
  • 밝기/채도 조절 쉬움
  • 색상 팔레트 생성에 유용

단점:

  • HEX/RGB보다 덜 직관적
  • 일부 구형 브라우저 미지원

색상 형식 비교​

특징HEXRGBHSL
간결성⭐⭐⭐⭐⭐⭐⭐
가독성⭐⭐⭐⭐⭐⭐
CSS 지원⭐⭐⭐⭐⭐⭐⭐⭐⭐
조정 용이성⭐⭐⭐⭐⭐⭐
투명도✗✓✓

사용 사례​

1. CSS 스타일링​

/* HEX */
.button {
  background-color: #3498db;
}

/* RGB */
.button {
  background-color: rgb(52, 152, 219);
}

/* HSL */
.button {
  background-color: hsl(204, 70%, 53%);
}

2. 색상 팔레트 생성​

/* HSL로 유사 색상 쉽게 생성 */
.primary   { color: hsl(204, 70%, 53%); }
.lighter   { color: hsl(204, 70%, 70%); }  /* L 증가 */
.darker    { color: hsl(204, 70%, 35%); }  /* L 감소 */
.desaturate{ color: hsl(204, 40%, 53%); }  /* S 감소 */

3. JavaScript 동적 색상​

// RGB로 그라데이션 생성
for (let i = 0; i < 255; i++) {
  const color = `rgb(${i}, 100, 200)`;
  // 사용
}

// HSL로 무지개 색상
for (let h = 0; h < 360; h += 30) {
  const color = `hsl(${h}, 100%, 50%)`;
  // 사용
}

4. 디자인 시스템​

/* 변수로 색상 관리 */
:root {
  --primary-h: 204;
  --primary-s: 70%;
  --primary-l: 53%;

  --primary: hsl(var(--primary-h), var(--primary-s), var(--primary-l));
  --primary-light: hsl(var(--primary-h), var(--primary-s), 70%);
  --primary-dark: hsl(var(--primary-h), var(--primary-s), 35%);
}

5. 접근성 개선​

// 밝기 기준으로 텍스트 색상 결정
function getTextColor(bgColor) {
  const [h, s, l] = parseHSL(bgColor);
  return l > 50 ? '#000000' : '#ffffff';
}

변환 공식​

HEX → RGB​

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

RGB → HEX​

function rgbToHex(r, g, b) {
  return "#" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1);
}

RGB → HSL​

function rgbToHsl(r, g, b) {
  r /= 255;
  g /= 255;
  b /= 255;

  const max = Math.max(r, g, b);
  const 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)
  };
}

프리셋 색상​

이 도구는 인기 있는 10가지 색상을 제공합니다:

색상HEX이름
🔴#e74c3c빨강
🔵#3498db파랑
🟢#2ecc71초록
🟠#f39c12주황
🟣#9b59b6보라
🔷#1abc9c청록
⚫#34495e어두운 회색
🟤#e67e22갈색
⚪#95a5a6밝은 회색
🟧#d35400진한 주황

실용적인 팁​

1. 색상 밝게/어둡게 만들기​

/* 원본 */
.button { background: hsl(204, 70%, 53%); }

/* 10% 밝게 */
.button-light { background: hsl(204, 70%, 63%); }

/* 10% 어둡게 */
.button-dark { background: hsl(204, 70%, 43%); }

2. 투명도 추가​

/* HEX에 투명도 추가 (8자리) */
#3498db80  /* 50% 투명도 */

/* RGB/HSL */
rgba(52, 152, 219, 0.5)
hsla(204, 70%, 53%, 0.5)

3. 보색 찾기​

// HSL에서 H + 180도
function getComplementary(h, s, l) {
  return `hsl(${(h + 180) % 360}, ${s}%, ${l}%)`;
}

4. 그레이스케일 변환​

/* 채도를 0으로 */
.grayscale {
  filter: grayscale(100%);
  /* 또는 */
  background: hsl(204, 0%, 53%);
}

5. 색상 접근성 체크​

// WCAG 대비율 계산
function getContrastRatio(color1, color2) {
  const l1 = getLuminance(color1);
  const l2 = getLuminance(color2);
  const lighter = Math.max(l1, l2);
  const darker = Math.min(l1, l2);
  return (lighter + 0.05) / (darker + 0.05);
}

// 4.5:1 이상 권장 (일반 텍스트)
// 3:1 이상 권장 (큰 텍스트)

색상 이론​

색상 조화​

1. 보색 (Complementary)​

H + 180°
예: 파랑(204°) + 주황(24°)

2. 유사색 (Analogous)​

H ± 30°
예: 파랑(204°), 청록(174°), 남색(234°)

3. 삼색 (Triadic)​

H, H+120°, H+240°
예: 빨강(0°), 노랑(120°), 파랑(240°)

4. 사각 (Tetradic)​

H, H+90°, H+180°, H+270°

색상 심리학​

색상의미
🔴 빨강열정, 에너지, 위험
🔵 파랑신뢰, 평화, 차가움
🟢 초록자연, 성장, 안정
🟡 노랑행복, 낙관, 주의
🟣 보라고급, 창의성, 신비
🟠 주황친근, 활력, 따뜻함

자주 묻는 질문​

Q: 어떤 형식을 사용해야 하나요?​

  • HEX: CSS에서 간결하게 사용, 복사하기 쉬움
  • RGB: 프로그래밍, 각 채널 조정 필요 시
  • HSL: 색상 팔레트 생성, 밝기/채도 조정 시

일반적으로 HEX 사용 권장!

Q: HEX의 3자리와 6자리 차이는?​

3자리는 6자리의 단축 형식입니다:

  • #f00 = #ff0000
  • #abc = #aabbcc

정확한 색상이 필요하면 6자리 사용!

Q: RGB의 최대값이 왜 255인가요?​

8비트 = 2^8 = 256가지 값 (0-255) 총 색상 수 = 256 × 256 × 256 = 16,777,216색

Q: HSL의 H가 왜 360도인가요?​

색상 휠이 원(circle)이기 때문입니다. 360도 = 한 바퀴

Q: 투명도는 어떻게 표현하나요?​

  • HEX: 8자리 (#RRGGBBAA)
  • RGB: RGBA 사용
  • HSL: HSLA 사용

Q: 색맹 사용자를 위한 팁은?​

  • 색상만으로 정보 전달 금지
  • 텍스트 레이블 추가
  • 충분한 대비율 유지 (4.5:1 이상)
  • 색맹 시뮬레이터로 테스트

관련 도구​

성능​

  • 변환 속도: 밀리초 미만
  • 실시간 업데이트: 즉시
  • 메모리 사용: 최소
  • 오프라인 작동: 완전 지원

브라우저 호환성​

형식ChromeFirefoxSafariEdge
HEX✓✓✓✓
RGB✓✓✓✓
RGBA✓✓✓✓
HSL✓✓✓✓
HSLA✓✓✓✓

개인정보 보호​

이 도구는 완전히 클라이언트 측에서 작동합니다. 선택한 색상 정보는 서버로 전송되지 않으며, 브라우저에서만 처리됩니다.