색상 명암 대비 검사
WCAG 2.2에 따라 글자와 배경의 대비를 계산하고 일반·큰 글자의 AA와 AAA 충족 여부를 표시합니다.
색상 코드 변환
HEX, RGB, HSL과 투명도를 변환하고 색을 미리 보며 바로 쓸 수 있는 CSS 값을 복사합니다.
HEX, RGB, HSL 중 원하는 값을 수정하세요. 다른 형식과 미리보기가 함께 바뀝니다.
도구 소개
디자인 색을 CSS로 옮길 때 가지고 있는 표기부터 입력할 수 있습니다. sRGB만 다루며 CMYK나 인쇄용 별색은 변환하지 않습니다.
사용 방법
색상 값을 입력하거나 색상 선택기를 사용한 뒤 불투명도를 조절하세요. HEX는 3·4·6·8자리, RGB는 0–255 또는 백분율, HSL의 채도와 밝기는 백분율을 지원합니다. 범위 밖 값은 오류로 표시합니다. 인쇄용 CMYK나 광색역 색 공간 변환은 하지 않습니다.
HEX·RGB·HSL을 각각 직접 편집할 수 있습니다. 하나를 바꾸면 나머지가 갱신되며 입력 중인 내용과 커서는 유지됩니다. 미완성 또는 잘못된 값은 해당 필드에 표시하고 수정 전에는 복사를 막습니다.
자주 묻는 질문
8자리 HEX의 투명도는 어디에 들어가나요?
CSS는 #RRGGBBAA 순서로 마지막 두 자리가 알파값입니다. 일부 프로그램의 ARGB 순서와 다릅니다. RGB와 HSL에도 투명도를 넣을 수 있습니다.
RGB와 HSL은 어떤 문법으로 입력하나요?
rgb(255 0 0 / 50%)나 hsl(0 100% 50%)처럼 입력할 수 있습니다. 쉼표 문법도 지원하지만 슬래시 문법과 섞지 마세요. 색상 이름과 CMYK는 받지 않습니다.
50% 불투명도가 HEX에서 조금 달라지는 이유는?
HEX 알파는 256단계입니다. 0.5는 80으로 반올림되어 128/255를 뜻합니다. 소수 알파를 유지하려면 8자리 HEX 대신 RGB나 HSL을 사용하세요.
관련 도구
새 탭에서 열립니다
댓글
0