컬러 팔레트 생성기

생성기
简 繁 BM BI 日本語 한국어 ไทย EN
공유:
작성 출처 대조 검토 , Founder & Architect, RECATOOLS 처음 공개 최근 수정 최근 검토

조화로운 5색 팔레트를 한 번에 생성하세요——랜덤·보색·유사색·삼각 배색·단색 중에서 고를 수 있습니다. 마음에 드는 색은 잠그고 나머지만 다시 섞고, HEX 코드를 클릭해 복사하고, 멋진 팔레트 카드도 내보낼 수 있습니다. 브라우저만으로, 즉시 생성.

RT-FUN-091 · Fun & Misc
브라우저가 오래되어 이 도구의 기능이 작동하지 않습니다. Safari 13.1, Chrome/Edge 80, Firefox 74 이상으로 업데이트해 주세요.

컬러 팔레트 생성기

(또는 스페이스바)

대비 확인(WCAG 2.2)

 

색HEXrgb()hsl()흰색 대비검정 대비
     
     
     
     
     

모든 조합, 대비가 높은 순

  1. Aa
  2. Aa
  3. Aa
  4. Aa
  5. Aa
  6. Aa
  7. Aa
  8. Aa
  9. Aa
  10. Aa

수치는 WCAG 2.2 대비율이며 내림해 표시합니다(4.5:1로 보이면 실제로 4.5:1 이상). 본문은 4.5:1(AA) 또는 7:1(AAA), 큰 글자(18pt 또는 굵은 14pt)는 3:1이 기준입니다. 배색 방식은 색상 관계만 정할 뿐 대비를 보장하지 않습니다. 색상환에서 정반대인 두 색도 휘도가 거의 같을 수 있습니다.

Advertisement
After tool · AD-W1 Responsive

사용 방법

배색 방식 선택

「랜덤·보색·유사색·삼각 배색·단색」 중에서 고르세요. 각각 색 조화 규칙으로, 다섯 색 사이의 관계를 결정합니다.

「생성」을 누르거나 스페이스바

누를 때마다 새로운 조화 배색이 만들어집니다. 마음에 안 들면 다시 누르거나, 스페이스바로 빠르게 다시 섞으세요.

잠금 + 복사

