디자인
컬러 유틸리티
HEX, RGB, HSL 색상을 변환하고 웹 접근성을 위한 WCAG 대비율을 확인합니다.
색상 변환
HEX
#007BFF
RGB
rgb(0, 123, 255)
HSL
hsl(211, 100%, 50%)
대비 확인 도구 (WCAG)
대비율 21.00
일반 텍스트
AA (4.5:1)
AAA (7.0:1)
큰 텍스트
AA (3.0:1)
AAA (4.5:1)
미리보기
다람쥐 헌 쳇바퀴에 타고파. 키스의 고유물은 입술이다.
색상 변환 및 대비 확인 도구
HEX, RGB, HSL 색상 형식을 변환하고 전경색과 배경색의 대비를 확인합니다. CSS 구현, 디자인 handoff, hover 상태, UI 접근성 검토에 유용합니다.
자주 쓰는 상황
- CSS 색상 변환: 디자인 도구와 코드 사이의 형식을 맞춥니다.
- 가독성 확인: 버튼, 링크, label, alert의 대비를 확인합니다.
- 색상 변형 만들기: HSL로 밝기와 채도를 조정합니다.
중요한 상태를 색상만으로 표현하지 말고 텍스트, 아이콘, 레이아웃도 함께 사용하세요.