개발자를 위한 색상 변환기: HEX, RGB, HSL 완벽 해설

반드시 알아야 할 세 가지 색상 시스템

개발자로서 CSS와 디자인 도구에서 세 가지 주요 색상 포맷을 만나게 됩니다. 각각 상황에 따라 최선의 선택이 되는 강점이 있습니다.

HEX (#RRGGBB)

HEX 색상은 빨강, 초록, 파랑 채널을 00에서 FF까지의 16진수 값으로 표현합니다. 예를 들어, #FF6B35는 최대 빨강(FF), 중간 초록(6B), 낮은 파랑(35)을 의미하며 따뜻한 주황색을 만듭니다.

HEX를 사용할 때:

• 디자인 파일(Figma, Sketch, Adobe XD)에서 색상 복사할 때
• CSS 변수에 브랜드 색상 설정할 때
• 간결한 색상 표현이 필요할 때
• 디자인 핸드오프에서 가장 흔한 포맷

HEX 축약형: 각 채널의 두 자리가 같으면 코드를 줄일 수 있습니다. #FF6633은 #F63이 됩니다. 각 쌍의 두 숫자가 동일할 때만 가능합니다.

RGB / RGBA

RGB는 각 채널에 0에서 255까지의 10진수 값을 사용합니다. RGBA는 0에서 1까지의 알파(투명도) 채널을 추가합니다.

color: rgb(255, 107, 53);
background-color: rgba(255, 107, 53, 0.8);

RGB/RGBA를 사용할 때:

• 투명도가 필요할 때 (RGBA의 A)
• 프로그래밍으로 색상 계산할 때 (보간, 블렌딩)
• JavaScript 캔버스나 이미지 조작 작업할 때
• 디자인 토큰에서 R, G, B 값이 별도로 올 때

HSL / HSLA

HSL은 색상(Hue), 채도(Saturation), 밝기(Lightness)의 약자입니다. 가장 인간 친화적인 색상 모델입니다:

• 색상(Hue): 색상환에서의 위치 (0-360도). 0 = 빨강, 120 = 초록, 240 = 파랑.
• 채도(Saturation): 색이 얼마나 선명한지 (0% = 회색, 100% = 풀 컬러).
• 밝기(Lightness): 얼마나 밝거나 어두운지 (0% = 검정, 50% = 보통, 100% = 흰색).

color: hsl(18, 100%, 60%);
background-color: hsla(18, 100%, 60%, 0.8);

HSL을 사용할 때:

• 색상 팔레트와 변형 만들 때
• 색상 조정할 때 (더 어둡게, 밝게, 또는 채도 낮추기)
• 일관된 색상 계열로 테마 시스템 구축할 때
• 다크모드 색상 적용

HSL로 색상 팔레트 만들기

HSL은 색상 조작을 직관적으로 만들어줍니다. 기본 색상에서 시작해 한 번에 하나의 값만 조정하여 전체 팔레트를 만들 수 있습니다:

같은 색상, 다른 명도:

--color-primary-100: hsl(220, 90%, 95%);  /* 매우 밝음 */
--color-primary-300: hsl(220, 90%, 75%);  /* 밝음 */
--color-primary-500: hsl(220, 90%, 50%);  /* 기본 */
--color-primary-700: hsl(220, 90%, 30%);  /* 어두움 */
--color-primary-900: hsl(220, 90%, 15%);  /* 매우 어두움 */

밝기 값만 변경됩니다. 색상과 채도는 일관되게 유지되어 조화로운 팔레트가 보장됩니다.

접근성: WCAG 색 대비 기준

색상은 미적 요소만이 아닙니다. 낮은 대비는 시각 장애 사용자에게 텍스트를 읽을 수 없게 만들고, 밝은 햇빛이나 저품질 화면에서도 가독성에 영향을 줍니다.

WCAG 2.1 대비 요구 사항

| 레벨 | 일반 텍스트 | 큰 텍스트 | |------|-----------|----------| | AA (최소) | 4.5:1 | 3:1 | | AAA (향상) | 7:1 | 4.5:1 |

큰 텍스트는 18pt (24px) 일반 또는 14pt (18.66px) 볼드로 정의됩니다.

실용적인 대비 팁

1. 색상에만 의존하지 마세요. 아이콘, 패턴, 라벨을 색상과 함께 사용하여 의미를 전달하세요 (색맹 사용자에게 중요).
2. 실제 콘텐츠로 테스트하세요. 대비율이 기술적으로는 통과하지만 긴 단락에서는 읽기 어렵게 느껴질 수 있습니다.
3. 흰색 배경 위 연한 회색이 가장 흔한 위반입니다. 플레이스홀더 텍스트, 비활성 상태, 보조 텍스트가 종종 대비 요구 사항을 충족하지 못합니다.
4. 두 테마 모두 확인하세요. 라이트모드에서 통과하는 색상이 다크모드에서는 실패할 수 있으며, 그 반대도 마찬가지입니다.

디자이너-개발자 색상 핸드오프

색상에 대한 소통 오류는 디자이너와 개발자 사이의 흔한 마찰 원인입니다. 실용적인 해결책을 살펴보겠습니다:

디자인 토큰 사용

원시 색상 값을 전달하는 대신 공유 토큰 시스템을 구축하세요:

/* 이렇게 하지 마세요 */
color: #2563EB;

/* 이렇게 하세요 */
color: var(--color-primary);

토큰은 단일 진실 공급원을 만듭니다. 디자이너가 브랜드 색상을 변경할 때 하나의 변수만 업데이트하면 됩니다.

모든 상태 명시

모든 UI 요소에 대해 다음 색상을 명확히 하세요:

• 기본 상태
• 호버 상태
• 활성/누른 상태
• 비활성 상태
• 포커스 아웃라인
• 다크모드 변형

포맷 합의

일찍 포맷에 합의하세요. 디자인 시스템이 내부적으로 HSL을 사용한다면 개발자도 HSL로 값을 저장해야 합니다. 색상 변환기는 포맷이 다를 때 간극을 메워줍니다.

다크모드 색상 전략

다크모드는 단순히 색상을 뒤집는 것이 아닙니다. 핵심 원칙들을 살펴보겠습니다:

1. 채도를 줄이세요. 고채도 색상은 어두운 배경에서 부담스럽게 느껴집니다. 다크모드에서는 채도를 10-20% 낮추세요.
2. 순수 검정이 아닌 상승된 표면을 사용하세요. 순수 검정(#000000)은 과도한 대비를 만듭니다. 배경에는 #1a1a2e나 #121212 같은 어두운 회색을 사용하세요.
3. 밝기 스케일을 뒤집으세요. HSL에서 가장 밝은 음영이 가장 어둡게, 그 반대로 됩니다.
4. 실제 눈으로 테스트하세요. 라이트모드에서 괜찮아 보이는 색상 조합이 다크모드에서는 눈을 피로하게 할 수 있습니다.

즉시 색상 변환하기

색상 변환기를 사용하여 HEX, RGB, HSL 등을 상호 변환하세요. 다음도 살펴보세요:

• CSS 그라디언트 생성기 라이브 미리보기로 부드러운 색상 전환 만들기
• CSS 박스 섀도우 생성기 적절한 색상의 그림자로 깊이감 추가