Ease Colors

컬러 휠

하나의 색상에서 보색·유사색·트라이어드 등을 생성하고 CSS·Tailwind v4·SVG·PNG로 내보내세요.

팔레트

베이스 컬러 단계

색채 이론 가이드

휠을 이해하고, 규칙을 멋지게 깨뜨리세요

휠은 색상을 원 위에 배치해 관계를 공간적으로 보여줍니다. 거리는 대비, 인접은 안정감을 의미합니다. 아래는 모두 인터랙티브입니다 — 위의 휠을 바꾸면 이해가 빨라집니다.

이 휠 사용법

  1. 하모니 선택 — 팔레트의 기하학(반대, 이웃, 삼각형…).
  2. 디스크 위 점 드래그 — 각도는 색상, 중심からの 거리는 채도.
  3. 바깥 명도 링 드래그 — 배경·텍스트·강조색용.
  4. 형식에 맞춰 값을 복사하고 CSS·Tailwind 토큰으로 내보내기.

팁: 모든 결과는 공유 가능 — URL에 베이스 색상·하모니·명도가 저장됩니다.

여섯 가지 하모니

보색 — 반대 쌍
최대의 긴장감. 한쪽은 강조에만, 다른 쪽이 주도하게.
분할 보색 — 베이스＋반대색의 양옆
선명하면서 관대함. 브랜드 팔레트의 기본값으로 훌륭.
유사색 — 이웃 셋
차분하고 일관됨. 액션이 필요한 곳에만 보색 강조.
트라이어드 — 120° 삼각형
대담하고 균형적. 한 색이 UI의 약 60%를 차지하게.
테트라드 — 보색 쌍 둘
풍부하지만 복잡. 네 번째 색 전에 위계를 정할 것.
스퀘어 — 90° 네 모서리
전 방향 균등한 에너지. 표면별 엄격한 규칙과 함께.

셰이드·틴트·톤

인터페이스에 단일 색상은 부족합니다. 검정을 섞어 셰이드(헤더·호버), 흰색으로 틴트(배경·모달), 회색으로 톤(차분한 텍스트·테두리)을 만드세요.

인디고의 셰이드→틴트. 위 팔레트에도 같은 원리가 적용됩니다.

원색·2차색·3차색

전통 RYB에서 빨강·노랑·파랑은 원색이며, 섞으면 주황·초록·보라가 됩니다. 화면에서는 빛(RGB)을 섞으므로 이 도구는 HSL/HSV로 계산합니다 — 픽셀에 맞춘 같은 원입니다.

Twelve stops around the disc; every other color contains a trace of a primary.

무료 온라인 컬러 휠, 컬러 피커 및 팔레트 생성기

Ease Colors는 브라우저를 떠나지 않고 믿을 수 있는 색이 필요한 디자이너와 개발자를 위한 무료 온라인 컬러 휠입니다. 인터랙티브 휠 피커에서 베이스 컬러를 고르고, 여섯 가지 하모니를 한 번에 미리 본 뒤, 프로덕션용 HEX·RGB·HSL·OKLCH 코드를 복사하세요. 업로드는 없고, 계정 생성도 없으며, 모든 결과에는 베이스 컬러와 하모니, 명도를 정확히 복원하는 공유 URL이 발급됩니다. 내장 셰이드 램프가 각 베이스 컬러를 밝은 틴트부터 어두운 셰이드까지 펼치고, 페이지 전체를 키보드로 조작할 수 있으며 모든 단계에서 포커스가 보입니다.

컬러 휠이란?

컬러 휠은 색상을 원형으로 배열해 관계를 공간적으로 보여주는 원형 컬러 차트입니다. 이웃한 색은 차분하고, 마주 보는 색은 긴장을 만듭니다. 미술 시간에 배우는 고전적인 삼원색 휠은 빨강과 노랑, 파랑 물감을 섞지만, 화면의 RGB 휠은 빛을 섞습니다. 이 도구는 모든 하모니를 안료가 아닌 픽셀에 최적화된 HSV/HSL 색공간에서 계산합니다. 디스크의 점을 드래그해 색상을 정하고, 가장자리로 당겨 채도를 올린 뒤, 바깥 명도 링을 돌려 하나의 색상을 밝은 배경부터 어두운 텍스트까지 운반하세요. 디스크는 항상 최대 선명도로 그려지므로, 거의 검은색이나 거의 흰색 팔레트에서도 마커가 흩어진 채 드래그 가능하며 양 극단에서 형태가 무너지지 않습니다.

