Colores HWB
¿Qué son los colores HWB?
El color HWB es un modelo de color que describe un color utilizando tres valores:
- Hue / Tono: Este es el ángulo en la rueda de colores que define el color primario (por ejemplo, rojo, verde, azul). Se mide en grados (0 a 360).
- Whiteness / Blancura: Es el porcentaje de blanco añadido a la tonalidad principal. Se mide como un porcentaje (de 0 a 100).
- Blackness / Negritud: Es el porcentaje de negro añadido al tono principal. Se mide como un porcentaje (de 0 a 100).
Ayuda a determinar con precisión el color, dada la cantidad de color blanco o negro que contiene.
¿Cómo funciona?
Imagina que tienes un color puro (por ejemplo, rojo) y quieres hacerlo más claro o más oscuro. Si añades más blanco, el color se vuelve más claro (menos saturado). Si añades más negro, el color se vuelve más oscuro (más saturado).
¿Dónde se utilizan los colores HWB?
El color HWB se utiliza en varios campos en los que es necesario describir los colores de forma precisa e intuitiva:
- Diseño gráfico: Para crear paletas de colores armoniosas, elija colores para sitios web, logotipos, ilustraciones y más.
- Desarrollo web: Para especificar los colores de los elementos de la página web utilizando CSS.
- Procesamiento de imágenes: para editar colores en fotos, crear efectos de color y más.
El modelo HWB es una alternativa a los modelos de color más populares como RGB o HSL, porque es muy fácil trabajar con la saturación de color (si desea que el color sea más claro o más oscuro).
Ventajas de HWB
- Facilidad de uso: HWB proporciona una forma conveniente de controlar los colores sin cálculos matemáticos complicados. HWB facilita la creación de diferentes tonos simplemente cambiando los valores de blancura y negritud.
- Enfoque sencillo: La mayoría de las personas entienden intuitivamente lo que significa agregar blanco o negro al color principal. HWB es sencillo y fácil de usar, especialmente para las personas que no tienen un conocimiento profundo de la teoría del color.
- Fácil de diseñar: HWB le brinda más control de color que otros modelos como RGB. Si quieres hacer el color un poco más claro o más oscuro, es muy fácil de hacer en HWB.
Desventajas de HWB
- Limitaciones: HWB no cubre todos los colores posibles que existen en la naturaleza.
- No todas las aplicaciones son compatibles con HWB: Es posible que algunas aplicaciones de gráficos no sean compatibles con HWB.
- Menos popular: HWB no es tan común como otros modelos de color como RGB o HSL, por lo que a veces puede ser más difícil encontrar soporte o recursos para trabajar con él.
- Tal vez inexacto: En comparación con otros modelos, es posible que el HWB no proporcione la misma precisión al reproducir colores.
Ejemplos de uso de los colores HWB
- Creación de una paleta de colores para un sitio web: Puede seleccionar un tono primario (Tono) y cambiar los valores de Blancura y Negritud para crear diferentes tonos para botones, fondos, texto y más.
- Edición de fotos: Puede usar HWB para cambiar el brillo y el contraste de la imagen, hacerla más cálida o más fría.
- Diseño de logotipo: Puede usar HWB para crear un color de logotipo único que se destaque del resto.
Ejemplo
Uso de los colores HWB al diseñar una página web:
body {
background-color: hwb(240, 5%, 50%); /* Fondo azul */
color: hwb(60 5% 0%); /* Texto amarillo */
}
HWB (Hue, Whiteness, Blackness) es un estándar sugerido para CSS4.
¿Cómo se obtiene el color HWB?
Para obtener un color HWB, puede usar la calculadora HWB.
Calculadora HWB
Compatibilidad con HTML
HWB no es compatible con HTML (todavía), pero se sugiere como un nuevo estándar en CSS4.
Mientras esperas CSS4, puedes incluir la biblioteca de colores de W3Schools y usar HWB como un atributo HTML de la siguiente manera:
Ejemplo
<div data-w3-color="hwb(60, 50%, 0)">
<p>London is the capital city of England.
It is the most populous city in the United Kingdom,
with a metropolitan area of over 13 million inhabitants.</p>
</div>
<script src="/lib/w3color.js"></script>
Try It Yourself »
Conclusión. Por lo tanto, HWB es un modelo conveniente para trabajar con colores, especialmente si necesita ajustar rápidamente la claridad u oscuridad de un color.
Biblioteca de colores de W3Schools
La biblioteca JavaScript utilizada en el ejemplo anterior se puede descargar desde
https://www.w3schools.com/lib/w3color.js
También puede utilizar una descarga alternativa desde nuestro sitio web W3SchoolsES. ElMejor en el enlace: https://w3schoolsua.github.io/lib/w3color.js
