색상 형식 설명: HEX, RGB, HSL
빠른 답변
HEX(#RRGGBB) 및 RGB(채널당 0~55)는 빨간색, 녹색 및 파란색 강도를 직접 인코딩합니다. HSL(색조 0~60°, 채도/명도 0~00%)은 사람의 인식과 일치하는 방식으로 색상을 인코딩하므로 팔레트와 음영을 더 쉽게 만들 수 있습니다. 색상 변환기를 사용하여 세 가지 모두를 변환하세요.
소개
웹 색상은 HEX(기본 16 빨간색, 녹색, 파란색), RGB(채널당 십진수 0~55) 및 HSL(색조, 채도, 밝기)의 세 가지 주요 형식으로 지정됩니다. 세 가지 모두 동일한 sRGB 색상 공간을 설명하지만 서로 다른 축을 노출합니다. HEX 및 RGB는 하드웨어 지향(직접 채널 값)인 반면 HSL은 인간 지향(직관적인 색조, 채도 및 밝기)입니다. 최신 CSS은 HEX8, rgba() 및 hsla()를 통해 알파도 지원합니다.
단계별
-
HEX 표기법 이해
HEX는 각 채널을 두 자리의 16진수(#RRGGBB)로 씁니다. 00은 꺼지고 FF(255)는 최대 강도입니다. #FF0000은 퓨어 레드, #00FF00 퓨어 그린, #0000FF 퓨어 블루, #FFFFFF 화이트, #000000 블랙입니다. 4자리 약어 #RGB는 #RRGGBB로 확장되고 #RRGGBBAA는 알파를 추가합니다(예: #FF573380은 50% 알파입니다).
-
RGB 표기법 이해
RGB는 채널당 10진수 0~55를 사용합니다. rgb(255, 87, 51)은 #FF5733과 동일합니다. rgba() 함수는 0—알파를 추가합니다. rgba(255, 87, 51, 0.5)는 50% 불투명합니다. RGB는 HEX와 동일합니다. 16진수 대신 십진수입니다.
-
HSL 표기법 이해
HSL은 색상환에서 0~60°: 0=빨간색, 120=녹색, 240=파란색), 채도(0% = 회색, 100% = 풀 컬러) 및 밝기(0% = 검은색, 50% = 보통, 100% = 흰색)를 사용합니다. hsl(11, 100%, 60%) 은 선명한 주황색입니다. HSL을 사용하면 동일한 색조의 색조(밝기 높이기)와 음영(밝기 낮추기)을 쉽게 만들 수 있습니다.
-
형식 간 변환
HEX→RGB: 각 쌍을 base-16으로 구문 분석합니다. RGB→HEX: 각 채널을 2자리 16진수로 변환합니다. RGB→HSL: 정규화된 채널의 최대/최소를 계산합니다. 밝기 = (최대+최소)/2, 채도는 밝기에 따라 달라지며, 색조는 주요 채널의 각도입니다. 색상 변환기를 사용하면 이 모든 작업을 즉시 수행할 수 있습니다.
-
작업에 적합한 형식을 선택하세요
디자인 토큰 및 자산의 압축을 위해 HEX를 사용하세요. 채널을 보간하거나 애니메이션을 적용해야 하는 경우 RGB/rgba()를 사용하세요. 팔레트, 음영 또는 테마 변형을 생성할 때 HSL/HSLA를 사용하십시오. 밝기를 10% 조정하는 것이 RGB 델타를 추론하는 것보다 훨씬 쉽습니다.
예
세 가지 형식 모두에서 순수한 빨간색
입력: #FF0000
산출: rgb(255, 0, 0) = hsl(0, 100%, 50%)
생생한 오렌지
입력: #FF5733
산출: rgb(255, 87, 51) = hsl(11, 100%, 60%)
흰색과 검정색
입력: #FFFFFF 및 #000000
산출: rgb(255,255,255) = hsl(0, 0%, 100%); rgb(0,0,0) = hsl(0, 0%, 0%)
하나의 HSL 색상으로 5단계 쉐이드 만들기
입력: hsl(210, 70%, 50%) — 밝기 30/40/50/60/70% 변경
산출: #1A4D7F, #2E6BA3, #4389C7, #6FA8DC, #9EC5E8 —일관된 파란색 팔레트
일반적인 문제
- 3자리와 6자리 혼합 HEX: #F00과 #FF0000은 동일한 색상이지만 일부 파서는 하나의 형식만 허용합니다. 놀라움을 피하기 위해 코드를 6자리로 정규화합니다.
- HSL 밝기 50%는 '절반 밝기'가 아닙니다. 채도 100%에서 밝기 50%는 순수한 색상입니다. 50% 이상에서는 흰색에 가까운 색조를 띠고, 50% 미만에서는 검정색에 가까운 색조를 띕니다. '50% 회색'은 hsl(0, 0%, 50%)입니다.
- 알파 채널 혼동: #RRGGBBAA(HEX8)는 최신 브라우저에서는 지원되지만 이전 브라우저에서는 지원되지 않습니다. rgba()/hsla()는 더 폭넓은 지원을 제공합니다. 항상 대상 환경을 테스트하십시오.
- 색 공간 불일치: HEX, RGB 및 HSL은 모두 sRGB를 나타냅니다. P3 또는 Lab/OKLCH(최신 디스플레이에서 사용)로/에서 변환하는 경우 단순 채널 복사로 인해 잘못된 색상이 생성됩니다. 적절한 색상 라이브러리를 사용하십시오.
팁
- 팔레트를 디자인할 때 HSL을 사용하세요. 하나의 색조를 선택한 다음 밝기(예: 30/50/70%)와 채도(예: 60/80/100%)를 변경하여 일관된 색조와 색조를 생성합니다.
- 접근성을 위해 배경과의 명암비를 확인하세요. WCAG AA는 일반 텍스트에 4.5:1, AAA 7:1이 필요합니다. 색상 변환기를 사용하여 상대 휘도와 대비를 계산합니다.
- 지각적으로 균일한 보간을 위해 최신 CSS color-mix() 또는 oklch()를 선호합니다. —RGB 보간은 보색을 혼합할 때 탁한 회색을 통과할 수 있습니다.
- 그라데이션을 생성할 때 먼저 끝점을 동일한 형식으로 변환하십시오. 단일 그라데이션 선언에서 HEX 및 HSL을 혼합하면 예기치 않은 중간점이 생성될 수 있습니다.