컬러 코드 변환기
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 대비비를 계산해 접근성 기준 충족 여부를 확인하는 무료 온라인 도구. CSV·JSON·색상·시간 등 서로 다른 데이터 형식을 변환해야 할 때 유용하며, 모든 처리가 브라우저 안에서 이뤄져 입력 데이터가 서버로 전송되지 않고 설치나 회원가입 없이 무료로 사용할 수 있습니다.
사용 방법
- 1색상 입력— 색상 피커 또는 텍스트 입력으로 색상을 입력합니다. HEX, rgb(), hsl() 형식을 지원합니다.
- 2포맷 확인— HEX, RGB, HSL, OKLCH 포맷이 동시에 표시됩니다.
- 3값 복사— 각 포맷의 복사 버튼으로 CSS 값을 복사합니다.
- 4대비 비율 확인— 비교 색상을 설정하여 WCAG 대비 비율을 확인합니다.
관련 도구
Timestamp 변환기Unix 타임스탬프와 날짜를 양방향으로 변환하는 무료 온라인 도구입니다. 초(10자리)와 밀리초(13자리)를 모두 인식하고 KST, JST, UTC 등 타임존과 ISO 8601 형식, 상대 시간 표시를 지원합니다. CSV·JSON·색상·시간 등 서로 다른 데이터 형식을 변환해야 할 때 유용하며, 모든 처리가 브라우저 안에서 이뤄져 입력 데이터가 서버로 전송되지 않고 설치나 회원가입 없이 무료로 사용할 수 있습니다.
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에 붙여넣을 수 있습니다.
아니요. 모든 색상 변환은 브라우저에서 이루어집니다.