{"id":14927,"date":"2020-12-09T13:29:58","date_gmt":"2020-12-09T11:29:58","guid":{"rendered":"http:\/\/design-toolkit.recursos.uoc.edu\/?p=14927"},"modified":"2021-02-17T16:26:32","modified_gmt":"2021-02-17T14:26:32","slug":"color","status":"publish","type":"post","link":"http:\/\/design-toolkit-test.uoc.edu\/es\/color\/","title":{"rendered":"Color"},"content":{"rendered":"

Introducci\u00f3n<\/strong><\/h2>\n

En pantalla se utilizan formatos de color diferentes de los que suelen utilizarse en dise\u00f1o para otros soportes, puesto que se trabaja con color luz y no con pigmentos.<\/p>\n

Formatos de color<\/strong><\/h2>\n

Los dos formatos m\u00e1s utilizados son RGB y hexadecimal (este en HTML).<\/p>\n

Color RGB<\/strong><\/h3>\n

Un color RGB se especifica por los tres componentes b\u00e1sicos del color luz: rojo (red<\/em>), verde (green<\/em>) y azul (blue<\/em>).<\/p>\n

Cada par\u00e1metro define la intensidad del color de 0 (no intensidad) a 255 (m\u00e1xima intensidad). Por ejemplo, un RGB (255,0,0) corresponde a un rojo puro, en el que no hay ning\u00fan componente de verde o azul.<\/p>\n

RGB (0,0,0) corresponde a negro, mientras que RGB (255, 255, 255) corresponde a blanco.<\/p>\n

Color hexadecimal<\/strong><\/h3>\n

El formato hexadecimal se utiliza fundamentalmente en entorno web, y es soportado por todos los navegadores.<\/p>\n

Al igual que el RGB, se especifica tambi\u00e9n por los tres componentes b\u00e1sicos del color luz, aunque en esta ocasi\u00f3n la codificaci\u00f3n es diferente: #RRGGBB.<\/p>\n

Cada par\u00e1metro define la intensidad del color de 00 (no intensidad) a FF (m\u00e1xima intensidad). Por ejemplo, un hexadecimal #FF0000 corresponde a un rojo puro, en el que no hay ning\u00fan componente de verde o azul.<\/p>\n

#000000 corresponde a negro, mientras que #FFFFFF corresponde a blanco.<\/p>\n

Dise\u00f1ando con color<\/strong><\/h2>\n

Sistemas de color<\/strong><\/h3>\n

Uno de los primeros pasos al plantear un dise\u00f1o para pantalla consiste en definir el sistema de color con el que se trabajar\u00e1.<\/p>\n

Un sistema basado en demasiados colores puede generar un efecto visual ca\u00f3tico. En general, definir 2 o 3 colores de base dirige el dise\u00f1o a un efecto simple y bien estructurado.<\/p>\n

Sistema monocromo<\/strong><\/h3>\n

Se basa en 2 o 3 variaciones del mismo color (por ejemplo, rojo). El resultado suele ser limpio y elegante, aunque tambi\u00e9n puede resultar mon\u00f3tono.<\/p>\n

\"\"<\/p>\n

Sistema de colores an\u00e1logos<\/strong><\/h3>\n

Los colores de base se encuentran pr\u00f3ximos en el c\u00edrculo crom\u00e1tico, aunque no son variaciones del mismo. Por ejemplo, una combinaci\u00f3n de verde y azul nos dar\u00eda un sistema de color an\u00e1logo.<\/p>\n

En este caso, se determina un color dominante, y los otros son tratados como secundarios.<\/p>\n

Sistema de colores complementarios<\/strong><\/h3>\n

Los colores de base se encuentran en posiciones opuestas del c\u00edrculo crom\u00e1tico: por ejemplo, rojo y verde o azul y naranja.<\/p>\n

Este sistema genera fuertes contrastes visuales; para que el resultado visual no resulte ca\u00f3tico, tambi\u00e9n en este caso se determina un color dominante, y el otro se utiliza para destacar puntos de atenci\u00f3n.<\/p>\n

Sistema personalizado<\/strong><\/h3>\n

Adem\u00e1s de articular colores seg\u00fan su posici\u00f3n en el c\u00edrculo crom\u00e1tico, podemos generar nuestros propios sistemas de color, bas\u00e1ndonos en otros criterios o en el estilo de una marca determinada.<\/p>\n

Contraste<\/strong><\/h2>\n

Contraste y focos de atenci\u00f3n<\/strong><\/h3>\n

El contraste de color se puede utilizar para atraer la atenci\u00f3n del usuario hacia determinados elementos de pantalla. Por ejemplo, es un recurso muy utilizado para destacar claramente botones call-to-action<\/em> (aquellos que esperamos que el usuario clique cuando accede a la p\u00e1gina).<\/p>\n

El contraste puede utilizarse asimismo para destacar avisos o alertas.<\/p>\n

Contraste de texto<\/strong><\/h3>\n

Para garantizar la legibilidad, el texto tiene que mantener cierto nivel de contraste respecto el fondo. El contraste se expresa mediante el ratio de luminosidad de los dos colores comparados (1:1). Por ejemplo, un ratio de 4:1 implica que el fondo (4) tiene un nivel de luminosidad 4 veces mayor que el texto (1).<\/p>\n

Seg\u00fan las pautas de accesibilidad WCAG 2.0<\/a>, el ratio de contraste deber\u00eda ser el siguiente:<\/p>\n