색상 변환기
미리보기와 WCAG 대비 분석으로 HEX, RGB, HSL, OKLCH 간 색상을 변환합니다.
이 도구 정보
색상 작업은 표기법 사이를 오갑니다. 레거시 CSS에는 HEX, 채널 조작에는 RGB, 직관적 조정에는 HSL, 지각적으로 균일한 팔레트에는 OKLCH를 사용합니다. 이 변환기는 비주얼 피커를 포함한 모든 형식을 받아 4가지 동등 값을 즉시 표시하고, WCAG 2 기준의 흰색·검정 대비 대비율(일반 텍스트 AA ≥ 4.5, AAA ≥ 7)도 보여줍니다. sRGB 영역 밖의 OKLCH 색상을 입력하면 결과가 클램프되고 표시됩니다. 모든 계산은 브라우저에서 이루어집니다.
이 도구 정보
색상 작업은 표기법 사이를 오갑니다. 레거시 CSS에는 HEX, 채널 조작에는 RGB, 직관적 조정에는 HSL, 지각적으로 균일한 팔레트에는 OKLCH를 사용합니다. 이 변환기는 비주얼 피커를 포함한 모든 형식을 받아 4가지 동등 값을 즉시 표시하고, WCAG 2 기준의 흰색·검정 대비 대비율(일반 텍스트 AA ≥ 4.5, AAA ≥ 7)도 보여줍니다. sRGB 영역 밖의 OKLCH 색상을 입력하면 결과가 클램프되고 표시됩니다. 모든 계산은 브라우저에서 이루어집니다.
사용 사례
- 디자인 토큰을 CSS 형식 간 변환
- 지각적으로 균일한 팔레트용 OKLCH 값 생성
- 밝은/어두운 배경에서 브랜드 색상의 WCAG 대비 확인
- 혼합 형식으로 받은 색상 정규화
자주 묻는 질문
- 어떤 입력 형식이 지원되나요?
- 3, 4, 6, 8자리 16진수(# 유무 무관), 숫자 또는 퍼센트의 rgb()/rgba(), hsl()/hsla(), oklch(l c h). 비주얼 색상 피커도 사용할 수 있습니다.
- OKLCH는 무엇이며 왜 사용하나요?
- OKLCH는 지각적으로 균일한 색 공간입니다. L을 바꾸면 지각되는 밝기가 HSL과 달리 일관되게 변화합니다. 균형 잡힌 팔레트와 색상 스케일 생성에 이상적입니다.
- «영역 밖» 경고는 무슨 의미인가요?
- 일부 OKLCH 색상은 sRGB(표준 디스플레이)에 동등한 값이 없습니다. 변환기는 가장 가까운 표시 가능 색상으로 근사하고 값이 조정되었음을 알리는 경고를 표시합니다.
- 대비는 어떻게 계산되나요?
- WCAG 2 상대 휘도 공식을 사용하며 비율은 1~21입니다. 일반 텍스트는 AA ≥ 4.5, AAA ≥ 7이 필요합니다. 패널에 흰색과 검정에 대한 색상 비율이 표시됩니다.