색상 팔레트 생성기 — 처음부터 또는 사진으로 조화로운 팔레트 만들기

스페이스바를 눌러 새 팔레트를 만들고, 마음에 드는 색은 잠그고, 색 조합을 고르거나 사진에서 팔레트를 추출하세요. CSS, Tailwind, SCSS, JSON, PNG로 내보낼 수 있습니다.

또는 스페이스바를 누르세요

색 조합색상 수

(38, 70, 83)
(197, 37%, 24%)

(42, 157, 143)
(173, 58%, 39%)

(233, 196, 106)
(43, 74%, 66%)

(244, 162, 97)
(27, 87%, 67%)

(231, 111, 81)
(12, 76%, 61%)

색상 견본을 클릭하면 선택되고, 자물쇠를 누르면 생성할 때 유지되며, 연필을 누르면 새 색을 고르고, 코드를 누르면 복사됩니다.

색상 1(HEX)

rgb(38, 70, 83)
hsl(197, 37%, 24%)
글자: 흰색

모든 값

HEX	RGB	HSL
#264653	rgb(38, 70, 83)	hsl(197, 37%, 24%)
#2a9d8f	rgb(42, 157, 143)	hsl(173, 58%, 39%)
#e9c46a	rgb(233, 196, 106)	hsl(43, 74%, 66%)
#f4a261	rgb(244, 162, 97)	hsl(27, 87%, 67%)
#e76f51	rgb(231, 111, 81)	hsl(12, 76%, 61%)

내보내기

:root {
  --color-1: #264653;
  --color-2: #2a9d8f;
  --color-3: #e9c46a;
  --color-4: #f4a261;
  --color-5: #e76f51;
}

이미지에서 팔레트 추출

사진을 업로드하면 주요 색상을 잠기지 않은 견본에 채웁니다. 그런 다음 이미지 아무 곳이나 클릭하면 정확한 픽셀 색상을 선택한 견본(색상 1)에 넣습니다. 이미지는 기기에만 남습니다.

이미지 선택…

팔레트는 브라우저에서 생성되며, 업로드한 이미지는 기기를 떠나지 않습니다. 모든 무료 도구 보기.

문제를 발견하셨거나 개선할 점이 있나요? 모든 메시지를 읽고 빠르게 고칩니다.

이 무료 색상 팔레트 생성기는 서로 잘 어울리는 색 2~10개 세트를 만들어 줍니다. 스페이스바(또는 생성 버튼)를 누르면 새 팔레트가 나오고, 남기고 싶은 견본을 잠근 뒤 나머지가 어울릴 때까지 다시 생성하면 됩니다. 유사색, 보색, 3색 조화 같은 색 조합을 고르거나, 사진을 업로드해 주요 색을 바로 팔레트로 가져올 수도 있습니다. 모든 견본에 HEX, RGB, HSL 값과 그 위에서 읽기 좋은 텍스트 색(검정 또는 흰색)이 표시됩니다.

대부분의 생성기는 HSL에서 색조를 회전시키는데, HSL의 명도는 색이 실제로 얼마나 밝아 보이는지와 관계가 없어서 노란색은 눈부시고 파란색은 가라앉는 팔레트가 나옵니다. 이 도구는 같은 명도가 같은 밝기로 보이는 지각 색 공간인 OKLCH에서 배색을 계산한 다음, 명도를 고르게 분산해 모든 팔레트에 텍스트, 배경, 강조색으로 실제 쓸 수 있는 어두운 톤, 중간 톤, 밝은 톤이 들어가게 합니다. 팔레트가 브랜드에 맞는지는 알려 줄 수 없습니다. 그건 여전히 직접 판단하셔야 하며, 아래 링크한 색상 대비 검사기로 어떤 색 조합이 읽기 좋은지 확인할 수 있습니다.

사용 방법

스페이스바나 생성 버튼을 눌러 팔레트를 만드세요. −와 +로 색 개수를 2~10개 사이에서 고르세요.
메뉴에서 색 조합을 고르세요. 무작위(조화로운)는 다양하면서도 균형 잡힌 세트를, 나머지는 고전적인 색상환 규칙을 따릅니다.
마음에 드는 견본의 자물쇠를 클릭한 뒤 계속 생성하세요. 잠긴 색은 그대로 남고, 배색은 첫 번째로 잠긴 색을 기준으로 다시 만들어집니다.
연필 아이콘을 클릭해 직접 색을 고르거나, 색상 띠 아래 편집기에 HEX 값을 입력하세요. 사진으로 시작하려면 이미지에서 팔레트 추출에서 사진을 업로드하고 이미지를 클릭해 정확한 픽셀 색을 샘플링하세요.
팔레트를 CSS 변수, Tailwind 설정, SCSS, JSON으로 내보내거나 PNG로 다운로드하거나 공유 링크를 복사하세요.

