Generador gratuito de paletas de colores HEX

Empieza con un color y explora la paleta de tu sitio. Genera combinaciones, tonos claros y oscuros y colores por función, y copia las variables CSS para usarlos en tu proyecto.

Color base (HEX)

Introduce #RGB o #RRGGBB, por ejemplo, #0EA5E9.

Color base (HEX)

Colores predefinidos

Resumen de la paleta

Explora el color base y las combinaciones generadas a partir de él.

Color base (HEX)

#2563EB

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

Armonías de color

Análogo A

#45C7E4

Análogo B

#6345E4

Complementario

#E6AB2A

Triádico A

#E2386D

Triádico B

#6DE238

Escala tonal (50–900)

Explora tonos claros y oscuros para fondos, bordes y estados de la interfaz.

#F4F6FB

100

#D1DBF1

200

#ABBFEB

300

#82A2E7

400

#5583E8

500

#2563EB

600

#124BC7

700

#0D3794

800

#082462

900

#04112F

Colores semánticos

Usa colores con funciones definidas para mantener una paleta coherente en tu sitio.

Primario

Color para acciones principales

#2563EB

Secundario

Color para elementos secundarios

#6C59D5

Acento

Color para destacar elementos

#E3AA2D

Fondo

Color para fondos de página

#F7F7F8

Superficie

Color para fondos de tarjetas

#E8E9EE

Texto

Color para el texto principal

#1B212C

Variables CSS

Copia los colores semánticos y la escala tonal en 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;
}

¿Qué es un generador de paletas de colores HEX?

Es una herramienta que crea colores relacionados a partir de un código HEX. Genera armonías, una escala tonal y seis colores semánticos, con variables CSS que puedes copiar.

Cómo generar una paleta de colores a partir de HEX

Elige un color base, revisa la paleta generada y copia los valores que necesites. Empieza introduciendo un código HEX, usando el selector o probando un color aleatorio.

Paso 1
Elige el color base
Introduce un código HEX, usa el selector o elige Color aleatorio. Si escribes el código a mano, haz clic en Generar paleta para ver el resultado.
Paso 2
Revisa la paleta de colores
Compara el color base con las combinaciones análogas, complementarias y triádicas. Explora qué opciones encajan con tu sitio o tu marca.
Paso 3
Explora tonos y funciones de color
Revisa los tonos del 50 al 900 y los seis colores semánticos. Elige la luminosidad y la función adecuadas para cada parte de la interfaz.
Paso 4
Copia colores y variables CSS
Copia valores individuales o las variables CSS generadas. Pégalos en tu hoja de estilos para usar los colores en tu sitio o sistema de diseño.

Una paleta, seis formas de usarla

Elige colores para fondos, botones y texto a partir de una misma paleta. Estas seis aplicaciones te ayudan a llevar los colores generados al diseño de tu sitio.

Fondos y bordes

Compara los tonos claros y oscuros para elegir fondos de página, tarjetas y bordes. Usa la escala como referencia para tu diseño.

Colores al pasar el cursor

Elige colores para botones y enlaces al pasar el cursor. Antes de usarlos, comprueba cómo funciona cada combinación en tu interfaz.

Interfaces de producto

Asigna funciones a los colores primario, secundario, de acento, fondo, superficie y texto. Mantén los mismos roles en toda la interfaz.

Paletas de marca

Parte del color principal de tu marca y compara combinaciones análogas, complementarias y triádicas. Úsalas como referencia para tu sitio.

Sistemas de diseño

Copia colores y tonos a tu sistema de diseño. Así, los componentes reutilizables pueden compartir los mismos valores de color.

Hojas de estilo CSS

Pega las variables CSS en tu hoja de estilos y haz referencia a ellas. Usa una misma definición de color en las páginas y componentes del sitio.

Del color al CSS, en un mismo lugar

Compara armonías, tonos y colores con funciones definidas sin salir del generador. Es gratis y te permite copiar valores individuales o variables CSS para tu proyecto.

Más combinaciones desde un color

Genera combinaciones análogas, complementarias y triádicas desde tu código HEX. Compáralas para elegir la dirección visual de tu sitio.

Tonos de claro a oscuro

Revisa los tonos numerados del 50 al 900, de claros a oscuros. Elige colores para fondos, bordes y otros elementos de la interfaz.

Seis colores, funciones claras

Obtén colores primario, secundario, de acento, fondo, superficie y texto. Úsalos por función para mantener la coherencia en tu sitio.

Variables CSS listas para copiar

Copia los colores semánticos y los tonos como variables CSS. Pégalas en tu hoja de estilos para usarlas en los elementos de tu sitio.

Preguntas frecuentes

Es una herramienta que crea colores relacionados a partir de un código HEX. Genera armonías, una escala tonal y seis colores semánticos, con variables CSS que puedes copiar.

Introduce un código HEX válido de tres o seis dígitos y haz clic en Generar paleta. También puedes usar el selector, elegir un color predefinido o seleccionar Color aleatorio.

La escala tonal ofrece tonos claros y oscuros numerados del 50 al 900. Úsalos como punto de partida para fondos, bordes y estados al pasar el cursor. Comprueba el contraste del texto en el diseño final.

Haz clic en Copiar en el panel de variables CSS y pégalas en tu hoja de estilos. Haz referencia a ellas en tus reglas CSS para aplicar los colores semánticos y los tonos.

Generador gratuito de paletas de colores HEX

¿Qué es un generador de paletas de colores HEX?

Cómo generar una paleta de colores a partir de HEX

Elige el color base

Revisa la paleta de colores

Explora tonos y funciones de color

Copia colores y variables CSS