색상 변환기 — HEX RGB HSL OKLCH 변환과 WCAG 대비 검사

소개

CSS 색을 쓰다 보면 HEX는 #1e90ff, 디자인 도구는 RGB, 팔레트는 HSL이나 OKLCH로 달라 매번 바꿔 써야 합니다. 이 도구는 어느 형식으로 입력해도 HEX, RGB, HSL, OKLCH를 한꺼번에 보여 주고 색 미리보기와 흰색·검정 배경 대비 검사까지 해 줍니다.

사용법

1. 입력 칸에 색을 적거나 오른쪽 색상 선택기로 고릅니다. 예: #1e90ff, rgb(30 144 255), hsl(210 100% 56%), oklch(0.65 0.19 250).
2. 아래에서 HEX, RGB, HSL, OKLCH 값을 확인하고 필요한 형식을 복사합니다.
3. 대비 영역에서 흰색 배경과 검정 배경 위에서의 대비 비율과 AA·AAA 통과 여부를 봅니다. 실제로 쓸 배경색이 따로 있으면 배경색 칸에 적어 그 조합의 대비도 확인하세요.
4. 투명도가 있는 값은 HEX는 8자리, 나머지는 rgba(), hsla(), / 알파 형식으로 나옵니다.

기준

• 입력은 HEX(3·4·6·8자리, # 생략 가능), CSS Color 4의 색 이름 148개(tomato, rebeccapurple 등, 대소문자 무관)와 transparent, rgb()/rgba()(쉼표 또는 공백 문법, % 가능), hsl()/hsla(), oklch()를 받습니다.
• OKLCH 변환은 Björn Ottosson이 2020년에 발표한 OKLab 정의의 표준 행렬을 씁니다. sRGB를 선형으로 바꾼 뒤 LMS 값의 세제곱근을 거쳐 L, a, b를 얻고, C는 a·b의 크기, H는 각도입니다.
• 출력 정밀도는 HSL이 소수 첫째 자리, OKLCH가 L·C 소수 넷째 자리와 H 소수 둘째 자리라서 HEX로 되돌렸을 때 값이 그대로 돌아옵니다.
• sRGB 범위를 벗어난 OKLCH 입력은 채널을 0~255로 잘라 처리하고 안내 문구를 보여 줍니다.
• 대비는 WCAG 2.x의 상대 휘도와 대비 공식을 따릅니다. 표시 값은 소수 둘째 자리까지 반올림하지만 통과 여부는 반올림 전 값으로 판단해, 4.499가 4.5로 보이며 통과하는 일은 없습니다. 직접 지정한 배경이 반투명하면 흰 화면 위에 먼저 겹친 뒤 계산합니다.

예시

참고

• 본문 글자에는 AA 일반 글자(4.5:1)를 최소 기준으로 삼는 것이 좋고, 18pt 이상이거나 14pt 굵은 큰 글자는 3:1이면 AA입니다.
• 색상만으로 정보를 구분하지 말고 아이콘이나 글자를 함께 쓰세요. 대비 검사는 글자와 배경의 밝기 차이만 확인합니다.