palette Generador de Escala de Tintes y Sombras star

Cómo Se Construye la Escala

La teoría del color define tres formas de alterar sistemáticamente un tono base en el modelo HSL: tinte (mezclar hacia el blanco, subiendo la Luminosidad — el color se ve más pálido), sombra (mezclar hacia el negro, bajando la Luminosidad — el color se ve más oscuro y profundo), y tono (mezclar hacia el gris, reduciendo la Saturación con la Luminosidad prácticamente sin cambios — el color se ve apagado o "polvoriento"). Este generador produce la mitad de tinte/sombra de ese trío: partiendo de tu color base, desplaza la Luminosidad hacia el blanco en las paradas más claras y hacia el negro en las más oscuras, produciendo la escala de diez pasos 50-900 que usan sistemas de diseño como Tailwind y Material, con el color de marca original anclado alrededor del paso 500.

Un ejemplo concreto: partiendo de un azul alrededor de hsl(217, 91%, 60%), el paso 50 cae cerca de hsl(217, 91%, 97%) — casi blanco, apenas queda un susurro del tono — mientras que el paso 900 cae cerca de hsl(217, 60%, 20%) — muy oscuro, con la saturación comprimida a medida que el color se acerca al negro. Cada parada recibe tanto un código hex como una variable CSS lista para usar; hacer clic en cualquier muestra la copia.

El beneficio práctico de generar una escala completa en lugar de calcular a ojo unas cuantas sombras es la consistencia: cada parada se deriva del mismo tono base con la misma regla de mezcla, así que un borde de tarjeta en el paso 200 y un estado hover en el paso 100 siempre parecen pertenecer a la misma familia de color, incluso meses después, cuando un diseñador distinto o un componente distinto necesita una nueva sombra del mismo color de marca.

Qué Debes Saber

• Tinte, sombra y tono no son la misma operación: esta herramienta solo realiza tinte y sombra — cambios de Luminosidad. Un tono verdadero reduce la Saturación manteniendo la Luminosidad prácticamente fija, produciendo una versión apagada del color en lugar de una más clara u oscura; esa manipulación distinta no es lo que aplica este generador.
• Dónde se usa cada parada: 50-100 para fondos de página y rellenos hover, 200-300 para bordes y separadores, 500-600 para botones y enlaces (el propio color de marca), 700-900 para texto de cuerpo sobre fondos claros.
• El contraste no es automático: emparejar un paso ≥700 con un paso ≤100 normalmente supera el contraste WCAG AA, pero "normalmente" no es "siempre" — verifica el par exacto que planeas publicar con un comprobador de contraste dedicado.
• No es idéntico a las paletas propias de Tailwind: los colores integrados de Tailwind están ajustados a mano por tono de forma deliberada, mientras que este generador aplica una fórmula de mezcla consistente a cualquier entrada — predecible para colores de marca personalizados, suficientemente cercano para interfaces reales.
• El modo oscuro normalmente invierte la escala: un fondo que usa el paso 50 en modo claro suele corresponder a algo cercano al paso 900 en modo oscuro, y viceversa — generar la escala completa de antemano significa que ambos temas ya están cubiertos.