Tintes y Sombras: Construir Escalas de Colores para Sistemas de Diseño
Genera paletas de colores sistemáticas — de 50 a 900 — que impulsan sistemas de diseño consistentes y accesibles.
Cada sistema de diseño maduro — Tailwind, Material Design, Chakra UI — usa una escala de colores sistemática en lugar de un puñado de colores seleccionados a mano. Estas escalas permiten a diseñadores y desarrolladores elegir el nivel de luminosidad correcto para cualquier contexto.
Un tinte añade blanco a un color base, haciéndolo más claro. Una sombra añade negro, haciéndolo más oscuro. El enfoque matemático usa el modelo HSL para ajustar la luminosidad preservando el matiz y la saturación del color original.
Qué son los tintes y sombras
En teoría del color, un tinte es un color mezclado con blanco que produce una versión más clara. Una sombra es un color mezclado con negro que produce una versión más oscura. En el diseño digital, los generadores de tintes y sombras producen una gama de valores de luminosidad de casi blanco a casi negro, todos compartiendo el mismo matiz.
Herramienta gratuita Generador de Tintes y Sombras Genera una escala de colores completa 50–900 desde cualquier color baseModelo de color HSL para manipulación
HSL (Matiz, Saturación, Luminosidad) es el modelo preferido para generar tintes y sombras porque la luminosidad es un eje independiente. Para crear un tinte, aumenta L manteniendo H y S constantes. Para crear una sombra, disminuye L.
Construir una escala de 9 pasos (100-900)
La escala estándar del sistema de diseño va de 50 (casi blanco) a través de 100, 200, 300, 400, 500 (color base), 600, 700, 800, 900 (casi negro). El color base se ancla en 500. Los pasos 100-400 son tintes con luminosidad creciente. Los pasos 600-900 son sombras con luminosidad decreciente.
Herramienta gratuita Generador de Paletas de Color Genera paletas armoniosas a partir de cualquier color baseConsideraciones de accesibilidad
Al construir una escala de colores para un sistema de diseño, debes verificar los ratios de contraste WCAG en cada nivel que planeas usar para texto. El paso 700 sobre fondo blanco típicamente logra 4.5:1 (conformidad AA). El paso 900 logra 7:1+ (AAA).
Paletas Tailwind y Material Design
Tailwind CSS usa una escala 50-900 para todos sus colores integrados. Material Design 3 usa un enfoque diferente: genera un esquema de color completo desde un único "seed color" usando el espacio de color HCT.
Propiedades personalizadas CSS
Exporta tu escala de colores como propiedades personalizadas CSS. Defínelas a nivel :root. Nómbralas semánticamente: --color-blue-500, --color-blue-600. Referencialas en los estilos de componentes.
Herramienta gratuita Comprobador de Contraste de Color Comprueba las relaciones de contraste WCAG entre dos colores