# 색상 변환기

색상을 HEX, RGB, HSL, HWB, OKLCH로 변환하고, 배경과의 WCAG 대비를 확인하고, Material 3 톤 팔레트도 만들 수 있습니다.

https://codeknife.dev/ko/saeksang-byeonhwangi/

## 기능

색상을 HEX, RGB, HSL, HWB, OKLCH로 변환하고, 배경과의 WCAG 대비율을 확인하고, 그 색으로 Material 3 톤 팔레트를 만듭니다. 모든 처리는 브라우저에서 이루어집니다.

## 사용 방법

1. 색상을 hex(`#36c`, `#3366cc`) 또는 `rgb()`, `hsl()`, `hwb()`, `oklch()`로 입력합니다.
2. **변환**, **대비**, **팔레트** 중 하나를 고릅니다. 대비 모드에서는 배경색 입력란이 나타납니다.
3. 결과를 복사하거나 다운로드하거나 다른 도구로 보냅니다.

## 예시

`#3366cc`는 `rgb(51 102 204)`, `hsl(220 60% 50%)`, `hwb(220 20% 20%)`, `oklch(0.5325 0.1679 262.29)`입니다. 흰색 위에서 대비는 5.36:1로, 일반 텍스트의 AA는 충족하지만 AAA는 충족하지 못합니다.

## 알아두기

- 비율은 WCAG 2를 따릅니다. 선형 sRGB에서 상대 휘도를 구한 뒤 (밝은 쪽 + 0.05) / (어두운 쪽 + 0.05)로 계산합니다. 소수 둘째 자리에서 버림하며, 올림해서 통과시키지 않습니다.
- AA는 일반 텍스트 4.5:1, 큰 텍스트 3:1을, AAA는 7:1과 4.5:1을 요구합니다.
- 값은 먼저 8비트 정수 채널로 반올림하므로 모든 줄이 같은 hex 색을 나타냅니다. sRGB 밖의 OKLCH 색은 표시 가능한 가장 가까운 색으로 맞춥니다.
- 팔레트는 기준 색의 색조와 채도를 유지하고, Material 3처럼 0, 10, 20 … 90, 95, 99, 100 톤을 나열합니다.
- 색상 이름과 알파 채널은 지원하지 않습니다.

## 어떤 색상 표기를 읽나요?

hex(#36c 또는 #3366cc)와 CSS 함수 rgb(), hsl(), hwb(), oklch()를 읽으며, 값 사이는 공백이나 쉼표로 구분합니다. 색상 이름과 투명도는 지원하지 않습니다. 결과는 같은 색을 모든 표기로 보여 주며, sRGB 정수 채널로 반올림합니다.

## 자주 묻는 질문

### WCAG는 어떤 대비율을 요구하나요?

AA는 일반 텍스트에 4.5:1, 큰 텍스트와 인터페이스 요소에 3:1을 요구합니다. AAA는 7:1과 4.5:1입니다. 비율은 올림하지 않고 버림하므로 4.49는 통과로 보지 않습니다.

### OKLCH란 무엇이고 왜 쓰나요?

OKLCH는 같은 간격이 같은 차이로 보이도록 설계된 색 공간에서 명도, 채도, 색조로 색을 나타냅니다. 색상 스케일을 만들거나 색조가 틀어지지 않게 명도를 조정할 때 유용합니다.

### 팔레트 모드는 무엇인가요?

Material 3 톤 팔레트를 만듭니다. 기준 색의 색조와 채도를 유지하고 0(검정)부터 100(흰색)까지 13단계 톤을 나열합니다. 뒤에서 쓰는 색상 라이브러리는 이 모드를 선택할 때만 불러옵니다.