Theme & Palette Generator

Create professional color palettes by exploring color harmonies (Complementary, Triadic, Analogous, Tetradic, Monochromatic). Fine-tune hue, saturation, and lightness of your base color and export ready-to-use CSS or Tailwind code.

Color Base (HEX)

Presets Rápidos

Modo

Regla de Armonía Cromática (Adobe Color Style)

Paleta Armónica (5 tonos)

Haz clic en cualquier swatch para copiar HEX

#0950C3

#3B82F6

#95B5E9

#F6AF3C

#C37C09

#0950C3

HSL:217°, 91%, 40%

#3B82F6

HSL:217°, 91%, 60%

#95B5E9

HSL:217°, 66%, 75%

#F6AF3C

HSL:37°, 91%, 60%

#C37C09

HSL:37°, 91%, 40%

Design Tokens (Dark Mode)

Haz clic para copiar HEX

--background#101114

--foreground#FFFFFF

--primary#3B82F6

--primary-foreground#090D16

--secondary#CF8817

--secondary-foreground#090D16

--accent#2B6CD4

--accent-foreground#FFFFFF

--muted#24282E

--muted-foreground#9197A1

Vista Previa de Interfaz

Buscer SaaS Dashboard

Revenue+12.5%

$48,290

vs. último periodo

LatenciaAtención

142ms

P95 · últimas 24h

ErroresCrítico

últimas 4 horas

ℹ️ Todos los colores cumplen WCAG 2.1 AA (≥4.5:1) contra su fondo.

Exportar Código

:root {
  --background: #101114;
  --foreground: #FFFFFF;
  --primary: #3B82F6;
  --primary-foreground: #090D16;
  --secondary: #CF8817;
  --secondary-foreground: #090D16;
  --accent: #2B6CD4;
  --accent-foreground: #FFFFFF;
  --muted: #24282E;
  --muted-foreground: #9197A1;
  --card: #191B1F;
  --card-foreground: #FFFFFF;
  --border: #2B313B;
  --ring: #3B82F6;
  --input: #202327;
  --destructive: #C32282;
  --destructive-foreground: #FFFFFF;
  --success: #1FAD80;
  --success-foreground: #090D16;
  --warning: #86C322;
  --warning-foreground: #090D16;
}