컬러 피커
WCAG 대비를 확인하고 CSS 그라디언트와 색상 팔레트를 만듭니다.
그냥 색을 고르거나 HEX ↔ RGB ↔ HSL을 변환(스포이드 포함)하고 싶나요? HEX RGB 변환기를 쓰세요.
예시
대비 검사
입력
#F5F5F5 위 #1A1A1A
출력
≈ 16:1 — AA & AAA 통과
CSS 그라디언트
입력
#3B82F6 → #9333EA, 90°
출력
background: linear-gradient(90deg, #3B82F6, #9333EA);
팔레트
입력
#3B82F6
출력
음영 + 보색, 유사색, 삼색조
도구 소개
이 무료 온라인 컬러 스튜디오는 세 가지 필수 기능을 한데 모읍니다: AA/AAA 통과-실패와 실시간 글자 미리보기가 있는 WCAG 대비 검사기, 복사 준비된 선언을 주는 CSS 그라디언트 빌더, 음영·보색·유사색·삼색조 팔레트 생성기. 모든 탭에 컬러 피커가 내장되어 있고 모든 것이 업로드 없이 브라우저에서 실행됩니다. 순수 HEX ↔ RGB ↔ HSL 변환과 화면 스포이드는 {link}를 쓰세요.
사용 방법
- 대비: 글자색과 배경색을 정해 WCAG 접근성을 검사하세요.
- 그라디언트: 두 색과 각도를 고른 뒤 CSS를 복사하세요.
- 팔레트: 기준색을 입력하고 아무 스와치나 클릭해 복사하세요.
누구를 위한 것인가
접근성 준수를 확인하고, CSS 배경을 만들고, 통일감 있는 팔레트를 만드는 디자이너·개발자 — 도구를 여러 개 오가지 않고.
자주 묻는 질문
이 색상 도구는 무엇을 할 수 있나요?
한곳에서 세 가지: 두 색의 WCAG 대비 검사, CSS 그라디언트 만들기, 기준색에서 음영·조화 팔레트 생성. 모든 탭에 컬러 피커가 내장되어 있습니다.
무료인가요?
네 — 가입 없이 완전 무료이며, 모든 것이 업로드 없이 브라우저에서 실행됩니다.
대비 검사기는 어떻게 작동하나요?
글자색과 배경색을 입력하면 WCAG 대비비와 함께 일반·큰 글자 각각의 AA·AAA 통과/실패를 실시간 미리보기와 함께 보여줍니다.
어떤 대비비가 필요한가요?
WCAG AA는 일반 글자 최소 4.5:1, 큰 글자 3:1이 필요하고, AAA는 각각 7:1과 4.5:1이 필요합니다. 검사기가 각 레벨을 표시해 줍니다.
CSS 그라디언트와 팔레트 색을 복사할 수 있나요?
네. 그라디언트 탭은 바로 복사할 background: 선언을 주고, 모든 팔레트 스와치는 클릭하면 hex를 복사합니다.
색을 고르거나 HEX/RGB/HSL을 변환하려면?
전용 HEX RGB 변환기를 쓰세요 — 색을 고르고(크롬/엣지의 화면 스포이드) HEX·RGB·HSL을 보여줍니다. 이 스튜디오는 색으로 하는 일(대비·그라디언트·팔레트)에 집중합니다.
웹 페이지나 이미지에서 색을 집을 수 있나요?
네 — 크롬과 엣지에서 HEX RGB 변환기의 스포이드(및 북마클릿)로 화면 어디서든 색을 캡처한 뒤 hex를 여기로 가져오세요.
관련 도구