COLOR TOOLS

색상 도구 모음

색상 코드 변환, 명도 대비 확인, 그라디언트 코드 생성을 목적별로 고를 수 있습니다.

색상 도구 3종은 화면 작업에서 색을 다루는 단계를 나눠 담았습니다. HEX·RGB·HSL 사이를 오가는 값 변환, 배경과 글자의 명도 대비 점검, 여러 색을 자연스럽게 잇는 그라디언트 코드까지 시안을 코드로 옮길 때 필요한 손질을 모았습니다.

색을 고르고 값을 확인하는 계산은 전부 화면 안에서 처리되고, 고른 색이나 코드가 밖으로 기록되지 않습니다. 공개 전 시안 색이라도 부담 없이 이것저것 넣어볼 수 있습니다.

HEX·RGB·HSL·CMYK를 양방향 즉시 변환. 색을 고르면 코드가 바로, 복사도 한 번에.

두 색의 명도 대비를 WCAG 기준으로. 글자 가독성·웹접근성 AA·AAA 통과 여부까지.

색을 고르면 CSS 그라데이션 코드를. 방향·색 정지점 조절, 실시간 미리보기.

USE CASES

어떤 상황에 어떤 색상 도구?

시안에서 정한 색을 HEX나 RGB, HSL 어느 표기로든 바꿔야 한다면 색을 고른 뒤 필요한 형식으로 복사해 그대로 붙여 넣으면 됩니다.

배경 위 텍스트가 흐릿하게 보인다면 두 색의 명도 대비가 웹접근성 기준을 통과하는지 먼저 확인하는 편이 안전합니다.

여러 색을 부드럽게 잇는 배경이 필요하면 방향과 색 정지점을 조절해 미리 보고, 완성된 CSS 코드를 복사해 쓰면 됩니다.

GUIDES