이 온라인 컬러 휠 사용법

이 온라인 컬러 휠은 본격적인 온라인 컬러 피커이자 컬러 도구입니다:

  1. HEX 값을 입력하거나 시스템 피커를 열거나 화면의 아무 픽셀이나 샘플링하세요.
  2. 유사, 보색, 분할보색, 삼각, 사각, 정사각 하모니 중 선택하거나, 2색에서 8색까지 커스텀 목록을 직접 편집하세요.
  3. 바깥 링으로 명도를 다듬고 각 스워치를 HEX 값과 RGB, HSL, OKLCH로 읽으세요.
  4. 코드를 복사하고, SVG와 PNG를 다운로드하거나, CSS와 Tailwind 토큰을 내보내세요.

방향을 탐색 중이라면 컬러 팔레트 갤러리의 Shuffle 버튼으로 400개 이상의 엄선 세트에서 랜덤으로 뽑아보세요.

출시 전에 색각 시뮬레이션으로 적색맹과 녹색맹, 청색맹, 전색맹을 미리 보고, 자동 대비 라벨로 각 스트립의 글자를 읽기 쉽게 유지하세요.

완벽한 컬러 피커:HEX, RGB, HSL, OKLCH

이 페이지의 모든 컬러 피커는 네 가지 형식을 지원합니다. HEX 필드는 #EDEA37 같은 코드를 받고, RGB 피커는 rgb(99, 102, 241) 같은 값을 읽으며, HSL과 OKLCH는 RGB만으로 닿지 않는 지각적 균일성을 채웁니다. 프론트엔드 팀은 바로 쓰는 HTML 컬러 피커와 CSS 컬러 피커 워크플로를 얻습니다. CSS 변수와 Tailwind v4 테마 토큰, Tailwind v3 설정 객체, Figma JSON 또는 코드만을 내보내세요. 내장 화면 스포이트(EyeDropper)는 모니터의 어떤 픽셀이든 가져오고, 선택 휠의 점은 어떤 명도에서도 드래그할 수 있습니다. 이 온라인 컬러 피커는 무료이며, 알파 지원 내보내기가 모든 RGBA 용도를 채웁니다. 커스텀 모드에서는 생성된 세트를 직접 편집하는 목록에 고정할 수 있습니다. 스워치를 밝게 또는 어둡게 하고, 드래그로 순서를 바꾸고, 혼합 중간색을 넣거나 끝을 늘리세요. 모든 편집은 공유 URL에 즉시 반영됩니다.

이미지에서 컬러 피커

사진가와 브랜드 디자이너는 현실에서 팔레트를 빌리기 위해 이미지 컬러 피커를 사용합니다. 사진을 업로드하거나 이미지 URL을 붙여넣으면 이미지 피커가 픽셀 격자 십자선 루페를 보여줘, 800% 줌에서도 가리킨 정확한 픽셀을 읽습니다. 색상을 잠그고 HEX와 RGB, HSL, OKLCH로 복사해 원클릭으로 휠에 보내세요. 추출 팔레트 크기를 2색에서 10색까지 조절하고, 스트립을 PNG로 다운로드하거나 브라우저 보관함에 저장해 나중에 다시 여세요. 여는 모든 이미지는 기기에 머물며 업로드되지 않습니다.

팔레트 생성기와 이미지에서 팔레트

스워치 하나로 부족할 때 컬러 팔레트 생성기가 몇 초 만에 쓸 수 있는 이미지 속 팔레트를 만듭니다. 빈도와 채도로 픽셀에 점수를 매기고 거의 같은 색을 걸러낸 뒤 승자를 색상 순으로 정렬합니다. 2색에서 10색까지 순서를 바꾸고 늘리고 지울 수 있습니다. 인물 보정가에게는 파스텔과 블루, 그린 컬렉션과 나란한 전용 스킨 컬러 세트가 마련되어 있습니다. 즐겨찾기를 브라우저 보관함에 저장하고, 어떤 컬러 팔레트든 PNG와 SVG로 다운로드해 전달용 토큰을 내보내세요. 드래그 가능한 노브는 채취 지점에서 이미지 위를 이동하므로, 색상을 다시 고르는 일은 추측이 아닌 드래그로 끝납니다.

추측 없는 보색

