W
WEBIS 웹유틸
무료 웹 도구 모음
👁
도구

색상 피커 · 대비 체크

메인 색상과 배경 색상을 함께 조정해 대비비, HEX/RGB/HSL 값을 확인하고 그대로 복사할 수 있습니다.

기준 색상

전경/배경을 함께 두고 실제 대비를 확인합니다.

전경 색상

버튼, 텍스트, 포인트 컬러 기준

배경 색상

카드, 배너, 섹션 배경 기준

브라우저가 EyeDropper API 를 지원하지 않으면 색상 입력창만으로 계속 작업할 수 있습니다.

실시간 미리보기

버튼과 카드 톤에서 바로 읽힘 정도를 확인합니다.

Primary
WEBIS Action Preview

실제 버튼/배너에 가까운 크기로 대비를 미리 확인합니다.

Outline button preview
Neutral card preview
값 복사

자주 쓰는 형식만 정리했습니다.

HEX
RGB
HSL
권장 텍스트색
대비와 파생색
대비비
WCAG AA 본문

사용방법

색상 피커 · 조합 사용 흐름

이 도구의 입력, 실행, 결과 확인 흐름을 기준으로 사용하면 더 안정적으로 작업할 수 있습니다.

01 코드 또는 데이터를 입력합니다

색상 피커 · 조합에 점검할 코드, 설정값, 토큰, URL, 명령어를 붙여넣습니다.

02 검증·정렬·생성을 실행합니다

문법 오류, 옵션, 출력 포맷을 확인하면서 브라우저 안에서 바로 처리합니다.

03 결과를 업무 흐름에 반영합니다

복사 가능한 결과를 개발 문서, 터미널, 배포 체크리스트에 이어서 사용합니다.