tints and shades
1.0.0
Este proyecto utiliza el elevado generador de sitios estáticos y se implementa en páginas GitHub utilizando una acción de GitHub de Shohei Ueda.
Prerrequisitos: node.js 14+
npm install .npm run start .localhost:8080 en su navegador. El propósito de esta herramienta es producir con precisión tintes (blanco puro agregado) y tonos (negro puro agregado) de un color hexadecimal dado en incrementos del 10%.
Se toma en serio las matemáticas. En mi experiencia, las herramientas similares obtienen el cálculo incorrecto debido a errores de redondeo, preferencias de creadores u otras inconsistencias.
Las pruebas muestran que la salida coincide con el método de cálculo de Chrome Devtools, así como algunos métodos populares establecidos para derivar tintes y tonos a través de Sass.
Se usa mejor cuando ya tiene algunos colores base, pero desea colores complementarios para gradientes, bordes, fondos, sombras u otros elementos.
Esto es útil para los diseñadores que pueden estar comunicando la intención de color para los desarrolladores que usan SASS o PostCSS en sus compilaciones. También es una forma sólida de obtener una vista previa rápidamente de cómo se ven los tintes y los tonos para un color base que puede estar considerando para su diseño.
También he escuchado que es útil para maestros, profesionales de datos y personas que hacen presentaciones.
El color hexadecimal dado se convierte primero en RGB. Luego, cada componente del color RGB tiene el siguiente cálculo realizado en él, respectivamente.
New value = current value + ((255 - current value) x tint factor)New value = current value x shade factorEl nuevo valor es redondeado si es necesario, y luego se convierte en hexadecimal para mostrar.
Digamos que queremos tintes y tonos de Rebecca Purple, #663399.
102 + ((255 - 102) x .1) = 117.3 , redondeado a 11751 + ((255 - 51) x .1) = 71.4 , redondeado a 71153 + ((255 - 153) x .1) = 163.2 , redondeado a 163102 x .9 = 91.8 , redondeado a 9251 x .9 = 45.9 , redondeado a 46153 x .9 = 137.7 , redondeado a 138¡Este proyecto es de código abierto y me encantaría tu ayuda!
Si nota un error o desea que se agregue una función, presente un problema en GitHub. Si no tiene una cuenta allí, solo envíeme un correo electrónico con los detalles.
Si es un desarrollador y desea ayudar con el proyecto, comente sobre problemas abiertos o cree uno nuevo y comunique sus intenciones. Una vez que estamos de acuerdo en un camino hacia adelante, puede hacer una solicitud de extracción y llevarla a la línea de meta.
El generador Tint & Shade siempre será gratuito, pero su apoyo es muy apreciado.
Michael Edelstone diseñó y organizó el proyecto con gran ayuda de Nick Wing en los cálculos de color.
Utilizamos estas increíbles bibliotecas de código abierto en todo el proyecto:
Muchas gracias a Joel Carr, Sebastian Gutiérrez, Tim Scalzo, Aman Agarwal, Aleksandr Hovhannisyan, Shubhendu Sen y Luis Escarrilla por sus valiosas contribuciones.
