색상 변환기
색상을 HEX, RGB, HSL, HWB, OKLCH로 변환하고, 배경과의 WCAG 대비를 확인하고, Material 3 톤 팔레트도 만들 수 있습니다.
코드 예제
내 프로젝트에 그대로 복사해서 쓰세요. 모든 예제는 해당 언어의 표준 라이브러리만 사용하므로 설치할 것이 없습니다.
const foreground = '#3366cc'
const background = '#ffffff'
const luminance = (hex) => {
const [r, g, b] = [1, 3, 5].map((start) => {
const channel = parseInt(hex.slice(start, start + 2), 16) / 255
return channel <= 0.04045 ? channel / 12.92 : ((channel + 0.055) / 1.055) ** 2.4
})
return 0.2126 * r + 0.7152 * g + 0.0722 * b
}
const [lighter, darker] = [luminance(foreground), luminance(background)].sort((a, b) => b - a)
const ratio = (lighter + 0.05) / (darker + 0.05)
// Truncated, not rounded: 4.499 must not pass as 4.5.
console.log((Math.floor(ratio * 100) / 100).toFixed(2))기능
색상을 HEX, RGB, HSL, HWB, OKLCH로 변환하고, 배경과의 WCAG 대비율을 확인하고, 그 색으로 Material 3 톤 팔레트를 만듭니다. 모든 처리는 브라우저에서 이루어집니다.
사용 방법
- 색상을 hex(
#36c,#3366cc) 또는rgb(),hsl(),hwb(),oklch()로 입력합니다. - 변환, 대비, 팔레트 중 하나를 고릅니다. 대비 모드에서는 배경색 입력란이 나타납니다.
- 결과를 복사하거나 다운로드하거나 다른 도구로 보냅니다.
예시
#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단계 톤을 나열합니다. 뒤에서 쓰는 색상 라이브러리는 이 모드를 선택할 때만 불러옵니다.