색상 코드 변환기

색상 코드 변환기 소개

색상 코드 변환기는 색을 웹에서 많이 쓰는 세 가지 형식, 즉 HEX (#FF8800), RGB (rgb(255, 136, 0)), HSL (hsl(32, 100%, 50%))로 바꿔 줍니다. 어느 형식으로든 코드를 입력하거나 색을 고른 뒤, CSS, 디자인 도구, 코드에 필요한 형식을 복사하세요.

대비도 검사합니다. 글자색과 배경색을 입력하면 WCAG 대비율과 일반 텍스트와 큰 텍스트에 대한 AA, AAA 등급 통과 여부를 알려 주어, 누구나 읽기 쉬운 글을 만들 수 있습니다.

모든 처리는 브라우저 안에서 이루어지며, 입력한 내용은 어디로도 전송되지 않습니다.

사용 방법

1. #777, rgb(0 128 255), hsl(120, 50%, 50%) 같은 색상 코드를 입력하거나 색상 선택기를 사용하세요.
2. 미리보기 옆에서 HEX, RGB, HSL로 표시된 색을 확인하세요.
3. 원하는 형식 옆의 "복사"를 클릭하세요.
4. 대비를 검사하려면 글자색(비워 두면 위의 색)과 배경색을 입력하세요.
5. 대비율과 일반 텍스트, 큰 텍스트의 AA, AAA 결과를 확인하세요.

기능

• HEX, RGB, HSL 지원: 짧고 긴 HEX, 쉼표나 공백으로 구분한 rgb()와 hsl(), 숫자 세 개만 적은 값도 읽습니다.
• 색상 선택기: 눈으로 색을 고르면 코드가 바로 표시됩니다.
• 대비율: 두 색의 WCAG 2 대비율을 1:1에서 21:1까지 계산합니다.
• AA와 AAA: 일반 텍스트와 큰 텍스트가 두 등급을 통과하는지 보여 줍니다.
• 명확한 오류 메시지: 빨강 값이 255를 넘는 경우처럼 코드의 어느 부분이 잘못되었는지 알려 줍니다.

사용 예

제한 사항과 참고

• #FF000080이나 rgba()처럼 투명도(알파)가 있는 색은 지원하지 않습니다.
• 색 이름(red, blue), CMYK, LAB 등 다른 색 공간은 변환하지 않습니다.
• HSL 값은 정수로 반올림하므로, 다시 변환하면 색 채널이 몇 단계 달라질 수 있습니다.
• 대비 검사는 WCAG 2.x 기준을 따르며, 글꼴 굵기나 크기, 색각 이상까지 대신 판단하지는 않습니다.

자주 묻는 질문