색상 선택기 및 색상환

가장 가까운 색상명: dodgerblue
흰색 배경 3.31:1 (AA Large) · 검은색 배경 6.35:1 (AA)

색상 조화

보색
유사색
삼색 조화
분할 보색
사색 조화
단색 조화
컬러 피커 결과 미리보기

이미지에서 색상 선택기 - HEX 및 RGB 색상 코드 얻기

픽셀을 선택하여 HEX, RGB 및 HSL 값을 읽거나 주요 팔레트를 JSON 또는 CSS 변수로 내보냅니다.

이미지 드롭 - 코드의 픽셀을 클릭하거나 전체 팔레트를 추출합니다.

PNG, JPG, WEBP, GIF

컬러 피커로 할 수 있는 일

시작하기 전에 주요 기능을 검토하세요.

  • 사진에서 HEX, RGB 또는 HSL 색상을 선택하세요.
  • 이미지에서 주요 색상 팔레트 추출
  • 스크린샷이나 로고에서 브랜드 색상을 잡아보세요
  • 디자인의 색상 코드 복사
  • 팔레트를 JSON 또는 CSS 변수로 내보내기
  • 참조 사진에서 색 구성표 만들기

설정 참고

컬러 피커에 사용 가능한 제어 기능입니다.

처리 방식프리셋
입력 하나를 처리하거나 Premium 일괄 처리 모드에서 여러 입력에 같은 설정을 적용하세요. 입력할 수 있는 자료의 종류는 도구마다 다릅니다.옵션: 단일 이미지일괄 처리

색상 선택기 및 색상환

무작위원클릭
클릭 한 번으로 새로 섞인 색상으로 바꿔 빠르게 영감을 얻습니다. HEX, RGB, HSL 값과 배색 팔레트가 모두 함께 업데이트됩니다.
채도와 밝기슬라이더범위: 0–100%
사각형 안에서 마커를 움직여 색이 얼마나 선명한지(좌우)와 얼마나 밝거나 어두운지(위아래)를 설정하세요.
색조슬라이더범위: 0–360 · 기본값: 211
무지개 막대를 밀어 기본 색조를 고르세요. 빨강에서 노랑, 초록, 파랑, 마젠타를 거쳐 다시 빨강으로 이어집니다.
HEX텍스트 입력
HEX 코드, rgb() 또는 hsl() 표기, CSS 색 이름 — 어떤 색 값이든 입력하거나 붙여 넣으면 그 색으로 곧바로 이동합니다.
RGB숫자입력범위: 0–255
디자인 가이드의 RGB 값을 정확히 맞춰야 할 때 빨강, 초록, 파랑 채널을 0부터 255까지 각각 설정합니다.
HSL숫자입력범위: 0–360
색상(0–360)과 채도·명도(0–100)를 숫자로 조정합니다 — 색조는 그대로 두고 색을 더 밝게 하거나 차분하게 다듬을 때 유용합니다.

주요 색상 팔레트

크기드롭다운
업로드한 이미지에서 추출할 대표 색상 개수를 정합니다(기본값 8). 깔끔한 브랜드 팔레트를 원하면 적게, 포인트 색조까지 끌어내려면 많게 설정하세요.옵션: 58101624
선택한 색상색상 선택기
업로드한 사진의 아무 곳이나 클릭하거나 탭하면 해당 픽셀의 색을 그대로 추출합니다. 선택할 때마다 HEX, RGB, HSL 값이 담긴 색상 견본이 추가되며, 하나씩 또는 한 번에 모두 삭제할 수 있습니다.
무료 이용 · 회원가입 불필요 · 워터마크 없음업로드는 전송 중에 암호화됩니다.보관 정책에 따라 삭제됨

자주 묻는 질문

컬러 피커가 작업을 완수하도록 돕는 방법

비즈니스, 크리에이터, 일상 업무의 실제 문제를 매일 해결합니다. 귀하에게 적합한 사용 사례를 찾아 시작해보세요.