마음에 드는 색이 있나요? 그 색의 🔓를 눌러 잠그면 다음 생성 때도 그대로 유지됩니다. HEX 값(예: #E8622A)을 클릭하면 바로 복사되어 디자인에 붙여넣을 수 있습니다.

카드 저장 또는 공유

「팔레트 저장」으로 다섯 색을 HEX 값과 함께 이미지로 저장하거나, 「공유」로 동료·친구에게 보내고, PDF로도 내보낼 수 있습니다.

컬러 팔레트 생성기: 색채 이론으로 몇 초 만에 좋은 색을

디자인에서 색을 고르는 일은 흔히 막히는 단계입니다. 한 색만 보면 괜찮은데, 다섯 색을 모아놓으면 「따로 논다」. 이 생성기는 색 조화 뒤에 있는 규칙을 버튼 하나로 만들었습니다——아무 색 다섯 개를 던져주는 게 아니라, 색상환의 기하학에 따라 「본래 어울리는」 한 묶음을 구성합니다. 여러분은 마음에 드는 색을 고르고, 잠그고, 복사해 디자인에 바로 가져가기만 하면 됩니다.

다섯 가지 방식, 다섯 가지 관계

가장 많이 쓰이는 조화 규칙을 담았고, 각각 색상환 위의 한 가지 관계입니다. 단색——같은 색상에서 명도만 바꾸는, 가장 안전하고 시간을 타지 않는 배색. 유사색——색상환에서 이웃한 색들, 부드럽고 자연스러워 하나의 풍경 속 색 같은. 보색——색상환에서 정반대인 두 색, 대비가 강하고 시선을 끄는. 삼각 배색——등간격의 세 색, 선명하면서도 균형 잡힌. 랜덤——명도 폭은 지키되 색상은 풀어놓아 뜻밖의 영감을. 방식을 바꾸면 관계 전체가 함께 바뀝니다.

"좋은 배색은 끌어모은 것이 아니라, 관계로 배열된 것이다."

HEX란 무엇이고, 왜 어디서나 쓰일까

각 색 아래의 #E8622A 같은 문자열이 그 색의 HEX 코드입니다——웹, 디자인 소프트웨어, 거의 모든 디지털 도구에서 통용되는 색의 「신분증」. # 뒤에 16진수 여섯 자리가 붙어 빨강·초록·파랑 세 채널의 세기를 나타냅니다. 클릭해 복사한 뒤 CSS·Figma·슬라이드에 붙여넣으면 색이 정확히 일치합니다. 이 도구가 생성하는 모든 색에는 HEX가 따라와 바로 쓸 수 있습니다.

대비에 관한 한마디

예쁜 것을 넘어, 배색은 실제로 쓸 수 있어야 합니다. 글자와 배경 사이에는 충분한 대비가 있어야 내용이 읽힙니다(접근성 표준 WCAG는 본문에 최소 4.5:1을 권장). 카드의 HEX 라벨은 각 색의 밝기에 따라 검은 글자와 흰 글자를 자동으로 바꿔 가독성을 지킵니다——이 색을 글자나 배경으로 쓸 때는 대비를 꼭 확인하세요. 도구 전체가 브라우저 안에서 즉시 동작하며 아무것도 업로드하지 않습니다.

Advertisement
After how-to · AD-W2 Responsive

뉴턴의 일곱 칸 색상환, HEX의 1,677만 색, 그리고 HSL 명도가 오해를 부르는 이유

01

HEX 코드는 빨강·초록·파랑을 16진수로 표현하며 각 채널은 00–FF(0–255)——이론상 약 1,677만 가지 색을 나타낼 수 있습니다.

02

뉴턴의 『광학』(1704년 초판, 제1권 제2부 명제 6)은 빨강에서 보라까지 일곱 색으로 나눈 원을 그리고, 각 호의 길이를 음계의 음정 비율에 맞췄습니다. 이 도구가 돌리는 색상환의 조상입니다.

03

사람의 눈은 초록에 가장 민감하며, 그래서 휘도 공식에서 초록의 가중치가 가장 높고(약 0.72) 빨강(0.21)과 파랑(0.07)을 크게 웃돕니다.

04

접근성 표준 WCAG는 저시력 사용자를 위해 본문과 배경의 대비를 최소 4.5:1(큰 글자는 3:1)로 요구합니다.

05

화면은 RGB(빛의 가산 혼합)를, 인쇄는 CMYK(잉크의 감산 혼합)를 씁니다. 같은 HEX라도 화면과 종이에서 조금 다르게 보일 수 있습니다.

06

이 도구가 HSL로 배색을 만드는 이유는 조화가 곧 색상 각도의 회전이기 때문입니다. 하지만 HSL 명도는 눈에 보이는 밝기가 아닙니다. CSS Color 4가 지적하듯 노랑 hsl(60 100% 50%)과 파랑 hsl(240 100% 50%)은 명도가 똑같이 50%인데 WCAG 상대 휘도는 0.93과 0.07입니다. 그래서 위의 대비 확인은 모든 조합을 직접 측정합니다.

자주 묻는 질문

  • 각 색 아래에 HEX 코드(예: #E8622A)가 표시됩니다. 클릭해 복사한 뒤 CSS·Figma·Photoshop·슬라이드 등 HEX를 받는 곳에 붙여넣으면 색이 정확히 일치합니다. 팔레트 카드 이미지를 참고용으로 저장할 수도 있습니다.

  • 각각 색상환의 서로 다른 기하 관계에 대응합니다. 단색=같은 색상에서 명도만 변화(가장 무난), 유사색=인접한 색상(부드러움), 보색=정반대 색상(대비 강함), 삼각=균등 간격의 세 색(선명하고 균형), 랜덤=색상은 자유롭되 명도 범위는 일정. 모드를 바꾸면 배색 전체의 관계가 달라집니다.

  • 색 위의 🔓를 누르면 그 색이 잠깁니다. 다음에 「생성」을 누르면 잠긴 색은 그대로 두고 잠기지 않은 색만 바뀝니다. 마음에 드는 색 한두 개를 남겨 두고 나머지만 여러 번 다시 섞어 전체를 다듬을 수 있어요.

  • 기준 색을 정하지 않았다면 그렇습니다. 「생성」할 때마다 기준 색상·채도·명도를 랜덤으로 고르고, 선택한 모드의 고정 규칙(조작 영역 아래에 표시)으로 나머지 네 색을 만듭니다. 「이 색에서 시작」을 체크하면 내 색은 그대로 유지되고, 랜덤으로 뽑는 것은 「랜덤」 모드뿐입니다.

  • 자동으로 보장되지 않으며 배색 방식 자체도 보장하지 않습니다. 보색끼리도 휘도가 거의 같을 수 있고, 대비를 정하는 것은 휘도입니다. 이 도구는 측정합니다. 대비 확인에 열 쌍 모두의 WCAG 2.2 대비율을 보여 주고(본문 AA 기준 4.5:1, 큰 글자 3:1), 각 색의 라벨은 검정과 흰색 중 대비가 높은 쪽을 써서 항상 4.5:1 이상입니다. 색각 이상 시뮬레이션은 하지 않습니다.

  • 네. 「기준 색」에서 색을 고르면(또는 「이 색에서 시작」을 체크하면) 모든 모드가 그 색을 중심으로 배색을 만들고, 내 색은 규칙이 정한 기준 자리에 그대로 남습니다. 🔒로 아무 색이나 잠그고 나머지만 다시 섞을 수도 있습니다.

  • 고해상도 JPEG 이미지로, 다섯 가지 색과 각 HEX 값이 함께 들어갑니다. 공유나 보관에 좋고 PDF로도 내보낼 수 있어요. 이미지는 모두 기기 안에서 생성되며 서버를 거치지 않습니다.

  • 모두 같은 색을 다르게 표기한 것입니다. RGB는 빨강·초록·파랑을 0–255의 세 숫자로 나타내고, HEX는 그 RGB를 16진수로 쓴 것(#RRGGBB)이며, HSL은 색상·채도·명도로 표현해 사람의 직관에 가깝습니다. 이 도구는 내부에서 HSL로 조화를 도출하고, 마지막에 범용 HEX로 출력합니다.

  • 아니요. 모든 팔레트는 브라우저 안에서 즉시 생성되며, 서버로 전송되거나 URL에 기록되거나 수집되지 않습니다. 페이지를 새로 고치면 처음부터 다시 시작합니다.

방법과 출처

계산 방식

Five colours from fixed HSL hue rotations of a base (complementary +180°, triadic ±120°, analogous 20° steps, monochromatic lightness ladder); HSL to sRGB by the CSS Color 4 §7.1 algorithm. Every pair's WCAG 2.2 contrast ratio, (L1 + 0.05) / (L2 + 0.05), shown rounded down; swatch labels use black or white, whichever contrasts more (ColourPaletteKernel).

이 도구가 따르는 기준

  • Colour conversion: HSL to sRGB and back by the W3C CSS Color Module Level 4 sample algorithms (§7.1 hslToRgb, §7.2 rgbToHsl), through the site's shared ColourConvertKernel; HEX as #RRGGBB.
  • Contrast: WCAG 2.2 relative luminance (sRGB linearised at 0.04045; L = 0.2126 R + 0.7152 G + 0.0722 B) and contrast ratio (L1 + 0.05) / (L2 + 0.05). Bands: 7:1 AAA and 4.5:1 AA for body text (SC 1.4.6, SC 1.4.3), 3:1 for large text (18 point, or 14 point bold). Ratios print rounded DOWN to one decimal, so a figure shown as 4.5:1 is never a 4.46 that fails.
  • Harmony rules are this tool's own, stated on the page in degrees and percent: analogous −40° to +40° in 20° steps; complementary three of the base hue and two at +180°; triadic +120° and +240° plus a tint and a shade; monochromatic lightness 88/72/56/40/26%; random five hues over a random 40–160° arc. A base colour the reader enters is kept exactly.
  • HSL lightness is not perceived lightness (CSS Color 4 §7: yellow and blue at 50% have WCAG luminance 0.93 and 0.07), so no harmony is presented as accessible; every pair is measured instead.
  • Corrected 2026-11-03: label ink by luminance < 0.45 (32.5% of 500,000 generated swatches under 4.5:1, worst 2.10:1) replaced by the higher-contrast of black and white (floor 4.58:1); Newton's colour circle dated 1666 corrected to Opticks, 1704.

출처

  • W3C. CSS Color Module Level 4, Candidate Recommendation Draft, 1 November 2026 — §7.1 and §7.2 sample code, and the §7 note on HSL lightness across hues: https://www.w3.org/TR/css-color-4/
  • W3C. Web Content Accessibility Guidelines (WCAG) 2.2 — definitions of relative luminance, contrast ratio and large-scale text; SC 1.4.3 and SC 1.4.6: https://www.w3.org/TR/WCAG22/
  • Newton I. Opticks. 4th ed. London: William Innys; 1730 (first edition 1704). Book I, Part II, Prop. VI, the seven-part colour circle. Project Gutenberg: https://www.gutenberg.org/ebooks/33504

시간이 지나면 달라질 수 있는 부분

  • None at runtime: palettes and contrast are computed in the browser and nothing the reader picks is sent or written to the URL.
광고
Pre-footer · AD-W3 728 × 90