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