보색 휠은 180도 마주 보는 색상을 짝지어 최대 긴장을 만듭니다. 오렌지 대 블루, 바이올렛 대 옐로우입니다. 보색 스트립은 베이스 컬러를 검은 점으로 표시하므로, 지배 색상이 레이아웃을 이끄는 가운데 버튼과 링크용으로 남길 스워치가 정확히 보입니다. 스플릿과 삼각, 사각, 정사각 회전이 하모니 패널에 나란히 있어 부드럽게도 대담하게도 쓸 수 있습니다.

언더톤별 시즌 팔레트

갤러리에는 12가지 시즌 컬러 분석 시스템이 있으며 각각 17개 팔레트입니다. 따뜻하고 차분한 브리프는 소프트 오텀 팔레트에서, 차갑고 차분한 브리프는 소프트 서머 팔레트로 향합니다. 따뜻한 기운이 강한 오텀 세트는 가을 캠페인과 식품 브랜드에, 딥 윈터 팔레트는 럭셔리와 밤을 위해 거의 검은색 위에 보석 광채를 전합니다. 밝고 따뜻한 디자인은 라이트 스프링 팔레트에서, 산뜻한 미니멀은 쿨 서머 팔레트에서, 묵직한 다크는 딥 오텀 팔레트에서 가져옵니다. 얼음 같은 대비는 쿨 윈터 팔레트, 밝은 온기는 웜 스프링 팔레트, 부드러운 중간톤은 트루 서머 팔레트, 고요한 럭셔리는 뉴트럴 팔레트의 몫입니다. 더 넓은 여름과 겨울, 봄, 가을 분위기가 400개 넘는 세트를 채우며, 각 팔레트에서 HEX와 RGB, HSL, OKLCH를 원클릭으로 복사할 수 있습니다.

Adobe 컬러 휠의 무료 대안

Adobe color wheel이나 Adobe color picker, Canva color wheel, Google color picker를 검색해 오셨다면 일은 이미 아십니다. 하나의 브랜드 컬러를 균형 잡힌 세트로 바꾸는 것입니다. Ease Colors는 같은 영역을 다룹니다. 하모니와 HEX, RGB, HSL, OKLCH 코드, 이미지 샘플링, 팔레트 내보내기를 브라우저에서 무료로, 공유 URL과 함께, 계정 없이 제공합니다. 키보드 우선 조작과 스크린리더 라벨, 모션 감소 모드를 기본으로 갖췄습니다.

팔레트 질문과 답변

색상을 복사하려면?

스워치를 클릭하세요. 복사 전에 HEX·RGB·HSL·OKLCH 형식을 전환할 수 있습니다.

팔레트를 공유하려면?

“공유 링크 복사”를 누르세요. URL에 베이스 색상·하모니·명도가 저장됩니다.

상업적 이용도 무료인가요?

네. 생성된 모든 HEX·토큰·내보내기는 자유롭게 사용할 수 있습니다.

컬러 휠 질문과 답변

컬러 휠이란?

컬러 휠은 색상을 원형으로 배열해 관계를 공간적으로 보여주는 도표입니다. 이웃한 색은 차분하고, 마주 보는 색은 긴장을 만듭니다. 미술 시간에는 물감을 섞는 빨강-노랑-파랑 휠을 배우고, 화면은 빛을 섞는 RGB 휠을 씁니다. 디자이너는 베이스 컬러 선택과 하모니 구성, 레이아웃에 쓰기 전 대비 확인에 씁니다.

컬러 휠 사용법은?

베이스 컬러 하나부터 시작하세요. HEX 코드 입력과 시스템 피커, 화면 샘플링 중 편한 방법으로 고릅니다. 유사나 보색, 삼각 같은 하모니를 고른 뒤 바깥 링으로 명도를 다듬어 배경과 텍스트, 강조 톤을 맞춥니다. 각 스워치를 HEX와 RGB, HSL, OKLCH로 복사해 CSS와 Tailwind, Figma에 붙여넣으세요.

컬러 휠의 주 목적은?

주 목적은 색 조합에서 추측을 없애는 것입니다. 눈대중으로 짝짓는 대신 형태를 읽습니다. 거리는 대비, 가까움은 차분함을 뜻합니다. 이렇게 모든 인터페이스에 분명한 위계가 생깁니다. 지배 색상 하나와 조연 몇 개, 남겨둔 강조 하나로 버튼과 링크, 제목이 눈이 기대하는 자리에 놓입니다.