자주 묻는 질문

색상 팔레트는 어떻게 만드나요?

이 페이지에서 스페이스바를 누르세요. 누를 때마다 선택한 색 조합으로 새 팔레트가 만들어집니다. 마음에 드는 색이 나오면 자물쇠로 잠그고 계속 누르세요. 잠기지 않은 견본만 바뀌고, 새 색은 잠긴 색과 어울리도록 선택됩니다. 웹사이트에는 색 5개가 무난합니다. 텍스트용 어두운 색 하나, 배경용 밝은 색 하나, 메인 색, 보조 색, 강조색입니다.

보색, 유사색, 3색 조화란 무엇인가요?

색상환에서의 위치를 뜻합니다. 보색은 서로 정반대(180도)에 있어 대비가 가장 강합니다. 유사색은 약 30도 간격의 이웃한 색으로 차분하고 통일감이 있습니다. 3색 조화는 120도 간격의 세 색이고, 분할 보색은 기준 색과 그 보색 양옆의 두 색(150도와 210도)을, 4색 조화(정사각형)는 90도 간격의 네 색을 씁니다. 단색 배색은 한 색조를 유지하고 명도와 채도만 바꿉니다.

이미지에서 색상 팔레트를 추출할 수 있나요?

네. 이미지에서 팔레트 추출에서 사진을 업로드하세요. 도구가 사진을 최대 200픽셀로 줄여 노이즈를 평균화하고, OKLab 색 공간에서 k-평균 군집화로 픽셀을 묶으므로 결과가 단순한 픽셀 수가 아니라 눈에 보이는 색을 반영합니다. 가장 큰 군집이 잠기지 않은 견본을 채우며, 각 색이 이미지에서 차지하는 비율도 표시됩니다. 이미지의 아무 곳이나 클릭하면 정확한 픽셀 하나를 선택한 견본으로 가져옵니다. 이미지는 브라우저를 벗어나지 않습니다.

팔레트를 CSS나 Tailwind에서 어떻게 쓰나요?

CSS 변수 내보내기를 선택해 :root 블록을 스타일시트에 붙여 넣은 다음 var(--color-1) 식으로 색을 쓰세요. Tailwind 내보내기는 palette-1부터 palette-N까지 추가하는 theme.extend.colors 블록이라 bg-palette-1이나 text-palette-3처럼 쓸 수 있습니다. 각 색의 용도를 정했다면 변수 이름을 역할(primary, surface, text)로 바꾸세요. color-3 같은 이름은 리디자인을 견디지 못합니다.

이 생성기는 왜 HSL 대신 OKLCH를 쓰나요?

HSL 명도는 지각되는 밝기가 아니기 때문입니다. HSL에서 순수한 노랑과 순수한 파랑은 둘 다 명도 50%지만, 노랑은 밝은 회색만큼 밝아 보이고 파랑은 거의 검정처럼 보입니다. 그래서 HSL에서 색조를 회전시키면 밝기 균형이 맞지 않는 세트가 나옵니다. CSS Color Level 4에 정의되어 현재 모든 브라우저가 지원하는 OKLCH는 명도, 채도, 색조를 분리하므로 색조를 회전해도 체감 밝기가 그대로 유지됩니다. sRGB 범위를 벗어나는 색은 색조와 명도는 유지한 채 채도를 낮춰 범위 안으로 되돌립니다.

팔레트를 공유하거나 저장할 수 있나요?

공유 링크를 복사하세요. 주소에 색상이 들어 있어(예: ?colors=264653-2a9d8f-e9c46a) 링크를 연 사람은 누구나 같은 팔레트를 보며, 북마크해 둘 수도 있습니다. 서버에는 아무것도 저장되지 않습니다. 무드보드나 클라이언트 이메일용으로 HEX와 RGB 값이 표시된 견본 PNG를 다운로드할 수도 있습니다.

팔레트를 실제로 쓸 수 있는 UI 색상 체계로 바꾸기

