CREATE YOUR PALETTE
색으로 시작하는 아이디어
색상환을 드래그하거나 색 번호를 선택하세요.
슬라이더는 방향키로도 조절할 수 있어요.
색상을 선택해 세부 조정하세요. 고정한 색은 자동 조합과 이미지 추출 시 유지됩니다.
CLICK. COLOR. CREATE.
구역을 고르고, 색을 입혀 보세요.
① 아래에서 바꿀 구역을 선택 → ② 펼쳐진 아래 펼쳐진 팔레트에서 색 선택 → ③ 미리보기에서 바로 확인
A SMALL IDEA, A NEW PERSPECTIVE
작은 색의 변화가 전혀 다른 분위기를 만듭니다.
당신의 다음 프로젝트에 어울리는 조합을 찾아보세요.
CSS 변수 또는 JSON으로 가져가세요.
A LITTLE INSPIRATION
어떤 분위기를 찾고 있나요?
THE COLOR REFERENCE
펼쳐 놓고 찾는 컬러 차트
HSL 기준 12개 색상 계열 × 8단계 밝기와 무채색 8종입니다. 각 타일에 실제 HEX 값을 표시합니다.
FROM IMAGE TO PALETTE
사진 속 분위기를
다섯 가지 색으로.
사진이나 디자인에서 대표 색상을 추출하세요.
이미지는 서버에 전송하지 않고 브라우저에서 처리합니다.
JPG, PNG, WebP · 최대 10MB / 2,000만 픽셀
또는 왼쪽에서 파일을 선택하세요
SEE IT IN CONTEXT
실제로 쓰면 어떤 느낌일까요?
그라디언트
colorful.
텍스트 대비 검사
WCAG 2.2작은 글자까지 편하게 읽히는 조합을 찾아보세요.
일반 텍스트 AA 4.5:1 · AAA 7:1 / 큰 텍스트 AA 3:1
큰 텍스트: 24px 이상 또는 굵은 18.67px 이상. 텍스트 대비만 검사합니다.
ONE COLOR, FOUR LANGUAGES
팔레트 색상 변환표
| 번호 | HEX | RGB · 0–255 | HSL · °, %, % | CMYK · 근사 % |
|---|
CMYK는 프로파일을 적용하지 않은 수학적 근사값입니다. 실제 인쇄용 분판·색 교정에는 인쇄소의 ICC 프로파일이 필요합니다.
CMYK 값으로 색상 입력하기
YOUR COLOR COLLECTION
다시 꺼내 쓰는 나만의 팔레트
컬러 스튜디오 사용 안내
색상환과 조화 규칙으로 5색 팔레트를 만들고 이미지 추출, 그라디언트, 대비 검사와 CSS 내보내기를 이용하세요.
색상환 또는 HEX·HSL로 색을 조절하세요. 고정한 색은 유지되며 이미지 추출, CSS 복사, JSON 다운로드와 브라우저 팔레트 저장을 제공합니다.
어떻게 구현했나
HSL 색상환과 유사색·보색·분할 보색·삼각형·단색 조화를 계산합니다.
이미지를 축소해 색상 분포를 분석하고 대표색을 추출합니다. 파일은 서버로 전송하지 않습니다.
sRGB 상대 휘도로 WCAG 텍스트 대비를 계산합니다. 팔레트 저장은 현재 브라우저에만 적용됩니다.
자주 묻는 질문
입력한 데이터는 어디에서 처리하나요?
이 도구의 입력 데이터는 브라우저에서 처리하며 도구 기능을 위해 서버로 업로드하지 않습니다. 결과를 공유하기 전 민감한 정보가 없는지 확인하세요.
결과가 예상과 다르면 어떻게 하나요?
입력 형식, 문자 인코딩과 선택한 옵션을 확인하세요. 각 도구가 안내하는 지원 범위와 제한을 확인하고, 원본 데이터를 보관한 상태에서 결과를 검토하세요.