Generador de tintes de color
Genere tintes más claros de un color mezclándolo con blanco en pasos iguales. Introduzca un color en cualquier formato CSS, elija de 2 a 20 pasos y un espacio de mezcla, y obtenga una tabla con valores HEX, RGB, HSL y OKLCH para cada tinte, empezando por el color original. La mezcla en sRGB coincide con las herramientas clásicas de tintes y Sass, mientras que OKLab ofrece pasos perceptualmente uniformes. Ideal para fondos, estados al pasar el cursor y escalas.
Preguntas frecuentes
¿Qué es un tinte?
Un tinte es un color mezclado con blanco. Conserva su tono y se vuelve más claro y pálido, a diferencia de un tono oscuro, que se mezcla con negro, o un matiz, que se mezcla con gris.
¿Cómo se distribuyen los pasos?
Con N pasos, la fila k mezcla el color con (k - 1) / N de blanco, así que 10 pasos dan 0 %, 10 %, 20 % y así sucesivamente hasta 90 %. La primera fila siempre es el color original y el blanco puro nunca aparece en la lista.
¿Qué diferencia hay entre mezclar en sRGB y en OKLab?
La mezcla en sRGB promedia los valores de canal codificados con gamma, que es lo que hacen Sass mix() con blanco y la mayoría de los generadores de tintes clásicos. La mezcla en OKLab se realiza en un espacio perceptual, por lo que los pasos de luminosidad parecen más uniformes y el extremo claro no pierde saturación tan rápido.
¿Qué formatos de entrada puedo usar?
Códigos hexadecimales con o sin #, nombres de color CSS, rgb(), hsl(), hwb(), lab(), lch(), oklab(), oklch(), color() y cmyk(). Introduzca un color por ejecución.
¿Cuántos tintes puedo generar?
Entre 2 y 20 por ejecución, 10 de forma predeterminada. El recuento incluye el color original en la primera fila.
¿Qué valores muestra la tabla?
Para cada paso, la proporción de blanco, el código hexadecimal, rgb(), hsl() y oklch() en la sintaxis moderna de CSS. Los canales RGB son números enteros, los porcentajes de HSL tienen hasta dos decimales, y la luminosidad y el croma de OKLCH, hasta cuatro.
¿Qué ocurre con los colores transparentes?
El alfa de la entrada se conserva en cada tinte, porque el blanco se mezcla con el mismo valor alfa. Los códigos hexadecimales tienen entonces 8 dígitos y las funciones CSS terminan con el alfa después de una barra.
¿Qué ocurre con los colores fuera de sRGB?
La mezcla usa el color completo, pero HEX, RGB y HSL solo pueden mostrar sRGB, por lo que los pasos fuera de gama se convierten a sRGB con el algoritmo CSS Color 4 en esas columnas. La columna OKLCH conserva el valor sin convertir.
¿Cómo uso los tintes en CSS?
Copie los valores hexadecimales o de oklch() en propiedades personalizadas como --brand-100 y --brand-200. Para hacer la mezcla en el navegador, color-mix(in oklab, var(--brand) 80%, white) produce el mismo tinte al 20 % que la opción OKLab.
¿Puedo usar texto blanco sobre un tinte claro?
Por lo general, no, porque los tintes claros tienen poco contraste con el blanco. Use texto oscuro sobre tintes claros y compruebe cada combinación con una herramienta de contraste; el texto normal necesita al menos 4.5:1 para WCAG AA.