Cada sistema de diseño que he enviado comenzó con un color de una sola marca y luego inmediatamente necesitó una docena más. Un azul nunca es suficiente. Necesitas un azul más claro para un estado flotante, un azul mucho más claro para un fondo de fila seleccionada, un azul más oscuro para el texto que se asienta sobre una superficie pálida y un azul apagado para un botón deshabilitado que no debería gritar. Cuando estaba construyendo la interfaz para [Toolz.dev] (/, seguí abriendo un selector de color, empujando el control deslizante de ligereza, observando si el resultado todavía se parecía a la misma familia y pegando códigos hexadecimales en mi hoja de estilo uno a la vez. Funcionó, pero fue lento y los resultados fueron inconsistentes porque " empuja hasta que se ve bien" no es un proceso repetible.
Así que construí el Generador de tonos de color. Le das un color y te da tres escalas completas, calculadas en el espacio de color Módulo de color CSS Nivel 4 define, en lugar de empujar, dígitos hexadecimales: tintes que se acercan al blanco, tonos que se acercan al negro y tonos que se acercan al gris. Esta guía explica lo que realmente significan esas tres palabras, cómo funcionan las matemáticas y cómo convertir un color de marca única en una paleta coherente que puede ingresar directamente a CSS.
TL;Dr: Un tinte es tu color mezclado con blanco, un tono es tu color mezclado con negro y un tono es tu color mezclado con gris. Cada uno mantiene el tono original y solo cambia la apariencia clara, oscura o apagada del color. Pegue un valor HEX, RGB o HSL, elija cuántos pasos desea y el generador creará las tres escalas a la vez, cada muestra copiable como HEX, RGB o HSL. Todo se ejecuta en su navegador.
¿cuál es la diferencia entre un tinte, un tono y un tono?
Estas tres palabras provienen de la teoría tradicional del color y describen tres formas diferentes de cambiar un color sin cambiar qué color es fundamentalmente. Vale la pena acertar en la distinción porque los diseñadores, y cada vez más los tokens de diseño, utilizan las palabras con precisión.
Un tinte es un color mezclado con blanco. Agregar blanco aumenta la ligereza y suaviza el color. El rosa es un tinte rojo y el azul celeste es un tinte azul más fuerte. Los tintes son lo que buscas cuando necesitas fondos pálidos, rellenos sutiles y las superficies más claras en una interfaz.
Un tono es un color mezclado con negro. Agregar negro reduce la claridad y profundiza el color. El granate es un tono rojo y el azul marino es un tono azul. Los tonos te dan el extremo más oscuro de una escala: colores de texto, estados de botones presionados y bordes que necesitan más peso que la base.
Un tono es un color mezclado con gris. Agregar gris reduce la intensidad del color 's sin hacerlo dramáticamente más claro o más oscuro. Los tonos son los menos utilizados de los tres y son el secreto detrás de paletas que parecen más sofisticadas que llamativas. Un color atenuado se lee como más tranquilo y profesional, razón por la cual las paletas apagadas dominan el diseño de productos serios.
Lo importante que comparten los tres es que conservan el tono. Un tinte azul sigue siendo azul, un tono azul sigue siendo azul y un tono azul sigue siendo azul. Eso es lo que hace que un conjunto de tintes, tonos y tonos parezcan una familia en lugar de una variedad aleatoria.
¿Cómo se calcula realmente cada escala?
Debajo del capó, cada muestra es una mezcla en línea recta entre dos colores en el espacio RGB. El generador toma su color base como un triple rojo, verde y azul, y toma un color objetivo, luego camina de uno a otro en pasos pares. Para los tintes, el objetivo es blanco, que es (255, 255, 255). Para los tonos el objetivo es negro, (0, 0, 0). Para los tonos, el objetivo es gris medio, (128, 128, 128).
La combinación para cualquier canal es aritmética simple. Para obtener una muestra que esté al treinta por ciento del camino desde la base hacia el objetivo, calcula base + (target - base) * 0.30 para el canal rojo, luego el canal verde, luego el canal azul y redondo a números enteros. Una escala de tinte de diez pasos ejecuta ese cálculo al diez por ciento, veinte por ciento, y así sucesivamente hasta el cien por ciento, donde el color se ha vuelto blanco puro. El color base en sí se incluye como la muestra del cero por ciento en la parte superior de cada escala, para que siempre puedas ver por dónde empezaste.
Debido a que la mezcla ocurre por canal en RGB, el tono permanece esencialmente fijo para tintes y tonos. La mezcla hacia blanco puro o negro puro cambia la cantidad de luz que refleja el color pero no su carácter subyacente, por lo que un tinte y un tono de la misma base se leen como el mismo color con un brillo diferente. Los tonos pueden cambiar el tono percibido de un cabello, porque el gris se asienta en el centro neutro y tirar hacia él desatura ligeramente cada canal, pero en la práctica toda la escala todavía se lee como un solo color. Si desea inspeccionar exactamente cómo aterriza una muestra determinada en todos los formatos, el Convertidor de color le mostrará sus valores HEX, RGB, HSL y HWB uno al lado del otro.
¿por qué no simplemente cambiar la ligereza en HSL?
Una pregunta razonable es por qué la herramienta se mezcla en RGB en lugar de simplemente subir o bajar el L valor en HSL. Ambos enfoques producen una escala monocromática y ambos son válidos. Mezclarse hacia el blanco y el negro en RGB es el modelo clásico de tintes y tonos de Painter#39, y se asigna limpiamente a las palabras que los diseñadores ya usan. También mantiene los puntos finales honestos: un tinte del cien por ciento es exactamente blanco y un tono del cien por ciento es exactamente negro, lo que no siempre es cierto cuando solo se manipula la ligereza HSL debido a cómo interactúa la saturación con él. El generador te proporciona tonos como tercera escala específicamente para cubrir el "menos intenso" eje que un cambio puro de ligereza no aborda.
¿Cuántos pasos debo generar?
El generador te permite elegir entre dos y veinte pasos por escala, y el número correcto depende de lo que estés construyendo. Para un sistema de diseño en el que desea una rampa con nombre blue-50 hasta blue-900, un recuento de pasos mayor le brinda un gradiente fino del que puede tomar muestras. Para un par rápido de estados activos y flotantes, tres o cuatro pasos son abundantes. Mi valor predeterminado es diez, porque diez tintes, diez tonos y diez tonos de una base me dan una paleta de trabajo completa sin una pared abrumadora de muestras.
Más pasos significan saltos más pequeños entre colores adyacentes, que es lo que desea cuando los tonos vecinos necesitan ser visualmente distintos pero cercanos, como las bandas alternas de una tabla de datos. Menos pasos significan saltos más audaces, lo que se adapta a una paleta compacta donde cada color tiene un trabajo claramente diferente. No hay una respuesta incorrecta y, como la herramienta se vuelve a calcular instantáneamente, puedes deslizar el recuento de pasos hacia arriba y hacia abajo hasta que el espaciado se vea correcto.
¿en qué se diferencian los tintes de la reducción de la opacidad?
Una trampa en la que caí temprano fue usar la opacidad para fingir un tinte. Parece equivalente: deja caer un botón azul al cincuenta por ciento de opacidad sobre una página blanca y parece un azul más claro. El problema es que la opacidad no es un color, es una instrucción de composición y depende completamente de lo que se encuentre detrás del elemento. Ese mismo cincuenta por ciento de azul sobre una superficie oscura se convierte en un azul oscuro fangoso, y sobre una foto se vuelve impredecible. Tu " azul claro" cambia de identidad dependiendo de su fondo, que es lo opuesto a lo que necesita un sistema de diseño.
Un tinte resuelve esto horneando la ligereza en un color real y opaco. La muestra que le brinda el generador es un valor hexadecimal fijo que se ve igual sin importar lo que haya detrás, porque es completamente opaco. Cuando necesite una versión más clara y consistente de un color que se comporte de manera predecible en cada superficie de su producto, use un tinte en lugar de una transparencia. Reserve la opacidad para obtener efectos de transparencia genuinos, como superposiciones y scrims, donde realmente desea que se muestre el fondo. Mantener esas dos ideas separadas es uno de los hábitos silenciosos que hace que una paleta se sienta sólida en lugar de accidental.
¿cómo convierto estas escalas en una paleta utilizable?
Una paleta no es sólo un montón de colores, es un conjunto de tareas. Aquí está el flujo de trabajo que uso cuando empiezo desde un color de una sola marca. Tome la base como color de acción principal, el de sus botones y enlaces principales. Llegue a los tintes para los fondos: un tinte muy claro para las superficies de páginas o tarjetas, un tinte ligeramente más fuerte para el estado flotante de un elemento claro. Llegue a los tonos para texto y énfasis: un tono profundo para la copia corporal que necesita contraste con un tinte pálido, un tono medio para el estado presionado de su botón principal. Utilice un tono cuando necesite el color presente pero silencioso, como un control deshabilitado o una insignia secundaria.
La única regla que no puedes omitir es el contraste. Un tinte que se ve encantador como fondo de botón es inútil si el texto de la etiqueta no cumple con los requisitos de contraste de accesibilidad. Una vez que haya elegido los pares de colores que se colocarán uno encima del otro, ejecútelos Revisador de contraste de color para confirmar que superan los umbrales de WCAG. Elegir hermosos tonos es la parte fácil. Asegurarse de que el texto que contienen sea legible es la parte que separa una paleta real de un tablero de estado de ánimo.
La siguiente tabla muestra cómo normalmente asigno una escala de diez pasos en roles de interfaz.
| Fuente de muestra | Rol típico | Uso de ejemplo |
|---|---|---|
| Tintes más claros | Superficies y fondos | Fondo de página, relleno de tarjeta, fila seleccionada |
| Tintes claros | Estados flotantes sobre elementos ligeros | Pase el botón, pase el botón del elemento de la lista |
| Color base | Acción primaria | Botón principal, enlace activo, acento de marca |
| Tonos medianos | Estados prensados y activos | Botón activo, borde enfocado |
| Sombras oscuras | Texto y alto énfasis | Texto corporal sobre superficies luminosas, títulos |
| Tonos | Elementos secundarios silenciados | Controles deshabilitados, insignias secundarias |
¿cómo encaja esto junto con otras herramientas de color?
El generador de tonos es un instrumento de una pequeña orquesta. Responde a la pregunta " Dame más de este color," pero el trabajo de paleta real también toca algunas preguntas adyacentes. Cuando necesitas colores armoniosos que no sean del mismo tono, como un conjunto complementario o análogo, el Generador de paletas de construye esas relaciones. Cuando estás probando un color inicial a partir de una imagen o un diseño y necesitas leer su valor exacto, el selector de colores te consigue el código hexadecimal. Y cuando tus tonos están destinados a un fondo CSS que se desvanece de uno a otro, el Generador de gradiente convierte dos de ellos en listos para pegar linear-gradient.
La canalización natural se ve así: elija o pegue un color base, genere sus tintes, tonos y tonos, verifique los pares que planea apilar en el verificador de contraste y copie los ganadores en su hoja de estilo o tokens de diseño. Cada una de esas herramientas se ejecuta completamente en el navegador, por lo que un color de marca que aún no ha anunciado nunca viaja a nadie & #39;s servidor. Si las herramientas locales son un valor que compartes, la pieza está puesta Privacidad de datos y herramientas en línea explica por qué construyo todo de esa manera y el Kit de herramientas para desarrolladores web recopila el resto de utilidades que viven en mi flujo de trabajo diario.
Un ejemplo trabajado rápidamente
Comience con la marca azul #4466EE. Establezca el recuento de pasos en diez y deje el formato de copia en HEX. El generador devuelve tres columnas.
La columna de tintes comienza en #4466EE y sube hacia el blanco, pasando por azules progresivamente más pálidos hasta llegar a la muestra final #FFFFFF. En algún punto intermedio se obtiene un suave bígaro que crea un excelente fondo de fila seleccionada. La columna de tonos comienza igual #4466EE y desciende hacia el negro, lo que le brinda índigos profundos adecuados para texto y estados presionados, que terminan en #000000. La columna de tonos comienza en #4466EE y avanza hacia el gris, produciendo azules pizarra apagados que se leen como tranquilos y discretos, terminando en #808080.
Desde esa entrada ahora tienes un fondo (un tinte claro), un relleno flotante (un tinte ligeramente más oscuro), un color primario (la base), un color de texto (un tono oscuro) y un color deshabilitado (un tono). Haga clic en cualquier muestra para copiarla, cambie el formato de copia a RGB o HSL si su proyecto lo prefiere y pegue. Lo que solían ser veinte viajes a un selector de color ahora son un pegado y un puñado de clics, y debido a que las matemáticas son deterministas, la paleta es consistente cada vez.
Preguntas frecuentes
¿cuál es la diferencia entre un tinte, un tono y un tono?
Un tinte es un color mezclado con blanco, haciéndolo más claro. Un tono es un color mezclado con negro, haciéndolo más oscuro. Un tono es un color mezclado con gris, que lo silencia sin cambiar si es claro u oscuro. Los tres mantienen el tono original y sólo cambian la forma en que aparece el color claro, oscuro o saturado.
¿Cómo genero tonos de un color?
Ingrese su color base, luego lea la columna de tonos, que mezcla el color con cantidades cada vez mayores de negro. Cada fila es una versión más oscura del original en un paso uniforme y puede copiar cualquiera de ellas como HEX, RGB o HSL. Aumente el recuento de pasos para obtener un rango más fluido de valores oscuros.
¿Cómo se calculan los colores más claros y oscuros?
Cada escala es una mezcla lineal del color base hacia un objetivo. Los tintes se mezclan hacia el blanco (255, 255, 255), los tonos se mezclan hacia el negro (0, 0, 0) y los tonos se mezclan hacia el gris medio (128, 128, 128). Un tinte del 30%, por ejemplo, mueve cada canal rojo, verde y azul el 30% del camino desde la base hasta el blanco.
¿En qué formatos de color puedo pegar?
Puede ingresar un código HEX (3 o 6 dígitos, con o sin un hash inicial), un valor rgb(), un valor hsl() o un nombre de color CSS común, como carmesí o azul acero. La herramienta convierte su entrada a RGB internamente e informa cada muestra en HEX, RGB y HSL.
¿cuántas sombras puedo generar?
Puedes configurar entre 2 y 20 pasos por escala. Cada escala también incluye el color base original, por lo que una configuración de 10 pasos le brinda la base más diez tintes, diez tonos y diez tonos. Menos pasos dan saltos audaces entre valores, mientras que más pasos dan un gradiente fino.
¿puedo construir una paleta monocromática con esta herramienta?
Sí. Una paleta monocromática utiliza un tono en diferentes niveles de ligereza y saturación, que es exactamente lo que producen los tintes, tonos y tonos. Elija un color base de marca y use sus tintes para fondos, la base para elementos primarios y sus tonos para texto o estados flotantes.
¿los colores generados mantienen el mismo tono?
Los tintes y tonos mantienen el tono casi exactamente, porque mezclar con blanco puro o negro cambia la ligereza en lugar del tono. Los tonos pueden cambiar muy ligeramente porque el gris se encuentra en el centro del espacio de color, pero para trabajos de diseño prácticos toda la escala se lee como una familia del mismo color.
¿el generador de tonos de color es gratuito y privado?
Sí. Es completamente gratuito, sin registro ni límites. Todos los análisis y matemáticas de colores se ejecutan en su navegador utilizando JavaScript del lado del cliente, por lo que los colores que ingresa nunca salen de su dispositivo y la herramienta sigue funcionando sin conexión una vez que la página se ha cargado.
