PICKERCONVERTERCONVERSION
컬러 피커 & 변환기
HEX, RGB, HSL, OKLCH 색상 형식 간의 실시간 변환 및 명도비 검사, 인접 Tailwind 색상 추출을 수행합니다.
슬라이더 세밀 조절
RED59
GREEN130
BLUE246
ALPHA100%
색상 변환 결과
HEX#3b82f6
RGB / RGBArgb(59, 130, 246)
HSL / HSLAhsl(217, 91%, 60%)
OKLCHoklch(0.623 0.188 259.8)
WCAG 명도 대비 검사
흰색 배경 대비 (#FFFFFF)
3.68:1
AA FailAAA Fail
가독성 예시 텍스트입니다.
검은색 배경 대비 (#000000)
5.71:1
AA PassAAA Fail
가독성 예시 텍스트입니다.
가장 가까운 Tailwind CSS 색상
작성하신 색상값과 가장 유사도가 높은 Tailwind 기본 팔레트 색상을 알려드립니다. 클릭하여 클래스명을 즉시 복사하세요.
blue-500
도구 설명 및 사용 방법
HEX, RGB, HSL, OKLCH 색상 형식 간의 실시간 변환 및 명도비 검사, 인접 Tailwind 색상 추출을 수행합니다.
사용 단계
1
원하는 색상값(예: #3b82f6 또는 rgb(59, 130, 246))을 입력하거나 네이티브 색상 선택창을 엽니다.
2
지원되는 브라우저에서는 "스포이트" 버튼을 눌러 화면에 뜬 아무 색상이나 클릭해 픽업합니다.
3
변환 결과창에서 HEX, RGB, HSL, OKLCH 복사 버튼을 눌러 활용합니다.
4
하단의 명도 대비 검사와 Tailwind 색상 매칭 결과를 보고 UI 가독성과 어울리는 코드를 손쉽게 선택합니다.
작동 원리 및 상세 설명
컬러 변환기는 색 공간 입체 좌표계 변환식에 입각합니다. HEX 문자열을 파싱해 RGB 정밀 비트를 유도한 후, 수학 공식을 적용해 HSL 원주 좌표로 투영하거나, CIE XYZ 광원 프로필 연산 과정을 거쳐 지각 좌표계인 OKLCH 수치로 전환합니다. 대비 평가는 WCAG 상대 조도 공식에 비추어 조율하여 맵핑합니다.
자주 묻는 질문 (FAQ)
OKLCH 색상 공간의 장점은 무엇인가요?
OKLCH는 인간의 지각적 밝기 일치성에 기반해 설계된 차세대 색 공간입니다. HSL과 달리 색상(Hue)을 변경해도 사람 눈에 비치는 명도(Lightness)가 일정하게 보존되므로, 일관성 있는 웹 접근성 컬러 세트를 디자인할 때 강력합니다.
대비 등급(WCAG 2.1) 판단 조건이 어떻게 되나요?
글자색과 배경색의 밝기 비율을 비교하며, 4.5:1 이상은 AA(합격), 7:1 이상은 AAA(우수) 등급을 매겨 UI 가독성 부합 상태를 가리킵니다.
코드 사용 예시
CSS OKLCH 및 HEX 색상 정의 스펙 예시
css
/* HEX 표기 */
color: #3b82f6;
/* OKLCH 표기 (밝기 62.8%, 크로마 0.25, 색상각 250) */
color: oklch(0.628 0.25 250);모던 웹 스타일시트 규격인 oklch 형태와 기존 hex 색상 표기 스니펫입니다.