Generador de Colores CSS

Convierte un color base en una escala de 10 tonos y expórtala como variables CSS.

100% privado: todo funciona en tu navegador

Procesamiento local

Color base

Escala de color

Haz clic en una muestra para copiar su hex

Variables CSS

:root {
  --color-50: #F5F9FF;
  --color-100: #E2ECFE;
  --color-200: #BAD3FC;
  --color-300: #8DB7FA;
  --color-400: #5E99F8;
  --color-500: #3B82F6;
  --color-600: #306BCA;
  --color-700: #26539D;
  --color-800: #1B3B6F;
  --color-900: #112445;
}

Cómo usarla

1
Escribe un color base o elígelo visualmente.
2
Se genera al instante una escala de 10 niveles, de 50 (el más claro) a 900 (el más oscuro).
3
Haz clic en cualquier muestra para copiar ese valor hex individual.
4
Copia el bloque completo de propiedades personalizadas CSS para tu proyecto.

Ejemplos

Escala desde #3B82F6

Entrada

#3B82F6

Salida

--color-50 #F5F9FF … --color-500 #3B82F6 … --color-900 #112445

Listo para CSS

Entrada

Pega el bloque copiado

Salida

:root { --color-500: #3B82F6; … }

Preguntas frecuentes

¿Cómo se genera la escala?

Los niveles 50–400 se mezclan hacia el blanco (tonos claros), 600–900 hacia el negro (tonos oscuros) y 500 mantiene tu color base sin cambios.

¿Cómo uso las variables?

Pega el bloque al principio de una hoja de estilos y luego referencia cualquier nivel con var(--color-500) en tu CSS.

¿Se envía mi color a un servidor?

No: la escala se genera localmente en tu navegador.

Herramientas relacionadas

Generador de DegradadosCrea degradados CSS lineales y radiales visualmente y copia el código CSS.Selector de ColorElige cualquier color y copia sus valores HEX, RGB, HSL y HSV al instante.Comprobador de ContrasteComprueba al instante el ratio de contraste WCAG entre el texto y el fondo.HEX a RGBConvierte códigos HEX a valores RGB al instante — gratis y privado.RGB a HEXConvierte valores RGB a un código HEX al instante — gratis y privado.Conversor de ColoresConvierte entre los formatos HEX, RGB, HSL, HSV y HWB en cualquier dirección.