사진에서 브랜드 색 뽑기
제품 사진이나 시안 이미지를 올려 대표 색 다섯 개를 추출하고, 마음에 드는 색은 고정한 채 나머지만 다시 조합합니다.
COLOR STUDIO · PALETTE AND CONTRAST
컬러 스튜디오
어울리는 색 다섯 개, 바로 코드로
#336699 하나를 고르면 유사색·보색·삼각형 같은 조화 규칙으로 5색 팔레트를 만들고 HEX·RGB·HSL·CMYK 값을 나란히 보여 줍니다. 글자와 배경의 대비비를 WCAG 기준으로 검사하고 CSS 변수로 복사할 수 있습니다.
- 5색 팔레트
- WCAG 대비 검사
- 이미지 색 추출
- 브라우저에서만 처리
CREATE YOUR PALETTE
색으로 시작하는 아이디어
색상환HSL COLOR WHEEL
색상환을 드래그하거나 색 번호를 선택하세요.
슬라이더는 방향키로도 조절할 수 있어요.
선택한 색상 03
#RGB 또는 #RRGGBB 형식 · Enter로 적용색상을 선택해 세부 조정하세요. 고정한 색은 자동 조합과 이미지 추출 시 유지됩니다.
CLICK. COLOR. CREATE.
구역을 고르고, 색을 입혀 보세요.
① 아래에서 바꿀 구역을 선택 → ② 펼쳐진 아래 펼쳐진 팔레트에서 색 선택 → ③ 미리보기에서 바로 확인
studio / notesCollection About ↗
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
실제로 쓰면 어떤 느낌일까요?
그라디언트
Make something
colorful.
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
다시 꺼내 쓰는 나만의 팔레트
MADE FOR YOUR WORK
이럴 때 쓰세요
글자가 잘 읽히는지 확인
버튼 글자와 배경색의 대비비를 계산해 일반 텍스트 AA(4.5:1)를 넘는지 디자인 확정 전에 확인합니다.
CSS 변수로 바로 적용
완성한 팔레트를 :root { --color-1: … } 형태로 복사하거나 그라디언트 CSS 를 가져가 스타일시트에 붙여 넣습니다.
인쇄물 색 초안 잡기
화면에서 고른 색의 CMYK 근사값을 변환표로 복사해 인쇄소와 이야기할 출발점으로 씁니다.
STEP BY STEP
컬러 스튜디오 사용 방법
이렇게 쓰세요
기준 색 정하기
색상환을 드래그하거나 HEX 칸에 #RGB·#RRGGBB 를 넣고 Enter 를 누릅니다. 색조·채도·명도 슬라이더로 세밀하게 조절합니다.
조화 규칙 고르기
색상 조화 규칙에서 유사색·보색·분할 보색·삼각형·단색 중 하나를 고르면 5색이 다시 계산됩니다. 남길 색은 고정하고 새로운 조합을 누르세요.
대비와 미리보기 확인
텍스트 대비 검사에서 글자 색과 배경 색을 정하면 대비비와 AA·AAA 통과 여부가 나옵니다. 미리보기 화면의 구역을 눌러 색을 입혀 볼 수도 있습니다.
내보내기
CSS 복사, JSON 다운로드, 변환표의 표 복사로 가져가고, 팔레트 저장을 누르면 이 브라우저에 20개까지 보관됩니다.
UNDERSTAND THE BASICS
RGB·HEX·HSL·CMYK, 그리고 명도 대비비
화면은 빨강·초록·파랑 빛을 더해 색을 만듭니다. RGB 는 세 빛의 세기를 0~255 로 적은 것이고, HEX 는 같은 값을 16진수 두 자리씩 붙여 쓴 표기입니다. #336699 는 33·66·99 가 각각 51·102·153 이라 rgb(51, 102, 153) 과 같은 색입니다.
HSL 은 같은 색을 사람이 생각하는 방식으로 다시 적습니다. H 는 색상환의 각도(0° 빨강, 120° 초록, 240° 파랑), S 는 채도, L 은 밝기입니다. #336699 는 hsl(210, 50%, 40%) 입니다. H 만 돌리면 보색(180°)·삼각형(120°) 같은 조합을 쉽게 만들 수 있어 팔레트 생성에 이 방식을 씁니다.
CMYK 는 인쇄 잉크(청록·자홍·노랑·검정)의 비율입니다. 화면 색과 잉크 색은 표현할 수 있는 범위가 달라서, 이 도구의 CMYK 는 프로파일 없이 계산한 수학적 근사값입니다. 실제 인쇄 색은 인쇄소의 ICC 프로파일로 맞춰야 합니다.
대비비는 두 색의 상대 휘도(사람 눈에 느껴지는 밝기)를 비교한 값으로 1:1 부터 21:1 까지입니다. WCAG 는 일반 글자 4.5:1, 큰 글자 3:1 을 AA 기준으로 둡니다. 흰 배경 위 회색 글자라면 #767676 이 4.5:1 을 겨우 넘는 가장 밝은 회색에 가깝습니다.
| 등급 | 일반 글자 | 큰 글자(24px 이상, 굵게 18.67px 이상) |
|---|---|---|
| AA | 4.5:1 이상 | 3:1 이상 |
| AAA | 7:1 이상 | 4.5:1 이상 |
컬러 스튜디오 사용 안내
색상환과 조화 규칙으로 5색 팔레트를 만들고 이미지 추출, 그라디언트, 대비 검사와 CSS 내보내기를 이용하세요.
색상환 또는 HEX·HSL로 색을 조절하세요. 고정한 색은 유지되며 이미지 추출, CSS 복사, JSON 다운로드와 브라우저 팔레트 저장을 제공합니다.
QUICK EXAMPLE
컬러 스튜디오 사용 예제
입력 · 시작
#336699
결과 · 확인
RGB 51, 102, 153
색 공간과 디스플레이에 따라 실제 보이는 색은 다를 수 있습니다.
어떻게 구현했나
HSL 색상환과 유사색·보색·분할 보색·삼각형·단색 조화를 계산합니다.
이미지를 축소해 색상 분포를 분석하고 대표색을 추출합니다. 파일은 서버로 전송하지 않습니다.
sRGB 상대 휘도로 WCAG 텍스트 대비를 계산합니다. 팔레트 저장은 현재 브라우저에만 적용됩니다.
BEFORE YOU FINISH
자주 하는 실수
연한 회색 글자를 쓴다
흰 배경에 #999999 같은 회색 본문은 대비가 약 2.85:1 로 AA 에 못 미칩니다. 본문은 대비 검사에서 일반 AA 통과를 먼저 확인하세요.
화면 CMYK 를 인쇄 값으로 믿는다
RGB 에서 계산한 CMYK 는 근사값이라 실제 인쇄에서는 탁하거나 다르게 나올 수 있습니다. 중요한 인쇄물은 교정쇄로 확인하세요.
색으로만 정보를 구분한다
빨강·초록 구분이 어려운 사용자가 있습니다. 오류·성공 표시는 색과 함께 아이콘이나 글자를 붙이세요.
자주 묻는 질문
HEX 색상 코드를 RGB 로 바꾸는 방법
두 자리씩 끊어 16진수를 10진수로 바꾸면 됩니다. #336699 는 33→51, 66→102, 99→153 이며, HEX 칸에 넣으면 RGB·HSL·CMYK 값이 함께 나옵니다.
명도 대비 4.5:1 은 무슨 뜻인가요?
(밝은 색의 상대 휘도 + 0.05) ÷ (어두운 색의 상대 휘도 + 0.05) 가 4.5 이상이라는 뜻입니다. 웹 접근성 지침 WCAG 에서 일반 크기 글자의 AA 기준입니다.
사진에서 색을 뽑아낼 수 있나요?
이미지에서 추출 칸에 JPG·PNG·WebP 파일(10MB·2,000만 픽셀 이하)을 올리면 대표 색 다섯 개를 팔레트에 넣습니다. 이미지는 서버로 보내지 않습니다.
저장한 팔레트는 다른 컴퓨터에서도 보이나요?
보이지 않습니다. 팔레트 저장은 이 브라우저에만 남고 팔레트 파일을 다시 불러오는 기능은 없으니, 다른 기기에서는 CSS 복사나 JSON 다운로드로 받아 둔 HEX 값을 입력하세요.
보색은 어떻게 정하나요?
HSL 색상환에서 기준 색의 색상 각도에 180° 를 더한 색이 보색입니다. 보색 규칙을 고르면 기준 색과 그 보색으로 팔레트를 짭니다.
입력한 데이터는 어디에서 처리하나요?
이 도구의 입력 데이터는 브라우저에서 처리하며 도구 기능을 위해 서버로 업로드하지 않습니다. 결과를 공유하기 전 민감한 정보가 없는지 확인하세요.