Generador de paletas

Esto es un generador de paletas. Elija un HEX base, una armonía (complementaria, análoga, partida, triádica, tetrádica, monocromática) y un estilo. Bloquee una muestra y genere de nuevo: el complementario de #3B82F6 conserva ese azul.

Una muestra bloqueada se queda al generar. 2–8 colores. Flechas reordenan. El HEX se edita.

Franja de vista (el daltonismo solo recolorea esta vista).

Pulsa un valor para copiarlo

Contraste de cada par. 4,5+ marca AA de texto. · ¿Contraste de texto? Usa Conversor de color

Ejemplos — pulsa una muestra

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.