Generador de Paleta de Colores HEX

Comienza con un color HEX y genera una paleta completa con escala tonal, colores armónicos, tokens semánticos y variables CSS listas para copiar.

Color Base (HEX)

Compatible con #RGB o #RRGGBB, por ejemplo #0EA5E9

Color Base (HEX)

Presets Rápidos

Vista General de la Paleta

Visualiza las relaciones de tu color base y construye un sistema consistente más rápido.

Color Base (HEX)

#2563EB

Tono: 221Saturación: 83%Luminosidad: 53%

Colores Armónicos

Análogo A

#45C7E4

Análogo B

#6345E4

Complementario

#E6AB2A

Triádico A

#E2386D

Triádico B

#6DE238

Escala Tonal (50 - 900)

Tonos de claro a oscuro listos para fondos, bordes, estados y contraste de texto.

#F4F6FB

100

#D1DBF1

200

#ABBFEB

300

#82A2E7

400

#5583E8

500

#2563EB

600

#124BC7

700

#0D3794

800

#082462

900

#04112F

Tokens Semánticos

Usa estos roles directamente en la UI para mantener la consistencia visual del producto y la marca.

Primary

Color principal de marca y CTA

#2563EB

Secondary

Color de marca secundario

#6C59D5

Accent

Resaltados de alto contraste

#E3AA2D

Background

Tono de fondo de página

#F7F7F8

Surface

Fondo de tarjetas y contenedores

#E8E9EE

Text

Color de texto predeterminado

#1B212C

Variables CSS

Copia una vez y añádelo a tu hoja de estilos.

:root {
  --color-primary: #2563EB;
  --color-secondary: #6C59D5;
  --color-accent: #E3AA2D;
  --color-background: #F7F7F8;
  --color-surface: #E8E9EE;
  --color-text: #1B212C;
  --color-primary-50: #F4F6FB;
  --color-primary-100: #D1DBF1;
  --color-primary-200: #ABBFEB;
  --color-primary-300: #82A2E7;
  --color-primary-400: #5583E8;
  --color-primary-500: #2563EB;
  --color-primary-600: #124BC7;
  --color-primary-700: #0D3794;
  --color-primary-800: #082462;
  --color-primary-900: #04112F;
}