무료 색상·디자인 도구 모음

HEX·RGB·HSL 색상 변환, 글자와 배경의 대비 검사, CSS 그라데이션 생성을 무료로 이용하세요. 필요한 도구를 골라 브라우저에서 바로 작업합니다.

회원가입 없이 무료로 사용하며 색상 값과 결과를 서버로 보내지 않습니다.

어떤 순서로 사용하면 좋을까요?

색상 코드를 바꾸려면 색상 변환을, 글자와 배경의 구분을 확인하려면 대비 검사를 선택하세요. 배경을 꾸미려면 그라데이션을 만들고 CSS를 복사하세요. 각 도구의 입력은 자동으로 공유되지 않습니다.

사진에서 원하는 지점을 눌러 HEX·RGB·RGBA 색상을 무료로 추출하세요. 대표 색상 팔레트와 투명도를 확인하고 색상 코드를 복사합니다. 이미지 업로드 없이 브라우저에서 처리합니다.

HEX, RGB, HSL 색상 코드를 무료로 서로 변환하고 CSS 값을 복사하세요. 입력과 결과는 브라우저 안에서만 처리됩니다.

글자색과 배경색의 WCAG 2.2 대비율을 무료로 계산하고 AA·AAA 일반 글자, 큰 글자와 UI 통과 여부를 브라우저에서 확인하세요.

선형·방사형 CSS 그라디언트를 무료로 만들고 색상 지점과 각도를 조절해 background 코드를 복사하세요. 브라우저에서만 처리됩니다.

1색상 변환으로 인쇄 색상도 확인할 수 있나요?

이 도구는 HEX·RGB·HSL 값을 변환합니다. CMYK 변환이나 인쇄 색상 교정 도구가 아니며 실제 출력 색상을 보장하지 않습니다.

2대비 검사만 통과하면 접근성이 완성되나요?

아니요. 입력한 글자색과 배경색의 대비를 확인하는 도구입니다. 키보드 조작, 대체 텍스트, 실제 배치 등 다른 접근성 항목은 별도로 확인해야 합니다.

3그라데이션 결과는 어디에 사용하나요?

선형 또는 방사형 그라데이션을 미리 보고 CSS를 복사해 웹페이지 배경에 사용할 수 있습니다. 배경 위에 글자를 놓을 때는 여러 위치에서 가독성도 확인하세요.