컬러 팔레트 생성기

컬러 팔레트 생성기입니다. 기준 HEX, 하모니(보색, 유사, 분할 보색, 삼원, 사원, 단색)와 스타일을 고릅니다. 스와치를 잠근 뒤 다시 생성하면 #3B82F6 보색은 그 파랑을 남기고 나머지만 다시 짭니다.

잠근 색은 생성해도 남습니다. 2–8색. 화살표로 순서. HEX는 고칠 수 있습니다.

띠 미리보기(색각 모드는 여기 표시만 바꿉니다).

클릭하면 복사됩니다

모든 쌍의 명암비. 4.5 이상은 본문 AA. · 텍스트 대비율은 색 변환

예제 — 스와치를 클릭

Color Palette Generator

This is a color palette generator: from one HEX it builds a set that follows a color-wheel harmony, the same idea as Adobe Color and Figma’s generator. Complementary is opposite on the wheel (H + 180°). Analogous walks ±20° and ±40°. Split complementary uses ±150°. Triadic is 120° / 240°. Tetradic is 90° / 180° / 270°. Monochromatic keeps H and S and steps L. #3B82F6 complementary includes that blue and its opposite. Styles (pastel, vivid, muted, earthy) change saturation and lightness, not the hue rule. HEX to Tailwind finds a default class; tint / shade mixes one color toward white or black. This page is a multi-color scheme.

How to use

  1. Set the base HEX (or the eyedropper / picker). Choose Harmony and Style, then Generate. Random picks a new base first.
  2. Lock a swatch so the next Generate keeps it and rebuilds the others. 2–8 colors. Add color appends the HEX field. × removes (not below 2). Arrows reorder like Figma.
  3. Edit the HEX on a swatch. Undo / Redo walk the last 40 states. Hue / saturation / lightness sliders shift unlocked colors together.
  4. Chips and Copy result copy the HEX list. CSS variables and JSON are extra exports. Download PDF prints HEX-labeled swatches.
  5. The contrast table is every pair’s WCAG ratio; 4.5+ shows AA. Full text-on-background checks stay on Color Converter. Color-blind view recolours the bar only (Protanopia, Deuteranopia, Tritanopia).

Harmonies, styles and limits

Hues are computed in HSL. Complementary of #3B82F6 (H ≈ 217°) sits near 37°. Pastel lowers S and raises L; vivid raises S; muted lowers S; earthy keeps mid S and lower L. Empty Generate uses #3B82F6. More than 8 colors is rejected. PDF labels stay HEX because the built-in font cannot cover every script. Nothing is uploaded; there is no account and no AI prompt box.

Where to use it

  • Brand or UI tokens: primary, accent, surface, text.
  • Checking whether two palette colors pass AA before you pick type colors.
  • Handing a PDF or a CSS :root block to a teammate.

Frequently asked questions

Is this the same as tint / shade?

No. Tint / shade mixes one HEX toward white or black. This page places several hues on the wheel.

Does lock survive Random?

Yes. Locked swatches stay; unlocked ones are replaced.

Is the color-blind view a diagnosis?

No. It is a rough RGB matrix preview, not a clinical simulation.

Related tools

Tint / shade: Tint Shade Generator. Contrast: Color Converter. 216 chart: Web Safe Colors.