컬러 코드 변환기
HEX
#3b82f6RGB
rgb(59, 130, 246)HSL
hsl(217, 91%, 60%)OKLCH
oklch(0.623 0.188 259.8)HSL 조정
대비 비율 (WCAG)
비교 색상:
샘플 텍스트
대비 비율: 3.68:1
WCAG: AA Large
최종 업데이트: 2026년 · 무료 온라인 도구
컬러 코드 변환기란?
HEX·RGB·HSL·OKLCH 색상 코드를 양방향으로 즉시 변환하고, 두 색상의 WCAG 대비비를 계산해 접근성 기준 충족 여부를 확인하는 무료 온라인 도구.
사용 방법
- 1 색상 입력 — 색상 피커 또는 텍스트 입력으로 색상을 입력합니다. HEX, rgb(), hsl() 형식을 지원합니다.
- 2 포맷 확인 — HEX, RGB, HSL, OKLCH 포맷이 동시에 표시됩니다.
- 3 값 복사 — 각 포맷의 복사 버튼으로 CSS 값을 복사합니다.
- 4 대비 비율 확인 — 비교 색상을 설정하여 WCAG 대비 비율을 확인합니다.
관련 도구
Timestamp 변환기 Unix 타임스탬프와 날짜를 양방향으로 변환하는 무료 온라인 도구입니다. 초(10자리)와 밀리초(13자리)를 모두 인식하고 KST, JST, UTC 등 타임존과 ISO 8601 형식, 상대 시간 표시를 지원합니다.
CSS 그라디언트 생성기 linear, radial, conic CSS 그라디언트를 비주얼 에디터로 만들고 색상 정지점과 각도를 조정해 CSS 코드를 복사하는 무료 도구.
CSS 박스 섀도우 생성기 오프셋·블러·확산·색상·내부 그림자 옵션을 조절하며 box-shadow를 실시간 미리보기하고, 완성된 CSS 코드를 복사하는 무료 온라인 생성 도구.
자주 묻는 질문
Oklab 색 공간의 원통형 표현으로, 인간의 색 지각에 가장 가까운 균일한 색 공간입니다. CSS Color Level 4에서 지원됩니다.
텍스트와 배경 색상 간의 명도 차이를 나타냅니다. AA 기준 4.5:1, AAA 기준 7:1 이상이 권장됩니다.
현재는 불투명 색상(RGB, HEX 6자리)만 지원합니다. RGBA, HSLA는 향후 추가 예정입니다.
네. 각 포맷의 출력값을 그대로 CSS에 붙여넣을 수 있습니다.
아니요. 모든 색상 변환은 브라우저에서 이루어집니다.