색상 변환이란 무엇인가요?
브라우저가 렌더링하는 모든 색상은 궁극적으로 sRGB 트리플입니다 — 빨강, 초록, 파랑 채널에 대한 0과 255 사이의 세 숫자와 선택적인 알파입니다. CSS Color Level 4 사양은 동일한 트리플로 라운드트립하는 여러 텍스트 형식과, 지각적으로 균일한 OKLCH 공간을 정의합니다. 이 도구는 그 어떤 것도 읽어 들이고, 그 모두로 변환하며, 두 번째 색상에 대한 WCAG 2.1 대비 비율을 보고하므로 접근 가능한 인터페이스를 자신 있게 출시할 수 있습니다.
색상 변환은 어떻게 작동하나요?
변환은 잘 정의된 선형 및 비선형 변형의 연속입니다. 모든 단계는 브라우저에서 실행됩니다 — 어떤 입력도 우리 서버에 도달하지 않습니다:
- 입력이 파싱됩니다. 이 도구는 3, 4, 6 또는 8자리 HEX, 함수형 표기인
rgb()/rgba()/hsl()/hsla()/hsv()/hwb()— 레거시 쉼표 구문이든 현대적인 슬래시-알파 구문이든 — 또는 150개 명명된 CSS 색상(rebeccapurple포함) 중 어느 것이든 자동으로 감지합니다. - 파싱된 색상은 정규 sRGB로 정규화됩니다 — 각각 0–1 범위의 네 부동소수점
{r, g, b, a}. 이것이 모든 출력 형식이 파생되는 단일 진실의 원천입니다. - HEX는 각 채널을 0–255 바이트 값으로 반올림하고 16진수 자릿수를 결합하여 만들어집니다. RGB / RGBA는 동일한 바이트를 출력합니다. HSL과 HSV는 표준 W3C 원통 좌표 알고리즘을 적용합니다. HWB는 HSV에서 색조를,
min(r, g, b)에서 백색도를,1 - max(r, g, b)에서 흑색도를 도출합니다. - CMYK는 단순 근사치입니다 —
k = 1 - max(r, g, b), 그리고 잔여 채널에서c, m, y. 화면 미리보기에는 적합하지만 인쇄에는 적합하지 않습니다: 실제 CMYK 출력에는 이 도구가 의도적으로 포함하지 않는 ICC 프로필이 필요합니다. - OKLCH는 css-color-4 정방향 경로를 따릅니다: sRGB가 선형화되고, LMS 행렬을 통해 곱해지고, 세제곱근을 취하고, LMS-에서-OKLab 행렬을 통해 곱해지고, 마지막으로 직각 OKLab에서 극형 OKLCH로 변환됩니다. OKLCH는 지각적으로 균일하므로, 사람의 눈에 균형 잡혀 보이는 팔레트를 설계하기 위한 올바른 공간입니다.
이 색상 변환기를 사용하는 이유는 무엇인가요?
- 프라이버시: 모든 변환은 일반 JavaScript를 사용하여 브라우저에서 실행됩니다. 붙여넣는 색상은 절대로 기기를 떠나지 않으며, 이는 미공개 브랜드 작업, 내부 디자인 시스템, NDA 하의 클라이언트 모형에서 중요합니다.
- 디자이너-개발자 핸드오프: Figma의 HEX를 붙여넣고 Tailwind 설정용
rgb()문자열, CSS 사용자 정의 속성용hsl()문자열, 또는 현대적 팔레트용oklch()문자열을 다시 읽어내세요 — 모든 형식이 한 곳에, 탭 사이의 복사-붙여넣기 없이. - WCAG 정확성: 대비 검사기는 정확한 WCAG 2.1 상대 휘도 공식과 일반 텍스트 및 큰 텍스트에 대해 발행된 AA(4.5 / 3.0) 및 AAA(7.0 / 4.5) 임계값을 사용합니다. 보고된 비율은 수동 계산기와 0.01 이내로 일치합니다.
- 다크 모드와 팔레트 파생: HSL과 OKLCH는 명도를 단일 채널로 노출하므로, 브랜드 색상을 명도 축을 따라 위아래로 이동시켜 매칭된 다크 모드 토큰을 도출하거나 단일 시드에서 10단계 팔레트 램프를 생성하는 것이 간단합니다.
색상 변환의 일반적인 활용 사례는 무엇인가요?
색상 변환은 웹 개발, 디자인, 접근성 작업 전반에 걸쳐 나타납니다:
- 디자인 시스템: 브랜드 HEX를 CSS 사용자 정의 속성 스케일에 매칭된 HSL 및 OKLCH 토큰으로 변환한 다음, 모든 토큰 조합이 페이지 배경에 대해 WCAG AA를 통과하는지 검증합니다.
- 접근성 감사: 실제 제품 화면에서 전경과 배경 쌍을 붙여넣고, 일반 굵기와 큰 굵기 텍스트 모두에 대한 대비 비율과 AA/AAA 판정을 한눈에 읽어냅니다.
- 도구 간 라운드트립: 스크린샷 피커(HEX)에서 색상을 가져와 여기에 붙여넣고,
hsl()또는oklch()문자열을 Tailwind, Figma 토큰 또는 CSS-in-JS 테마에 바로 복사합니다.
색상 변환 예시는 어떻게 생겼나요?
유명한 rebeccapurple을 살펴보세요. 명명된 색상 조회는 이를 #663399로 해석합니다. RGB 변환은 rgb(102, 51, 153)을 제공합니다. HSL 변환은 hsl(270, 50%, 40%)을 제공합니다 — 보라색 색조, 절반 채도, 십분의 사 밝기. 대비 도구로 그 색상을 순백색과 대조하면 약 7.39의 비율이 나오며, 이는 일반 텍스트에 대해 AAA(7.0)를, 큰 텍스트에 대해 AAA(4.5)를 통과합니다 — 강력하고 접근 가능한 전경 선택입니다. #663399를 RGB → HSL → RGB → HEX로 라운드트립하면 원래 문자열이 바이트 단위로 정확하게 반환됩니다.
이 변환기를 — 코드에서든, 디자인 파일에서든, 스크린샷에서든 — 마주치는 모든 색상의 빠른 참고서로 사용하고, 대비 검사기를 출시 전 검토용으로 사용하세요. 모든 것이 로컬에서 실행되고, 어떤 것도 기록되지 않으며, 변환 수학은 발행된 W3C 및 WCAG 사양을 따르므로 그 숫자가 감사 도구나 브라우저 개발자 도구가 보고할 내용과 일치합니다.