🎨 Color Converter

HEX, RGB, HSL 색상 코드를 상호 변환합니다

HEX

RGB

rgb(59, 130, 246)

HSL

H (0-360)

S (0-100)

L (0-100)

hsl(217, 91%, 60%)

색상 코드 변환이란?

왜 필요한가요?

웹 개발과 디자인에서 색상은 HEX, RGB, HSL 등 다양한 형식으로 표현됩니다. 각 형식은 사용 목적과 장점이 다르며, 상황에 따라 적절한 형식으로 변환이 필요합니다.

예시: #FF5733 (HEX) =rgb(255, 87, 51) (RGB) =hsl(9, 100%, 60%) (HSL)

언제 사용하나요?

CSS 작성: 디자이너가 제공한 HEX 코드를 RGB/HSL로 변환
브랜드 가이드: 브랜드 색상을 다양한 형식으로 문서화
색상 조정: HSL로 변환하여 명도/채도를 쉽게 조절
투명도 적용: RGB에 alpha 채널 추가 (rgba)
디자인 시스템: 일관된 색상 팔레트를 다양한 플랫폼에 적용
접근성: 대비율 계산을 위해 RGB 값 추출

색상 형식 비교

형식	예시	장점	용도
HEX	#FF5733	간결함	HTML, CSS
RGB	rgb(255, 87, 51)	직관적	CSS, 그래픽
RGBA	rgba(255, 87, 51, 0.5)	투명도	CSS, 오버레이
HSL	hsl(9, 100%, 60%)	조정 쉬움	테마, 색상 변형

실무 사용 예시

예시 1: 투명도가 필요한 배경

.overlay {
  /* HEX: #000000 → RGBA로 변환하여 투명도 추가 */
  background-color: rgba(0, 0, 0, 0.5);
}

예시 2: 색상 변형 생성 (HSL 활용)

:root {
  --primary: hsl(210, 100%, 50%);       /* 기본 */
  --primary-dark: hsl(210, 100%, 40%);  /* 어둡게 */
  --primary-light: hsl(210, 100%, 70%); /* 밝게 */
}

HSL의 L(명도) 값만 조정하여 쉽게 변형 생성

예시 3: 디자인 시스템 문서화

브랜드 주 색상:
  HEX:  #4A90E2
  RGB:  rgb(74, 144, 226)
  HSL:  hsl(208, 73%, 59%)
  CMYK: C75 M36 Y0 K11

주의사항

브라우저 호환성: 오래된 브라우저는 HSL을 지원하지 않을 수 있습니다.
색 공간: RGB는 sRGB 색 공간 기준이며, 디스플레이마다 실제 색상이 다를 수 있습니다.
반올림 오차: 변환 과정에서 소수점 반올림으로 인해 완벽히 동일하지 않을 수 있습니다.
접근성: 색상만으로 정보를 전달하지 말고, 텍스트나 아이콘을 함께 사용하세요.
대비율: WCAG 기준(4.5:1 이상)을 준수하여 가독성을 보장하세요.

HSL의 장점

HSL은 색상(Hue), 채도(Saturation), 명도(Lightness)로 구성되어 직관적인 색상 조정이 가능합니다:

• Hue (0-360°): 색상환의 각도 (0=빨강, 120=초록, 240=파랑)
• Saturation (0-100%): 채도 (0%=회색, 100%=선명)
• Lightness (0-100%): 명도 (0%=검정, 50%=순색, 100%=흰색)

예: hsl(210, 50%, 50%)에서 L을 70%로 올리면 같은 색의 밝은 버전을 얻을 수 있습니다.

더 알아보기

🌐 HTML 포맷터

HTML/CSS 코드 정리

💻 코드 스니펫

CSS 색상 사용 예제