Usa el Constructor de Escalas de Sombras y Tintes gratuito abajo: tus datos nunca salen de tu navegador, todo el trabajo ocurre en tu dispositivo y no se sube a ningún servidor.
Las Sombras y los Tintes No Son lo Mismo
Una sombra es tu color mezclado con negro. Un tinte es tu color mezclado con blanco. Esa diferencia tan simple cambia por completo la sensación de una paleta. Las sombras se vuelven más oscuras, más serias y con más peso. Los tintes se vuelven más claros, más suaves y más tranquilos. La herramienta de arriba crea ambas escalas a la vez desde un solo color base, para que veas el recorrido completo desde casi el negro hasta casi el blanco en una sola escala. Haz clic en cualquier muestra para copiar su código hex y úsalo en tu diseño, tus diapositivas o tu sitio web.
Mucha gente elige los colores uno a uno, y por eso sus diseños parecen aleatorios. Un color elegido solo puede chocar con el siguiente, aunque cada uno se vea bien por separado. Una escala resuelve ese problema desde el origen. Todos los colores de una escala de sombras y tintes nacen del mismo color base, asà que combinan entre sà por construcción. Cuando los botones, los fondos y el texto vienen de una sola escala, toda la página parece planificada, aunque no seas diseñador.
Cómo Usar el Constructor de Escalas
Empieza por elegir tu color base con el selector de color. Normalmente será el color de tu marca, o simplemente un color que te guste. Después elige cuántos pasos quieres: cinco pasos dan una escala rápida y atrevida, mientras que nueve pasos dan un control fino para trabajos detallados. La herramienta muestra dos filas. La primera fila avanza desde tu color base hacia el negro. La segunda fila avanza desde tu color base hacia el blanco. El centro de cada fila está cerca de tu base, y los extremos son la sombra más oscura y el tinte más claro.
Haz clic en una muestra para copiar su código hex. Una pequeña marca confirma la copia. Pega el código en tu herramienta de diseño, tu hoja de estilos o tu documento. Si cambias el color base, toda la escala se reconstruye al instante, asà que puedes probar diez colores en un minuto.
Dónde Va Cada Parte de la Escala
Las sombras más oscuras son para el texto y los acentos fuertes. El texto oscuro sobre un fondo claro es lo más fácil de leer, y una sombra muy oscura de tu color de marca se lee casi como el negro, pero conserva un toque de tu marca. Las sombras medias sirven para botones, bordes y tÃtulos. Son lo bastante atrevidas para destacar, pero no tanto como para dominar la página. Los tintes más claros sirven para fondos, tarjetas y secciones. Un tinte pálido da color a la página sin gritar, y el texto sobre él sigue siendo legible si lo combinas con una sombra oscura.
Una regla práctica ayuda mucho: usa el tinte más claro para el fondo de la página, una sombra media para los botones y los enlaces, y la sombra más oscura para los tÃtulos y el texto. Ese patrón de tres niveles funciona para sitios web, diapositivas, pósters y documentos. Da contraste donde importa, para leer, y suavidad donde importa, para los fondos. Si una combinación se ve débil, baja un paso más oscuro para el texto o un paso más claro para el fondo. Los pequeños pasos corrigen la mayorÃa de los problemas de contraste.
Errores Que Arruinan una Paleta
El error más común es usar demasiados colores sin relación. Una página con seis tonos distintos parece desordenada, aunque cada color sea bonito. Una sola escala, bien usada, supera a seis colores al azar. Otro error es elegir tintes demasiado pálidos para el texto. Un tinte claro con texto blanco es casi invisible, y un tinte claro con texto gris cansa la vista. Prueba siempre tu color de texto contra tu color de fondo a tamaño real, no solo como dos muestras juntas.
Otra trampa es olvidar que las pantallas y las impresoras son distintas. Un tinte que se ve suave en una pantalla brillante puede verse lavado en papel. Si vas a imprimir, prueba primero una página. Por último, recuerda que las sombras conservan el tono del color base. Una base azul da sombras azuladas oscuras, no grises neutros. Si quieres un gris de verdad, empieza desde una base gris. Esa honestidad con el tono es lo que hace que una escala se sienta coherente y no embarrada.
Preguntas Frecuentes
¿Cuál es la diferencia entre sombra, tinte y tono? Una sombra mezcla un color con negro, un tinte lo mezcla con blanco, y un tono lo mezcla con gris. Esta herramienta crea sombras y tintes, que cubren la mayorÃa de las necesidades diarias de diseño.
¿Cuántos pasos debo usar? Cinco pasos bastan para una página sencilla o una presentación. Nueve pasos sirven para un sistema de diseño completo, donde necesitas diferencias sutiles entre tarjetas, bordes y estados al pasar el ratón.
¿Puedo usar los códigos hex en cualquier parte? SÃ. Los códigos hex funcionan en herramientas de diseño, hojas de estilo web, programas de diapositivas y editores de documentos. Son la forma estándar de nombrar un color exacto.
Elige un color base arriba, crea tu escala y copia las sombras y los tintes que necesites. Una buena escala es la forma más rápida de que un diseño parezca deliberado.