색상 코드 변환

아니요. 색을 읽고 바꾸고 명암비를 재는 계산이 전부 브라우저 안에서 실행됩니다. 입력한 값은 서버로 가지 않고 어디에도 저장되지 않으며, 페이지를 닫으면 사라집니다.

WCAG 2.2 가 정한 공식 그대로입니다. 채널값을 0–1 로 나눈 뒤 sRGB 감마를 펴고(0.03928 이하는 12.92 로 나누고, 그 위는 ((c+0.055)/1.055)^2.4), 상대 휘도 L = 0.2126R + 0.7152G + 0.0722B 를 구한 다음, (밝은 쪽 L + 0.05) / (어두운 쪽 L + 0.05) 로 냅니다. 값은 1:1 부터 21:1 사이입니다. 검정과 흰색이 정확히 21:1 이고, 흰 배경에서 #767676 은 4.54:1 로 본문 AA 를 통과하지만 #777777 은 4.48:1 로 통과하지 못합니다 — 회색 한 칸 차이로 갈리는 자리입니다.

접근성 기준의 등급입니다. 본문 크기 글자는 AA 가 4.5:1, AAA 가 7:1 을 요구합니다. 큰 글자(18pt=24px 이상, 굵은 글씨는 14pt=18.66px 이상)는 글자가 굵고 커서 덜 요구합니다 — AA 3:1, AAA 4.5:1. 글자가 아닌 것(아이콘, 입력칸 테두리, 그래프 선)은 AA 3:1 입니다. 대부분의 웹 접근성 지침이 AA 를 최소선으로 삼습니다.

어긋나지 않습니다. 판정은 반올림하기 전 값으로 하고, 표시는 내림합니다. 4.4996 을 "4.50" 으로 올려 적으면 "4.5 인데 왜 실패냐"가 되는데, 규격이 요구하는 것은 4.5 이상이므로 실패가 맞고 표시가 거짓말이 되는 것입니다. 그래서 이 도구는 내려서 4.49 로 적습니다.

명암비 공식은 불투명한 색 두 개에만 정의됩니다. 반투명한 색을 그냥 넣으면 아무 숫자나 나옵니다. 이 도구는 앞 색을 뒤 색 위에 실제로 얹어 섞은 다음 재고, 섞었다는 사실을 화면에 적습니다. 뒤 색에도 투명도가 있으면 흰 종이 위에 얹은 것으로 봅니다.

같습니다. 3자리 표기는 각 글자를 두 번 쓴 것과 같다고 규격이 정합니다. 반대로 줄이는 것은 세 바이트가 모두 같은 글자 두 개일 때만 됩니다 — #aabbcd 를 #abc 로 줄이면 다른 색이 되므로 이 도구는 줄이지 않습니다. 4자리(#abcd)와 8자리(#aabbccdd)는 마지막 한 바이트가 투명도입니다.

쉼표로 나누는 옛 표기와 공백으로 나누는 새 표기가 섞여 있어서입니다. 어느 쪽으로 읽어도 값이 달라질 수 있는데, 알아서 하나를 골라 읽으면 사람이 오타를 낸 줄 모르고 지나갑니다. 이 도구는 읽지 못한 것을 조용히 0 으로 만들지 않고 무엇이 문제인지 말합니다. 값이 범위를 벗어난 경우(rgb(300,0,0) 등)에는 규격대로 255 로 맞추고, 맞췄다는 사실을 함께 적습니다.

HSL 표기를 소수 한 자리까지만 적기 때문입니다. 예를 들어 #123456 은 hsl(210 65.4% 20.4%) 인데, 실제 값은 65.3846…% 라서 다시 RGB 로 돌리면 한두 칸 차이가 날 수 있습니다. 정확한 값이 필요하면 HEX 나 RGB 를 쓰세요. 도구 안에서는 반올림하지 않은 값으로 계산하므로 화면의 색 자체는 정확합니다.

148개입니다. 이 도구의 표는 손으로 적은 것이 아니라 브라우저가 실제로 쓰는 값을 뽑아 만들었고, 다른 구현의 색 이름 표와 148개 전부 대조해 한 칸도 다르지 않은 것을 확인했습니다. 이름이 헷갈리는 자리가 몇 군데 있습니다 — green 은 #008000 이고 #00ff00 은 lime 입니다. darkgray(#a9a9a9)가 gray(#808080)보다 밝습니다. gray/grey 처럼 철자가 둘인 이름이 아홉 쌍 있고, 이 도구는 사전순으로 앞선 쪽을 보여 줍니다.