Introducción
Una misma página se puede ver de distinta forma según la plataforma, sistema operativo, navegador y monitor empleados.
Los colores están relacionados entre sí. La rueda de color formada por 12 colores es una herramienta gráfica importante para crear combinaciones cromáticas y que nos permite hacer distintas clasificaciones de los colores:
- Colores primarios, secundarios y terciarios.
- Hay tres colores primarios: rojo, amarillo y azul, que están dispuestos en la rueda formando un triángulo equilátero.
- En el lado de la rueda opuesto a cada uno de los colores primarios se sitúan los tres colores secundarios: verde, púrpura y naranja. Cada uno de los colores secundarios se consigue con la mezcla de sus dos colores primarios adyacentes. El verde viene de la mezcla del amarillo y el azul, el púrpura viene de la mezcla del azul y el rojo y, el naranja viene de la mezcla del rojo y el amarillo. Los tres colores secundarios forman también un triángulo equilátero.
- Por último, están los seis colores terciarios que son los que se consiguen con la mezcla del color primario y del color secundario adyacentes al mismo. Así, tenemos el azul-verdoso, el amarillo-verdoso, el amarillo-anaranjado, el rojo-anaranjado, el rojo-púrpura y el azul-púrpura.
- Colores fríos y colores cálidos.
- Son colores fríos todos los colores situados en la rueda de color entre el amarillo-verdoso y el púrpura.
- Son colores cálidos, todos los colores situados en la rueda de color entre el rojo-púrpura y el amarillo.
- Colores complementarios, análogos y monocromáticos.
- Los colores complementarios son los colores que están en lados opuestos de la rueda de color. Se utilizan para crear contraste.
- Los colores análogos son los colores que se encuentran juntos en la rueda de color. Se suelen usar para crear la armonía del color.
- Los colores monocrómáticos son todos los tonos y matices de un mismo color.
Puedes usar las siguientes webs para diseñar paletas de colores para tu web:
- https://paletton.com/, es la que se usaremos en los siguientes ejemplos.
- https://coolors.co/
- https://color.adobe.com/es/create/color-wheel
Si conoces una web útil para la generación de paletas de colores no dudes en compartirla en los comentarios de abajo.
Sistema RGB
El ojo humano percibe los colores: rojo, verde y azul y, el resto de los colores se consiguen con la adición de estos tres colores en diferentes proporciones. El blanco se consigue con la mezcla de los tres colores puros y se considera el negro como la ausencia de color. A estos colores se les llama colores aditivos y el ordenador se basa en este sistema para la representación de los colores dando lugar a lo que conocemos como Modo de color RGB. RGB es el acrónimo de los nombres de los colores rojo, verde y azul en inglés: Red, Green, Blue.
Los ordenadores emplean estos tres colores para representar cualquier color de la escala cromática. Pero ¿cómo lo hace? El ordenador utiliza 8 bits de información para representar cada color. La escala monocromática de un color viene dada por todas las posibles combinaciones de estos 8 bits, en total 256. Si tenemos en cuenta que tenemos una escala de 0 a 255 para representar cada color, es decir, 256 grados de cada color y, que el resto de los colores se consiguen mezclando estos tres ¿cuántos colores tenemos en total? Para saberlo tenemos que calcular todas las combinaciones que existen multiplicando tres veces el número de grados de cada color: 256 x 256 x 256, lo que nos da 16.777.216 colores.
A la hora de representar cada color utilizamos este modelo RGB y lo podemos hacer empleando tanto el sistema de numeración decimal como el sistema de numeración hexadecimal.
En la imagen anterior puedes ver las diferentes informaciones suministradas por la página web sobre esquemas de colores de diseño cuyo enlace tienes disponible en la página anterior de este mismo apartado. Se ha elegido en el sistema RGB una tríada compuesta por un color primario: el azul y los equidistantes a su color complementario. En la parte inferior de la imagen puedes ver los códigos hexadecimales correspondientes a cada combinación de color y, en la parte de la derecha de la imagen, sobre un fondo blanco, puedes ver la equivalencia en decimal de estos códigos hexadecimales.
¿Qué es el daltonismo?
El daltonismo es un problema que tienen algunas personas a la hora de percibir los colores y conocerlo te será de ayuda a la hora de tomar decisiones en cuanto a la elección de los mismos.
¿Qué es el modelo de colores CMYK?
CMYK es un modelo de color utilizado principalmente en la impresión y representa las siglas de los cuatro colores primarios de pigmento: Cian, Magenta, Yellow (Amarillo) y Key (Negro).
¿Conoces a la empresa Pantone?
La empresa Pantone ha desarrollado el sistema Pantone Matching System (PMS) que se utiliza para estandarizar los colores, asegurando que se puedan reproducir de manera consistente en distintos materiales y en cualquier parte del mundo. El sistema Pantone asigna un número único a cada color, lo que permite a diseñadores, impresores y fabricantes referirse a un color específico de manera precisa, sin variaciones interpretativas.
Pantone cada año define el Pantone Color Of The Year ofreciendo ideas de cómo se puede utilizar y con qué otros colores se puede combinar.
Colores seguros
Hay monitores que sólo permiten visualizar 256 colores. Hay navegadores que poseen una paleta de sólo 216 colores conocidos en el ámbito del diseño web como colores seguros. Emplear estos colores seguros es una forma de garantizar que nuestro sitio Web se verá del mismo modo en todos los navegadores.
Los colores seguros son los que se forman con las combinaciones de los tres colores rojo, verde y azul pero sólo con los valores hexadecimales: 00, 33, 66, 99, CC y FF. Son seis grados distintos de cada color y por eso hay 216 colores en total ya que 216 es el resultado de multiplicar 6 x 6 x 6.
La imagen se corresponde a la misma elección que vimos en la imagen de la página anterior de este mismo apartado, pero seleccionando esta vez los colores seguros de la Web en los enlaces de la barra superior izquierda. Puedes comprobar que todos los códigos hexadecimales se corresponden con los mencionados en el párrafo anterior.
Psicología del color
La psicología del color es un campo de estudio que explora cómo los diferentes colores pueden influir en el comportamiento, las emociones y las decisiones de las personas. Aunque no es una ciencia exacta, se basa en la idea de que los colores pueden evocar reacciones emocionales o psicológicas específicas, y esta percepción puede variar según el contexto cultural, las experiencias personales y el entorno.
Color en CSS
A la hora de utilizar el color en CSS debemos conocer, al menos, 3 formas de definir colores a los elementos HTML:
- Mediante palabras clave. Lee el artículo Códigos de colores.
- Mediante la función RGB. Lee el artículo La función RGB().
- Mediante el formato hexadecimal. Lee el artículo El formato hexadecimal.