더 나은 색을
고르세요.
색상 조합부터 이미지 추출·대비 검사까지, 가입 없이 무료로 이용하세요. 계산은 브라우저에서 작동하고 방법과 한계를 함께 설명합니다.
5색 팔레트 만들기
조합 방식을 고르고 새 팔레트를 만드세요. 마음에 드는 색을 잠근 뒤 나머지만 다시 만들 수 있습니다.
생성하고, 추출하고, 검사하세요.
이미지 색상 추출
JPEG, PNG, WebP 이미지에서 6개 대표색을 추출하고 원하는 픽셀의 HEX를 고르세요. 업로드 없이 브라우저 안에서만 처리합니다.
바로 사용 →색상 대비 검사
글자색과 배경색의 WCAG 2.2 대비율을 계산하고 일반·큰 글자와 UI 구성요소의 AA·AAA 통과 여부를 확인하세요.
바로 사용 →색상 코드 변환
HEX 색상 하나를 CSS용 RGB·HSL, 지각 기반 OKLCH, 참고용 CMYK로 바로 변환하세요. 모든 계산은 무료로 브라우저에서 이뤄집니다.
바로 사용 →그라데이션 만들기
2~5개 색으로 선형 또는 방사형 그라데이션을 만들고 각도를 조절하세요. 실시간 미리보기와 같은 CSS 코드를 바로 복사합니다.
바로 사용 →색상 혼합
두 HEX 색을 원하는 비율로 섞어 결과를 복사하고 첫 색에서 둘째 색까지 여섯 단계의 변화를 한눈에 비교하세요.
바로 사용 →색상 이름 찾기
HEX 코드를 입력하면 OKLCH 지각 거리로 가장 가까운 일상 색상 이름과 비슷한 다섯 색을 찾아줍니다.
바로 사용 →색 작업이 끊기지 않습니다.
- 01이미지에서 색 추출파일은 기기에 남습니다.
- 02팔레트 역할 정리잠그고, 바꾸고, 공유합니다.
- 03글자 대비 검사AA·AAA 기준을 확인합니다.
- 04CSS로 적용변수와 그라데이션을 복사합니다.
명화에서 색을 읽는 법.
공개 작품의 색을 단순 추출하지 않고 왜 함께 작동하는지, 디자인에는 어떻게 옮길지 분석합니다.
명화 8점 모두 보기 →
색을 이해하는 실전 가이드
쓸 수 있는 색상 팔레트 만드는 법
하나의 시작색을 웹사이트, 제품, 포스터, 브랜드에 쓸 수 있는 역할 기반·접근성 팔레트로 확장하는 실전 방법입니다.
읽기 →실무를 위한 WCAG 색상 대비
3:1, 4.5:1, 7:1 기준과 큰 글자 예외, UI 경계, 그라데이션·투명도, 자주 하는 검사 실수를 실제 구성요소 관점에서 설명합니다.
읽기 →60–30–10 색상 규칙 쓰는 법
60–30–10 색상 규칙으로 공간, UI, 그래픽의 위계를 만드세요. 유연한 디자인 경험칙을 정확한 산수처럼 쓰지 않는 방법도 설명합니다.
읽기 →결과뿐 아니라 계산법과 한계를 공개합니다.
PIQE는 색상 코드를 바꾼 얇은 페이지를 대량 생성하지 않습니다. 공개된 수학, 공식 기준, 박물관 권리 기록을 사용하고 각 도구가 알 수 없는 것까지 설명합니다.
먼저 확인할 것
PIQE의 모든 컬러 도구는 무료인가요?
네. 회원가입, 결제, 사용 횟수 제한 없이 무료입니다. 결과는 공유 주소나 CSS로 직접 저장합니다.
이미지 색상 추출 시 파일을 서버로 보내나요?
아닙니다. 브라우저의 Canvas API로 기기 안에서만 읽으며 이미지 파일을 PIQE 서버에 업로드하지 않습니다.
명화 팔레트의 색은 어떻게 고르나요?
박물관의 퍼블릭 도메인 복제 이미지를 픽셀 군집으로 분석한 뒤 큰 색 관계와 작은 핵심 포인트를 비교해 사람이 쓸 수 있는 다섯 역할색으로 검수합니다.