색상 변환기
HEX, RGB 또는 HSL 형식으로 색상 값을 입력하면 모든 다른 형식으로 즉시 변환됩니다. 모든 처리는 브라우저에서 로컬로 수행됩니다.
HEX (#rrggbb), RGB (rgb(r,g,b)), 또는 HSL (hsl(h,s%,l%))을 입력하거나 색상 선택기를 사용하세요.
복사됨!
단색 배경 대비
흰 배경에서
검은 배경에서
색상 형식에 대하여
- HEX -
#rrggbb, 가장 일반적인 CSS 색상 형식. - RGB -
rgb(r, g, b), 각 채널 0-255. - HSL -
hsl(h, s%, l%), 색상 0-360°, 채도 및 명도 0-100%.
브라우저가 이해하는 것은 무엇이든 받습니다. rebeccapurple 같은 이름, 알파가 붙은 여덟 자리 16진수, 그리고 요즘 CSS가 쓰는, 알파 앞에 슬래시를 두는 공백 구분 형식도 포함됩니다. 대비 수치는 WCAG의 상대 휘도 공식을 따르므로, 비율 4.5가 AA 등급에서 본문 글자의 기준이고 7이 AAA 등급의 기준입니다. 이 수치는 불투명한 색을 기준으로 계산합니다. 반투명한 색은 뒤에 무엇이 있는지 정해지기 전에는 고정된 대비가 없기 때문입니다.
마크업이 말을 안 듣나요
이스케이프된 엔티티, 깨진 인코딩, CMS에서는 이렇게 보이는데 페이지에서는 저렇게 보이는 콘텐츠. 대개는 파이프라인 어딘가가 추측하고 있다는 뜻입니다. 저희는 프런트엔드와 그 뒤의 배포 경로까지 만듭니다. 쓴 그대로 방문자에게 보이도록 말이죠.
사이트에 대해 이야기하기자주 묻는 질문
어떤 색 형식을 붙여 넣을 수 있나요
세 자리, 네 자리, 여섯 자리, 여덟 자리 16진수, rgb와 rgba, hsl과 hsla, hwb, 그리고 모든 CSS 색 이름입니다. 쉼표 형식과, 알파 앞에 슬래시를 두는 요즘의 공백 구분 형식 모두 받으므로 스타일시트에서 바로 붙여 넣어도 됩니다.
투명도는 어떻게 처리되나요
알파 채널은 변환을 거쳐도 남습니다. 여덟 자리 16진수는 rgba로 돌아오고, 미리보기 뒤에는 체크무늬가 보입니다. 알파는 실제로 완전 불투명이 아닐 때만 출력에 적히며, 원하면 항상 표시하도록 바꿀 수 있습니다.
대비 수치는 무슨 뜻인가요
이 색과 흰색 또는 검은색 단색 배경 사이의 WCAG 대비 비율입니다. 보통 본문 글자는 AA 등급에 4.5, AAA 등급에 7이 필요하고, 큰 글자는 기준이 낮습니다. 비율이 3 아래로 내려가면 크기와 상관없이 대부분의 사람에게 읽기 어렵습니다.
대비를 왜 알파 없이 계산하나요
반투명한 색에는 고정된 대비가 없기 때문입니다. 읽는 사람이 실제로 보는 것은 뒤에 무엇이 있느냐에 달려 있으므로, 수치는 불투명한 색으로 계산합니다. 글자가 정말 반투명하다면 먼저 합성된 색을 구하고 그것을 확인하세요.
HSL과 HWB는 무엇이 다른가요
둘 다 같은 색상 각도에서 출발합니다. HSL은 얼마나 채도가 높고 얼마나 밝은지로 색을 설명하며, 대부분의 도구가 보여 주는 짝입니다. HWB는 흰색과 검은색을 얼마나 섞었는지로 설명하는데, 물감을 섞는 감각에 가깝고 색조 단계를 만들 때 다루기가 더 쉽습니다.