색상 변환기 (HEX, RGB, HSL) 자주 묻는 질문

HEX를 RGB로 변환하는 방법은 무엇인가요?

16진수 색상 코드를 RGB로 변환하려면, 6자리 16진수 문자열 #RRGGBB를 세 쌍으로 나눈 다음, 각 쌍을 16진수(base-16)에서 10진수(base-10)로 변환합니다.

예시: #FF5733

• FF = 255 (빨강)
• 57 = 87 (초록)
• 33 = 51 (파랑)
• 결과: rgb(255, 87, 51)

단축형 hex(#F53)의 경우, 먼저 각 자릿수를 쌍으로 확장합니다: #F53은 #FF5533이 됩니다. 자릿수가 두 배로 확장됩니다: F는 FF로, 5는 55로, 3은 33으로 확장됩니다.

8자리 hex(#RRGGBBAA)도 동일한 방식으로 작동하지만, 알파 채널을 위한 추가 쌍이 있습니다. #FF573380은 알파 채널에 80(128, 약 50% 불투명도)을 추가합니다.

즉시 변환하려면 색상 변환기를 사용하세요. 알파 채널이 있거나 없는 짧은 hex와 긴 hex를 포함한 모든 형식을 처리합니다.

RGB와 RGBA의 차이점은 무엇인가요?

RGB는 빨강, 초록, 파랑 채널을 사용하여 색상을 정의합니다. RGBA는 불투명도를 제어하는 추가 알파 채널이 있는 RGB입니다. 알파 값은 0.0(완전 투명)에서 1.0(완전 불투명)까지의 범위를 가집니다.

rgb(255, 0, 0)         /* 완전 불투명 빨강 */
rgba(255, 0, 0, 0.5)  /* 50% 불투명도의 빨강 */

최신 CSS(CSS Color Level 4)에서는 rgba() 별칭이 더 이상 필요하지 않습니다. rgb() 함수가 이제 선택적 알파 채널을 허용합니다:

rgb(255 0 0 / 0.5)  /* 최신 구문, 50% 불투명도의 빨강 */

모든 최신 브라우저가 이 구문을 지원합니다. 레거시 rgba() 함수는 모든 곳에서 작동하며 제거되지 않지만, 새 코드에는 슬래시 구문과 함께 rgb()를 사용하는 것이 권장됩니다.

RGB를 HSL로 변환하는 방법은 무엇인가요?

RGB를 HSL로 변환하는 데는 세 단계가 필요합니다:

1. 정규화 RGB 값을 0-1 범위로 정규화합니다(255로 나누기)
2. 최소값과 최대값 찾기 세 정규화된 값의 최소값과 최대값을 찾습니다 — 최소값과 최대값의 평균이 명도(L)입니다
3. 색상과 채도 계산 어떤 채널이 최대값인지와 최대값과 최소값의 차이에 따라 계산합니다

공식은 어떤 색상 채널이 우세한지에 따라 달라집니다:

• 빨강이 최대값인 경우: 색상 = (초록 - 파랑) / (최대값 - 최소값)
• 초록이 최대값인 경우: 색상 = 2 + (파랑 - 빨강) / (최대값 - 최소값)
• 파랑이 최대값인 경우: 색상 = 4 + (빨강 - 초록) / (최대값 - 최소값)
• 채도는 명도에 따라 달라집니다: L > 0.5인 경우 채도 = (최대값 - 최소값) / (2 - 최대값 - 최소값), 그렇지 않으면 채도 = (최대값 - 최소값) / (최대값 + 최소값)

계산이 간단하지 않고 실수하기 쉬우므로, 즉시 결과를 얻으려면 색상 변환 도구를 사용하는 것이 좋습니다.

왜 다른 화면에서 색상이 다르게 보이나요?

색상 외관은 여러 가지 이유로 화면마다 다릅니다:

화면 캘리브레이션 — 대부분의 소비자용 화면은 색상이 캘리브레이션되지 않았습니다. 공장 출하 기본값은 밝기, 대비 및 색온도에서 큰 차이를 보입니다.

색 영역 차이 — 화면마다 지원하는 색상 범위가 다릅니다. sRGB는 웹 표준이지만, 많은 최신 휴대폰과 노트북은 DCI-P3(25% 더 넓음)를 지원합니다. sRGB 영역을 벗어난 색상은 넓은 영역 디스플레이에서는 올바르게 보이지만 표준 디스플레이에서는 잘리거나 이동됩니다.

디스플레이 기술 — OLED 화면은 LCD 화면보다 더 깊은 검정색과 더 선명한 색상을 생성합니다. IPS 패널은 TN 패널보다 색상 정확도가 더 좋습니다.

시야각 — 특히 저가형 디스플레이에서 각도에서 볼 때 색상이 변합니다.

밝기와 주변 조명 — 어두운 방에서 50% 밝기의 화면은 직사광선 아래에서 100% 밝기의 동일한 화면과 다르게 보입니다.

차이를 최소화하려면: sRGB 색 공간에서 작업하고, 하드웨어 캘리브레이터로 모니터를 캘리브레이션하며, 배포 전에 여러 기기에서 디자인을 테스트하세요.

HSL 색상 모델은 어떤 용도에 적합한가요?

HSL(색상, 채도, 명도)은 프로그래밍 방식 색상 조작에 이상적입니다. 주요 장점은 하나의 채널이 "색상" 정보(색상)를 전달하고, 나머지 두 채널이 색상 값과 독립적으로 외관을 제어한다는 점입니다.

HSL이 쉽게 만드는 것:

• 색상 팔레트 — 동일한 색상을 유지하고 명도와 채도를 변경하여 전체 색상 스케일 생성
• 호버 및 활성 상태 — 고정된 비율로 명도 변경: hsl(220, 80%, 50%) -> hsl(220, 80%, 60%)
• 다크 모드 — 모든 색상의 명도 감소: 각 색상의 명도에서 30% 빼기
• 테마 — 색상 값을 교체하여 동일한 채도/명도 구조에서 완전히 새로운 색상 구성 생성
• 비활성 상태 — 채도를 줄여 요소의 채도 낮추기: hsl(220, 80%, 50%) -> hsl(220, 30%, 70%)

HSL에 적합하지 않은 것:

HSL은 지각적으로 균일하지 않습니다. 동일한 명도 값을 가진 두 색상(예: hsl(60, 100%, 50%) — 밝은 노랑, hsl(240, 100%, 50%) — 순수 파랑)은 인지되는 밝기가 매우 다릅니다. 지각적으로 균일한 색상 조작을 위해서는 대신 OKLCH를 사용하세요.

hex 색상에서 # 기호는 무엇을 의미하나요?

# 접두사(해시 또는 파운드 기호)는 CSS 파서에게 뒤따르는 문자가 16진수 색상 값을 나타낸다는 것을 알려줍니다. 이는 CSS와 HTML에서 hex 색상 코드의 표준 표기법입니다.

전체 형식은 #RRGGBB 또는 #RRGGBBAA입니다:

| 구성 요소 | 의미 | 예시 (#FF5733) | |-----------|------|------------------| | # | Hex 접두사 | 필수 표시자 | | RR | 빨강 채널 | FF (255) | | GG | 초록 채널 | 57 (87) | | BB | 파랑 채널 | 33 (51) |

HTML에서 #는 앵커 링크(<a href="#section">)에도 사용되지만, CSS 컨텍스트나 style 속성에서는 항상 hex 색상을 나타냅니다. HTML은 #가 필요하지 않은 레거시 "명명된 색상"(140개의 미리 정의된 이름, 예: red, blue, rebeccapurple)도 지원합니다.

색 영역이란 무엇이며 왜 중요한가요?

색 영역(Color Gamut)은 기기가 표시할 수 있거나 색 공간이 표현할 수 있는 색상의 범위입니다. 화면이나 파일 형식에 사용할 수 있는 색상의 "어휘"라고 생각하세요.

일반적인 색 영역, 가장 작은 것부터 가장 넓은 것까지:

| 색 공간 | 상대적 크기 | 사용처 | |-------------|--------------|--------| | sRGB | 기준선 | 웹 표준, 대부분의 모니터, 모든 브라우저 | | Adobe RGB | ~50% 더 넓음 | 전문 사진, 인쇄 | | DCI-P3 | ~25% 더 넓음 | 최신 휴대폰, Mac, 많은 노트북 | | Rec. 2020 | ~75% 더 넓음 | HDR 텔레비전, 고급 디스플레이 |

중요한 이유: 화면의 영역을 벗어난 색상은 정확하게 표시할 수 없습니다. 기기는 색상을 가장 가까운 영역 내 값으로 자르거나 근사합니다. 이것이 디자인 파일의 선명한 진한 빨간색이 표준 노트북 화면에서 칙칙하거나 탁하게 보일 수 있는 이유입니다.

웹 디자인용: 항상 sRGB로 디자인하거나 색상이 sRGB-safe인지 확인하세요. OKLCH와 display-p3 색 공간을 사용하면 더 넓은 영역을 대상으로 할 수 있지만, 표준 화면을 위한 sRGB 폴백을 제공해야 합니다.

hex와 알파 채널이 있는 hex의 차이점은 무엇인가요?

표준 hex(#FF5733)는 6자리를 사용하며 알파 채널이 없습니다 — 색상은 항상 완전 불투명입니다. 알파 채널이 있는 hex(#FF573380)는 8자리를 사용하며, 알파(불투명도) 채널을 위해 끝에 두 자리 hex 숫자를 추가합니다.

hex의 알파 값:

| Hex 쌍 | 10진수 | 불투명도 | |----------|---------|----------| | 00 | 0 | 완전 투명 | | 80 | 128 | ~50% 불투명도 | | FF | 255 | 완전 불투명 |

예시:

#FF5733     — 단색 빨간-주황, 투명도 없음
#FF5733FF   — 동일 색상, 완전 불투명 (중복 FF)
#FF573380   — 동일 색상, 50% 투명
#FF573300   — 동일 색상, 완전히 보이지 않음

알파 채널이 있는 4자리 단축 hex도 있습니다: #F538은 #FF553388(50% 불투명도)로 확장됩니다.

브라우저 지원: 8자리 hex는 모든 최신 브라우저에서 지원됩니다. 레거시 브라우저 지원(Internet Explorer)을 위해서는 대신 rgba()를 사용하세요.

웹사이트에 접근성 있는 색상을 선택하는 방법은 무엇인가요?

접근성 있는 색상 시스템을 구축하려면 다음 단계별 프로세스를 따르세요:

1. 기본 브랜드 색상으로 시작하세요. 브랜드를 대표하는 색상을 선택한 다음, HSL 또는 OKLCH를 사용하여 매우 밝은(배경) 것부터 매우 어두운(텍스트) 것까지 전체 스케일을 만듭니다.

2. 텍스트를 거의 검정색에 가깝게 설정하세요. 흰색 배경의 본문 텍스트는 #1A1A1A에서 #333333 사이여야 합니다. 순수 검정(#000000)을 순수 흰색 위에 사용하지 마세요 — 일부 독자에게 눈의 피로를 유발합니다. 흰색 위의 어두운 회색이 더 나은 가독성을 제공합니다.

3. 모든 전경-배경 쌍을 확인하세요. 텍스트와 배경의 모든 조합은 WCAG 표준을 충족해야 합니다:

• 일반 텍스트: 최소 4.5:1 (WCAG AA)
• 큰 텍스트: 최소 3:1 (WCAG AA)
• 본문 텍스트에서 7:1 목표 (WCAG AAA)

4. 색상을 유일한 구분 수단으로 사용하지 마세요. 링크에는 밑줄이 있어야 합니다(단순히 다른 색상이 아닌). 오류 상태에는 아이콘이나 텍스트가 포함되어야 합니다. 차트는 패턴이나 레이블을 사용해야 합니다.

5. 색맹 시뮬레이터로 테스트하세요. 적록 색맹(Deuteranopia)이 가장 일반적인 유형입니다. 색상 인식 없이도 디자인이 작동하는지 확인하세요.

6. 그레이스케일로 확인하세요. 그레이스케일로 변환할 때 디자인의 의미가 손실된다면, 정보를 전달하는 데 색상에 너무 의존하고 있는 것입니다.

두 색상 간의 대비 비율을 즉시 확인하려면 색상 변환기를 사용하세요.