컬러 변환
HEX, RGB, HSL, OKLCH, OKLAB 값을 한 번에 비교하고 복사하세요. WCAG 명도 대비도 흰색과 검정 기준으로 즉시 확인할 수 있고, 모든 처리는 브라우저 안에서 끝납니다.
샘플 색을 눌러 바로 확인해 보세요
다른 표기법으로 보기
명도 대비
흰색 배경 위
Aa
5.70:1AA
검정 배경 위
Aa
3.69:1AA 큰 글자
디자인과 코드 사이의 색을 빠르게 옮기기
디자이너는 HSL로 사고하고, 개발자는 HEX로 출시하고, CSS는 이제 OKLCH를 다룹니다. 한 도구에서 같은 색을 모든 표기법으로 한 번에 보면 시안과 구현 사이를 오갈 때 색이 어긋날 일이 줄어듭니다.
라이브 미리보기는 알파 채널이 보이도록 체커보드 위에 색을 띄워, 반투명 색의 실제 인상을 그대로 확인할 수 있습니다. 흰색과 검정 배경 위의 대비 비율도 함께 표시되어 본문 가독성을 출시 전에 점검하기 좋습니다.
변환은 모두 브라우저 안에서 즉시 일어나고, 색 값이 어디로도 전송되지 않습니다. 디자인 토큰, CSS 변수, 스크린샷에서 가져온 값 어느 쪽이든 그대로 붙여 넣고 다른 표기법으로 바로 받아 가세요.