Readdy AI

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

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.
50
#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

Primary

Color principal de marca y CTA

#2563EB
Secondary

Secondary

Color de marca secundario

#6C59D5
Accent

Accent

Resaltados de alto contraste

#E3AA2D
Background

Background

Tono de fondo de página

#F7F7F8
Surface

Surface

Fondo de tarjetas y contenedores

#E8E9EE
Text

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;
}

Cómo Construir un Sistema de Colores Completo desde un Código HEX

Esta herramienta convierte un color HEX base en una paleta estructurada en tiempo real. Puedes ingresar manualmente un valor HEX, elegir del selector de colores o generar un color aleatorio.

1

Paso 1: Ingresa o Selecciona un Color Base

Ingresa un código de color HEX directamente, elige un color del selector o haz clic en "Color Aleatorio" para generar uno automáticamente.

2

Paso 2: Ve la Vista General de la Paleta

Ve tu color base junto con colores armoniosos generados automáticamente que complementan y extienden tu diseño.

3

Paso 3: Explora la Escala Tonal y Tokens Semánticos

Revisa la escala tonal (50–900) con tonos de claro a oscuro ideales para fondos, bordes, estados y contraste de texto.

4

Paso 4: Copia Variables CSS o Tokens

Copia las variables CSS generadas con un clic y pégalas directamente en tu hoja de estilos.

Paletas de Colores Estructuradas para Proyectos Reales

Este Generador de Paleta de Colores HEX va más allá de las muestras básicas. Crea paletas estructuradas y listas para usar en interfaces de producto, sistemas de diseño y flujos de trabajo de marca.

  • Generación de Colores Basada en Armonía

    Genera automáticamente colores armoniosos complementarios que mantienen el equilibrio visual y el contraste.

  • Escala Tonal (50–900)

    Tonos de claro a oscuro optimizados para capas de UI, estados, fondos y contraste de texto legible.

  • Tokens Semánticos para Consistencia de UI

    Roles predefinidos ayudan a mantener un uso consistente en acciones primarias, estados de éxito, advertencias y elementos neutros.

  • Variables CSS Listas para Copiar

    Exporta toda tu paleta como variables CSS con un clic, lista para implementar en tu hoja de estilos.

Preguntas Frecuentes

Es una herramienta que crea una paleta de colores completa basada en un solo valor de color HEX, incluyendo variaciones tonales y colores armoniosos.
Sí. Puedes ingresar cualquier color HEX válido, seleccionar uno manualmente o generar un color aleatorio.
La escala tonal (50–900) proporciona tonos estructurados para fondos, bordes, estados hover y contraste de texto accesible.
Simplemente copia las variables y pégalas en tu archivo CSS o configuración de sistema de diseño.

Crea una Paleta de Colores Escalable en Segundos