크리에이터용

브랜드 정체성 점검

기존 로고나 마케팅 자료에서 정확한 HEX 값을 추출해 스타일 가이드에 반영하세요. 포지셔닝 자료나 피칭을 위해 경쟁사 브랜드 색상을 맞춰보세요.

크리에이터용

웹 디자인 팔레트 구성

사진이나 무드보드에서 주요 색상을 추출해 CSS 변수로 내보낸 뒤 스타일시트에 바로 넣으세요. 5~8가지 색이 가장 적당하며, 기본색, 강조색, 중성색까지 아우르는 완전한 디자인 시스템의 출발점이 됩니다.

이커머스용

전자상거래 제품 목록

제품 사진의 배경색을 스토어 테마에 맞추세요. 운동화나 드레스 사진에서 주요 강조색을 골라 상품 페이지의 포인트 하이라이트로 활용하세요.

개인용

인테리어 및 패션 영감

마음에 드는 공간이나 옷차림을 찍어 팔레트를 추출하세요. 추출한 색을 기준으로 기존 색감과 어울리는 페인트, 원단, 소품을 고를 수 있어 — 시각적 영감을 실제로 활용 가능한 색상 견본으로 바꿔 줍니다.

개발자용

데이터 시각화 색 구성

연출하고 싶은 이미지(예: 부드러운 차트를 위한 수채화, 따뜻한 색에서 차가운 색으로의 그라데이션을 위한 노을)에서 추출한 10~16색의 범주형 팔레트를 생성하세요. 일반적인 색상을 고르는 것보다 훨씬 낫습니다.

크리에이터용

게임 및 UI 에셋 워크플로

스프라이트 아트나 UI 목업에서 인덱싱된 색상 팔레트를 추출해 픽셀 아트 도구나 게임 엔진에 넣으세요. JSON 팔레트 내보내기는 Aseprite, Photoshop 및 대부분의 에셋 파이프라인과 연동됩니다.

개발자용

출시 전 WCAG 대비 검사

독립형 Color Picker & Wheel에서 텍스트와 배경 색상 조합을 조정하고 흰색·검은색 대비 명암비를 즉시 확인하여, AA/AAA 접근성 실패를 프로덕션에 도달하기 전에 잡아내세요.

크리에이터용

맞춤 페인트 및 인쇄 색상 정밀 조정

사진을 아예 건너뛰고 정확한 HEX, RGB, HSL 값을 입력하거나 채도/색조 컨트롤을 드래그해 특정 페인트 배합, 별색, 브랜드 톤을 정한 다음, 가장 가까운 이름이 있는 색상을 확인해 공급업체와 쉽게 소통하세요.

크리에이터용

사진 한 장으로 만드는 다지점 색상 보드

하나의 참조 사진에서 여러 지점 — 하늘, 드레스, 꽃 — 을 클릭하여 자동 추출된 주요 팔레트에 의존하는 대신 엄선된 다색 견본 세트를 만든 다음, 클라이언트 무드 보드용으로 JSON 또는 CSS로 내보내세요.

마케팅

즉석 브랜드 색상 조화 세트

소셜 템플릿이나 광고 팔레트에서 검토할 보완, 삼중 및 분할 보완 견본을 계산하려면 브랜드 HEX 코드를 입력하세요.

웹 및 SEO

경쟁사 스크린샷에서 디자인 토큰 팔레트 추출

사진 대신 경쟁사 웹사이트나 앱의 스크린샷을 업로드하면, 주요 팔레트 추출기가 정확한 배경, 강조, 텍스트 색상을 CSS 변수로 내보낼 수 있는 HEX 코드로 뽑아냅니다. 시안이나 피치 덱을 위해 색 배합을 역설계하는 빠른 방법입니다.

각 변화를 확인하세요

모든 사진이 원본 그대로 슬래시를 지나 반대편에서 완성된 결과물로 나옵니다.