예쁜 색 5개로 된 팔레트가 곧 디자인 시스템은 아닙니다. 사이트에 필요한 것은 역할입니다. 배경 대비 명암비가 4.5:1 이상인 텍스트 색, 배경색과 카드용으로 약간 다른 표면색, 버튼과 링크용 메인 색 하나, 아껴 쓰는 강조색 하나입니다. 인테리어 디자인의 60-30-10 법칙이 좋은 출발점입니다. 약 60%는 중립적인 배경, 30%는 보조 색, 10%는 강조색입니다.

• 텍스트: 가장 어두운 색, 또는 메인 색조를 살짝 띤 검정에 가까운 색. 순수한 #fff 위의 순수한 #000은 필요 이상으로 강렬합니다.

• 배경과 표면: 가장 밝은 색 한두 개. 생성된 팔레트에 대부분 하나쯤 있으며, 없다면 메인 색을 잠그고 단색으로 바꿔 밝은 틴트를 만드세요.

• 메인 색: '클릭하세요'라고 말하는 색. 그 위의 흰색이나 검정 텍스트가 4.5:1을 넘는지 확인하세요(각 견본의 읽기 좋은 텍스트 색은 빠른 1차 점검이고, 실제 확인은 색상 대비 검사기로 하세요).

• 강조색: 가장 채도가 높은 색으로, 넓은 영역이 아니라 하이라이트와 배지에 씁니다.

그다음 새 색조를 추가하지 말고 메인 색의 틴트와 셰이드(호버 배경용으로 더 밝게, 눌린 상태용으로 더 어둡게)를 만드세요. 메인 색을 잠그고 단색으로 바꾼 뒤 색 개수를 7~10개로 하면 그런 단계별 색이 만들어집니다.

색 조합별 쓰임새

• 유사색: 이웃한 색조. 차분하고 자연스러우며 실패하기 어렵습니다. 콘텐츠 사이트, 웰니스·식품 브랜드에 좋습니다. 텍스트용으로 대비되는 중립색이 필요합니다.

• 단색: 한 색조에 여러 명도 단계. 색이 데이터와 경쟁하지 않고 받쳐 줘야 하는 대시보드와 앱에 가장 안전한 선택입니다.

• 보색: 정반대의 두 색조. 대비와 에너지가 최대입니다. 하나를 메인 색으로, 다른 하나는 행동 유도 버튼에만 쓰세요. 그러지 않으면 스포츠 유니폼처럼 보입니다.

• 분할 보색: 한 색조와 그 보색 양옆의 두 색조. 보색만큼 생동감 있으면서 긴장감은 덜해, 마케팅 사이트에 무난한 기본 선택입니다.

• 3색 조화·4색 조화: 고르게 배치된 세 가지 또는 네 가지 색조. 경쾌하고 밝아 어린이 제품, 게임, 일러스트에 어울립니다. 한 색조를 주로 쓰고 나머지는 작게 쓰세요.

• 무작위(조화로운): 견본마다 색조가 20~70도씩 이동하고 명도는 세트 전체에 분산됩니다. 규칙을 정하기 전에 탐색하기 좋습니다.

이미지에서 색을 추출하는 방법

업로드한 이미지는 긴 변이 200픽셀 이하인 캔버스에 그려집니다. 축소하면 이웃 픽셀이 평균화되어, 그대로 두면 거의 같은 색을 수십 개 만들어 낼 JPEG 노이즈와 세밀한 질감이 사라집니다. 완전히 투명한 픽셀은 무시합니다.

남은 픽셀은 OKLab으로 변환되어 k-평균 군집화로 묶이며, k는 견본 개수입니다. 시작 중심은 고정 규칙으로 정합니다(이미지 평균 색에 가장 가까운 픽셀, 그다음부터는 기존 모든 중심에서 가장 먼 픽셀을 반복 선택). 그래서 같은 이미지는 항상 같은 팔레트를 주고, 초록 풍경 속 빨간 재킷처럼 작지만 뚜렷한 영역도 놓치지 않습니다. 각 군집의 평균이 견본이 되며, 이미지에서 차지하는 비율 순으로 정렬됩니다.

추출은 이미지에 실제로 있는 색을 찾을 뿐, 디자인에 쓰고 싶은 색을 찾아 주지는 않습니다. 사진은 차분한 중간 톤이 대부분이므로, 이미지를 잘 담은 색 한두 개를 잠그고 나머지를 생성하거나, 이미지를 클릭해 특정 하이라이트 색을 샘플링하세요.