컬러 코드 변환기
HEX·RGB·HSL·OKLCH 색상 코드를 양방향으로 즉시 변환하고, 두 색상의 WCAG 대비비를 계산해 접근성 기준 충족 여부를 확인하는 무료 온라인 도구. CSV·JSON·색상·시간 등 서로 다른 데이터 형식을 변환해야 할 때 유용하며, 모든 처리가 브라우저 안에서 이뤄져 입력 데이터가 서버로 전송되지 않고 설치나 회원가입 없이 무료로 사용할 수 있습니다.
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 대비 비율을 확인합니다.
관련 도구
CSS 그라디언트 생성기linear, radial, conic CSS 그라디언트를 비주얼 에디터로 만들고 색상 정지점과 각도를 조정해 CSS 코드를 복사하는 무료 도구. 테스트·개발에 필요한 값을 즉석에서 만들어야 할 때 편리하며, 생성 과정이 모두 브라우저에서 실행되어 데이터가 서버로 전송되지 않고 회원가입 없이 무료로 사용할 수 있습니다.
CSS 박스 섀도우 생성기오프셋·블러·확산·색상·내부 그림자 옵션을 조절하며 box-shadow를 실시간 미리보기하고, 완성된 CSS 코드를 복사하는 무료 온라인 생성 도구. 테스트·개발에 필요한 값을 즉석에서 만들어야 할 때 편리하며, 생성 과정이 모두 브라우저에서 실행되어 데이터가 서버로 전송되지 않고 회원가입 없이 무료로 사용할 수 있습니다.
CSS 단위 참조px, em, rem, %, vw, vh, vmin, vmax, ch 등 CSS 단위를 카테고리별로 정리하고 용도를 설명하는 무료 참조표. 코딩 중 빠르게 찾아봐야 할 코드·기호·단축키 정보를 한곳에서 확인할 수 있어 편리하며, 브라우저에서 즉시 검색·복사할 수 있고 설치나 회원가입 없이 무료로 이용할 수 있습니다.
px ↔ rem 변환기사용자 지정 루트 글꼴 크기를 기준으로 CSS px와 rem 단위를 양방향 변환하고 복사 가능한 참조표와 CSS 스니펫을 제공하는 무료 온라인 도구입니다. CSV·JSON·색상·시간 등 서로 다른 데이터 형식을 변환해야 할 때 유용하며, 모든 처리가 브라우저 안에서 이뤄져 입력 데이터가 서버로 전송되지 않고 설치나 회원가입 없이 무료로 사용할 수 있습니다.
자주 묻는 질문
Oklab 색 공간의 원통형 표현으로, 인간의 색 지각에 가장 가까운 균일한 색 공간입니다. CSS Color Level 4에서 지원됩니다.
텍스트와 배경 색상 간의 명도 차이를 나타냅니다. AA 기준 4.5:1, AAA 기준 7:1 이상이 권장됩니다.
현재는 불투명 색상(RGB, HEX 6자리)만 지원합니다. RGBA, HSLA는 향후 추가 예정입니다.
네. 각 포맷의 출력값을 그대로 CSS에 붙여넣을 수 있습니다.
아니요. 모든 색상 변환은 브라우저에서 이루어집니다.