색상 코드 변환: HEX, RGB, HSL 설명

웹에서 색상은 여러 형식으로 표현할 수 있습니다. 각각을 살펴보겠습니다.

HEX 색상

HEX 색상은 16진수 값을 사용합니다:

• 형식: #RRGGBB 또는 #RGB
• 범위: 각 채널당 00-FF

예시:

• #FF0000 = 빨강
• #00FF00 = 초록
• #0000FF = 파랑
• #FFF = 흰색 (단축형)

RGB 색상

RGB는 빨강, 초록, 파랑 값을 사용합니다:

• 형식: rgb(r, g, b) 또는 rgba(r, g, b, a)
• 범위: 각 채널당 0-255
• 알파: 투명도를 위해 0-1

예시:

• rgb(255, 0, 0) = 빨강
• rgba(0, 0, 0, 0.5) = 50% 투명한 검정

HSL 색상

HSL은 색조, 채도, 명도를 사용합니다:

• 색조: 0-360 (색상환 각도)
• 채도: 0-100%
• 명도: 0-100%

예시:

• hsl(0, 100%, 50%) = 빨강
• hsl(120, 100%, 50%) = 초록
• hsl(240, 100%, 50%) = 파랑

색상환 (색조 값)

• 0° = 빨강
• 60° = 노랑
• 120° = 초록
• 180° = 시안
• 240° = 파랑
• 300° = 마젠타

변환 공식

HEX를 RGB로

const hex = "#FF5733";

const r = parseInt(hex.slice(1, 3), 16);
const g = parseInt(hex.slice(3, 5), 16);
const b = parseInt(hex.slice(5, 7), 16);

언제 사용할까

• HEX: CSS, 디자인 도구, 간결한 표기법
• RGB: 알파 투명도가 필요할 때
• HSL: 프로그래밍으로 색상 조정 시

Color Converter를 사용하여 형식 간 쉽게 전환하세요.