색상 변환기 (HEX/RGB/HSL)

HEX, RGB, HSL 형식 간에 색상을 변환합니다. 비주얼 색상 선택기와 미리보기를 포함합니다.

사용 방법

  1. 임의의 형식(HEX, RGB, 또는 HSL)으로 색상 값을 입력합니다
  2. 다른 모든 형식으로 변환된 값이 즉시 표시됩니다
  3. 색상 선택기를 사용하여 시각적으로 색상을 선택합니다
  4. 「복사」 버튼으로 임의의 형식을 복사합니다

자주 묻는 질문

  • HEX, RGB, HSL의 차이는 무엇인가요?

    HEX는 16진수 표기법을 사용합니다(#FF5733). RGB는 빨강, 초록, 파랑 값(0~255)으로 색상을 정의합니다. HSL은 색조(0~360), 채도(0~100%), 명도(0~100%)로 색상을 정의합니다.

  • CSS에서 어떤 색상 형식을 사용해야 하나요?

    세 가지 형식 모두 CSS에서 유효합니다. HEX가 가장 간결하고, RGB는 색상 혼합에 직관적이며, HSL은 명도나 채도를 조정하여 색상 변형을 만들기에 가장 적합합니다.

  • 알파/투명도를 지원하나요?

    현재 버전은 불투명한 색상을 변환합니다. 알파 채널(RGBA, HSLA, 8자리 HEX) 지원은 향후 업데이트에서 계획되어 있습니다.

  • 모바일에서 색상 선택기를 사용할 수 있나요?

    네, 색상 입력은 모바일 브라우저를 포함한 모든 기기에서 네이티브 색상 선택기를 사용합니다.

색상 표현 형식의 이해

웹과 디자인 분야에서 색상을 표현하는 방법은 여러 가지가 있으며, 각각의 형식은 고유한 특성과 강점을 가지고 있습니다.

HEX (16진수)

HEX 형식은 #RRGGBB 구조로, 빨강(R), 초록(G), 파랑(B) 각 채널을 00부터 FF(0–255)까지의 16진수로 표현합니다. 예를 들어 #FF5733에서 FF는 빨강 최대값, 57은 초록 중간값, 33은 파랑 어두운값입니다.

세 채널이 각각 같은 값일 때는 단축 표기가 가능합니다. #AABBCC는 #ABC로, #FFFFFF는 #FFF로 줄여 쓸 수 있습니다. CSS에서 가장 흔하게 사용되는 형식으로 간결하다는 장점이 있지만, 수치를 보고 색상을 직관적으로 파악하기 어렵습니다.

RGB (빨강-초록-파랑)

RGB는 각 채널을 0–255 범위의 10진수로 표현합니다. rgb(255, 87, 51) 형태로 사용하며, 숫자를 직접 조작하거나 색상 채널을 계산할 때 편리합니다. JavaScript로 색상을 동적으로 계산할 때 유용합니다. 알파 채널이 추가된 rgba(255, 87, 51, 0.5) 형태로 반투명 색상도 표현할 수 있습니다.

HSL (색조-채도-명도)

HSL은 색상을 사람이 인지하는 방식에 더 가까운 형식입니다.

  • H (Hue, 색조): 0–360도의 색상환 각도. 0°는 빨강, 120°는 초록, 240°는 파랑
  • S (Saturation, 채도): 0%는 회색, 100%는 완전한 색상
  • L (Lightness, 명도): 0%는 검정, 50%는 순수 색상, 100%는 흰색

HSL의 가장 큰 장점은 색상 변형을 만들기 쉽다는 것입니다. 같은 색상의 밝은 버전과 어두운 버전을 만들려면 L 값만 조정하면 됩니다. CSS 테마 시스템이나 다크 모드 구현에 특히 유용합니다.

CSS에서의 활용 전략

/* 브랜드 색상을 CSS 변수로 정의 */
:root {
  --brand-hue: 220;
  --brand-color: hsl(var(--brand-hue), 70%, 50%);
  --brand-light: hsl(var(--brand-hue), 70%, 70%);
  --brand-dark: hsl(var(--brand-hue), 70%, 30%);
}

이처럼 HSL을 CSS 변수와 조합하면 색조(hue)만 바꿔 전체 테마를 쉽게 교체할 수 있습니다.

디자인 시스템에서의 색상 관리

현대 디자인 시스템에서는 색상 팔레트를 체계적으로 관리합니다. 일반적으로 기준 색상을 정하고 명도를 조정하여 100번대에서 900번대까지의 단계별 색상 스케일을 만듭니다. Tailwind CSS의 색상 체계가 대표적인 예시입니다. 개발자와 디자이너가 동일한 색상 값을 공유하려면 HEX, RGB, HSL 간의 자유로운 변환이 필수적입니다.

관련 도구

UTCTimestamp ConverterB64Base64 Converter