주요 색 구성 8종은?

디자인 문헌은 보통 여덟 가지를 듭니다. 모노크로매틱(한 색상의 여러 명도)과 유사(이웃), 보색(마주봄), 분할보색(베이스와 그 반대편의 양 이웃), 삼각(삼각형), 사각형의 사각(두 보색 쌍), 정사각(네 모서리), 무채색과 뉴트럴(검정과 흰색, 회색)입니다. 이 도구는 여섯 가지를 직접 다루고, 2색에서 8색까지 직접 편집 목록용 커스텀 모드도 갖췄습니다.

컬러 휠에서 색을 고르는 법은?

디스크의 점을 드래그하세요. 각도가 색상, 중심에서의 거리가 채도를 정합니다. 바깥 링으로 색상과 채도를 건드리지 않고 명도를 정하세요. 정확한 HEX 값을 치거나 시스템 컬러 박스를 열거나, 화면 스포이트로 모니터의 아무 픽셀이나 고를 수도 있습니다. 어떤 방법이든 같은 공유 베이스 컬러에 닿습니다.

컬러 피커의 목적은?

컬러 피커는 눈으로 고른 선택을 정확하고 재사용 가능한 값으로 바꿉니다. 어떤 색이든 HEX와 RGB, HSL, OKLCH 코드로 읽어 디자이너와 개발자가 같은 언어를 쓰게 합니다. 클릭한 것이 CSS와 Tailwind 토큰, Figma 스타일에 닿는 비트와 같아 눈대중 근사가 필요 없습니다.

컬러 피커 종류에는 무엇이 있나?

주요 종류는 휠과 디스크형(한눈에 색상과 채도), 슬라이더형(RGB와 HSL 채널), HEX 입력란(직접 값), 스포이트와 화면형(모니터를 가져옴), 이미지형(사진 위 루페), 팔레트 모음(여기의 400개 이상 갤러리 같은 엄선 세트)입니다. 이 사이트는 여섯을 모두 한 흐름에 합쳤습니다.

컬러 코드란?

컬러 코드는 하나의 색을 정확히 나타내는 텍스트 값입니다. HEX는 16진수 여섯 자리(#EDEA37), RGB는 빨강과 초록, 파랑 채널, HSL은 색상과 채도, 명도, OKLCH는 같은 숫자 간격이 똑같이 다르게 보이는 새 지각적 형식입니다. 넷은 같은 스워치를 나타내며 형식만 읽고 고치는 법을 바꿉니다.

컬러 피커 사용법은?

휠과 슬라이더, HEX란, 화면 스포이트로 색을 고르고 용도 형식으로 복사하세요. 웹용 HEX와 앱 코드용 RGB와 RGBA, 빠른 손질용 HSL, 지각적 균일용 OKLCH입니다. 값을 스타일시트와 Tailwind 설정, 디자인 도구에 붙이고 링크를 저장하면 정확한 색으로 나중에 원클릭에 돌아옵니다.

컬러 팔레트의 목적은?

컬러 팔레트는 제품의 모든 화면을 같은 시각 언어로 묶습니다. 배경과 텍스트, 강조, 상태에 역할을 주어 모아놓은 느낌이 아닌 일관된 인터페이스로 만듭니다. 좋은 팔레트는 대비와 위계를 처음부터 넣어 가독성 손질이 줄고 강하고 각인되는 브랜드가 됩니다.

컬러 팔레트 종류에는 무엇이 있나?

주요 종류는 휠 형태의 모노와 유사, 보색 팔레트와 기세로 정해지는 파스텔과 네온, 피부 언더톤별 시즌(소프트 오텀부터 뉴트럴까지), 기업 색에 고정한 브랜드물, 사진에서 가져온 추출물입니다. 여기의 갤러리는 모두 모아 60개 넘는 범주에 400개 넘는 세트를 갖췄습니다.

컬러 팔레트 고르는 법은?

분위기에 맞는 베이스 컬러 하나부터 시작하세요. 따뜻하고 차분하거나 차갑고 탁 트이거나 어둡고 극적 샛 중에서 고릅니다. 하모니로 넓히고 본문 대비와 버튼 강조, 적색맹과 녹색맹, 청색맹 시뮬레이션으로 사용자 눈으로 검증하세요. 셋을 넘기면 링크를 공유하고 공개하세요.