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:
Rueda del color
- 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.
¿Qué son los colores complementarios análogos?
Los colores complementarios análogos son una combinación de dos conceptos de teoría del color: los colores complementarios y los colores análogos.
Para formar una combinación de colores complementarios análogos, se elige un color y su complementario, y luego se eligen los colores análogos cercanos a cada uno.
Ejemplo: Si tomamos el color azul y su complementario naranja, los colores complementarios análogos serían:
- Azul y sus análogos (azul-verde y azul-violeta)
- Naranja y sus análogos (rojo-naranja y amarillo-naranja)
Puedes usar las siguientes webs para diseñar paletas de colores para tu web:
- https://color.adobe.com/es/create/color-wheel
- https://coolors.co/
- https://paletton.com/, es la que se usaremos en los siguientes ejemplos.
- https://www.learnui.design/tools/data-color-picker.html#single
- https://palettte.app/
- https://logongas.github.io/color-schemes-generator/
- https://colorcolor.in/, permite ajustar las curvas de saturación y luminosidad.
Si conoces una web útil para la generación de paletas de colores no dudes en compartirla en los comentarios de abajo.
Paletas de colores
Necesitas más colores de los que piensas para no hacer cosas así:
Ejemplo de como NO usar el color
sino para hacer cosas así:
Ejemplo de como SI usar el color
La gama de blancos y grises la usas para hacer las cosas muy claras u oscuras. La gama del color principal obviamente la usas para casi todo, mientras que la gama del color alternativo la usas para destacar algo. Por último, los colores rojo, verde, amarillo, etc, son para cosas concretas que necesitan ese color. Por ejemplo para avisar del borrado de algo usar el rojo.
La luz viene del cielo
Las cosas que están “encima” debe ser más claras que las que están abajo.
De izquierda a derecha, ejemplo de como NO usar la luz y de como SI usar la luz
Contraste de colores
Al hacer un interfaz de usuario, jugar con dos colores que hagan contraste:
Web con buen uso del contraste
En la siguiente imagen se pueden ver la rueda de colores que hacen contraste:
Rueda de colores según su calidez
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.
Video voluntario:
Ejemplo con Color Scheme Designer
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.
Ejemplo de colores seguros
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.
¿Qué son los colores seguros?
¿Qué significa sRGB?
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.
¿Qué es la psicología del color?
AVANZADO Color en CSS
Lee el artículo Color en CSS.