Nuestra paleta consta de diez familias de colores, cada una de las cuales incluye siete colores individuales, además del blanco, del negro y de los grises. Las familias de colores se organizan en tres subpaletas en función del modo en que deben usarse: colores principales, colores secundarios y colores auxiliares.

Los colores individuales se etiquetan con números desde los claros a los oscuros comenzando con el número 10. Los colores pertenecientes a diferentes familias que comparten el mismo número son similares en saturación y valor, por lo tanto, tienen un peso visual parecido.

Nuestros colores principales son los que se encuentran en el logotipo de Red Hat®, y son los que más se asocian a nuestra marca: el rojo, el negro y el blanco. Si no estás seguro de qué colores utilizar, empieza siempre con ellos.

El color principal de nuestra marca es el red-50, también conocido como rojo Red Hat. Salvo ciertas excepciones específicas, todos los diseños visuales de Red Hat deben incluir el color red-50, para así vincularlos a nuestra marca.

Los diseños visuales y las interfaces de Red Hat también utilizan mucho el negro, el blanco y los grises como colores de fondo, de manera que resalte el resto del contenido. Hay diez tonos de gris neutro entre el negro y el blanco; esta variedad brinda la flexibilidad necesaria para crear profundidad, sombras y modos claros y oscuros en las interfaces de usuario.

Haz uso del espacio en blanco

En consonancia con nuestra personalidad de marca, el lenguaje de diseño de Red Hat hace énfasis en los diseños abiertos y amplios. Independientemente de los colores que utilices en los diseños visuales, prioriza el uso del espacio en blanco. Los diseños sencillos y despejados atraen la atención de los lectores hacia lo importante.

Utiliza el rojo deliberadamente

El rojo es un color intenso. En lugar de rellenar zonas amplias con el rojo Red Hat, usa toques de rojo para llamar la atención hacia las partes clave de los diseños visuales.

Cuando necesites llamar la atención del lector hacia una alerta o un mensaje de error importantes, usa el naranja de peligro, no el rojo Red Hat. Obtén más información sobre los colores de los estados a continuación.

Usa tonos más claros y más oscuros para acentuar el contenido

Usa tonos más claros y más oscuros de rojo, negro y blanco para acentuar el contenido y crear sombras y reflejos o rellenar espacios grandes, como los fondos. Esto permite que el rojo Red Hat se destaque.

Usa un fondo neutro con mucho espacio en blanco.

Utiliza el rojo red-50 para resaltar los elementos importantes y llamar la atención del lector.

No rellenes un diseño visual completo con color rojo red-50. El rojo es un color intenso. Intenta utilizar un fondo neutro en lugar de completar un espacio con el rojo Red Hat.

No utilices un tono más claro o más oscuro de rojo como única fuente de este color en tu diseño. Incluye siempre el rojo Red Hat.

No utilices el rojo red-50 para todos los elementos de un diseño. Cuando todo resalta, en realidad nada lo hace.

Si bien los colores principales son los que más identifican nuestra marca, hay situaciones en las que debemos variar. Nuestra paleta de colores secundarios incluye cinco familias de colores: el naranja, el amarillo, el verde azulado, el azul y el violeta.

Los diseños visuales exitosos de Red Hat muestran colores sobrios y estilizados. De esta manera, se mantienen sencillos pero, a la vez, permiten que la marca se destaque. En ningún proyecto selecciones más de dos familias de colores secundarios para usarlas con los colores principales.

Si no estás seguro sobre la forma de elegir y emplear los colores secundarios, intenta utilizar uno de nuestros grupos de colores. Las familias que se incluyen en estos grupos se complementan entre sí y mantienen el espíritu de la marca Red Hat al combinarse.

Usa dos familias de colores secundarios como máximo en tus diseños visuales. En la ilustración únicamente se aplicaron los colores rojo, naranja y violeta.

No utilices más de dos familias de colores secundarios; si lo haces, el diseño quedará demasiado recargado.

Incluye siempre el rojo red-50 para resaltar contenido en tu diseño y vincularlo con la marca Red Hat, incluso si aparece el logotipo de la marca.

No crees un recurso de Red Hat que solo muestre colores secundarios.

Usa una combinación de colores claros y oscuros en tu diseño visual para hacer distinciones. Estos gráficos utilizan los colores red-50, blue-70 y orange-30.

Evita usar demasiados colores con igual saturación en un mismo diseño porque los colores vibran y no muestran ninguna jerarquía.

Utiliza colores menos vibrantes en el fondo para que resalten las partes más importantes de tus diseños visuales.

No utilices los colores más vibrantes en los fondos. Puede resultar abrumador.

Además de nuestros colores principales y secundarios, tenemos dos paletas de colores auxiliares que sirven para expresar ideas más específicas cuando es necesario. Estos colores solo se deben utilizar para sus fines previstos, no como los colores secundarios.

Paleta de colores para personas

Nuestro objetivo es representar a las personas fielmente siempre, tal como son en la vida real, lo cual implica utilizar tonos de piel realistas en las ilustraciones, independientemente de la paleta de colores que se utilice para el resto del diseño. Obtén más información sobre la ilustración de personas.

Para cada ilustración de persona, elige una familia de tono de piel. Estos tonos se describen de manera distinta a los colores tradicionales. Los tonos fríos tienden hacia los rosas, mientras que los cálidos tienden hacia los amarillos y los marrones.

Aplica los colores de la paleta para personas solo a los tonos de piel de las personas que aparecen en las ilustraciones.

No utilices los tonos de la paleta de colores para personas con ningún otro fin.

Elige tonos fríos o cálidos para cada persona que aparezca en las ilustraciones.

No mezcles tonos de piel fríos y cálidos en una misma persona.

Paleta de estados

Cuando es necesario llamar la atención sobre un peligro o un resultado exitoso en nuestros diseños visuales, usamos los colores de estados. Estos se utilizan con mayor frecuencia en las interfaces, pero también es posible utilizarlos en otras aplicaciones cuando así se requiere. Los colores danger, que indican peligro, solo se deben utilizar para señalar que se produjo un error u otro problema. Los colores success, que indican un resultado exitoso, solo se deben utilizar para señalar que algún proceso se completó correctamente.

Nota: Los colores success pueden utilizarse en circunstancias específicas limitadas, en las cuales el color verde es absolutamente necesario para el diseño, como para una comunidad de diversidad, igualdad e inclusión (DEI) o un diseño sobre sostenibilidad.

Usa los colores de la paleta de estados solo para señalar información importante, como errores o resultados exitosos.

No utilices los colores de la paleta de estados para los demás elementos de un diseño visual.

Usa los colores de estados como una herramienta para llamar la atención.

No utilices un color de estado como el color principal o el fondo de un diseño visual.

Para nosotros, es fundamental crear experiencias y entornos inclusivos. Para centrarnos en la inclusividad, debemos asegurarnos de que todos puedan acceder a los recursos de Red Hat, como las diapositivas de las presentaciones, los documentos, las páginas web, las interfaces de los productos, las publicaciones en las redes sociales, etc.

El color cumple una función esencial en la accesibilidad, ya que afecta la manera en que los espectadores con diferencias visuales pueden percibir e interpretar la información. Es importante tomar decisiones conscientes sobre la forma en la que aplicas el color en tus trabajos.

El contraste se mide como una relación que describe la diferencia en el brillo que se percibe entre el color de primer plano y el de fondo. Un contraste bajo puede dificultar la lectura o el reconocimiento de los elementos, en especial a las personas con visión disminuida. Los diseños visuales informativos y aquellos que transmiten información que es fundamental para comprender el contenido, deben cumplir con lo establecido en las Pautas de Accesibilidad para el Contenido Web (WCAG) y obtener un nivel AA en cuanto a las relaciones de contraste.

Esto significa que, en los recursos de Red Hat, el texto pequeño (17 puntos o menos) debe tener una relación de contraste de 4.5:1 como mínimo. Por su parte, el texto grande (18 puntos o más) y los gráficos informativos (como los íconos) deben tener una relación de contraste de 3:1 como mínimo.

Utiliza una herramienta como Adobe Color para medir la relación de contraste entre los colores y consulta las WCAG para obtener más información sobre las relaciones de contraste estándar para los textos y otros gráficos.

Las personas con daltonismo no perciben las diferencias de color como la mayoría de la gente. Por esta razón, se les puede dificultar la diferenciación entre elementos visuales que solo se distinguen por el color, en especial en los gráficos y las interfaces.

Los casos más frecuentes de daltonismo son la incapacidad para diferenciar los colores rojo y verde (deuteranopía o protanopía) y los colores azul y amarillo (tritanopía).

Si solo te basas en el color para transmitir el significado de un elemento visual, es posible que las personas daltónicas no puedan comprenderlo. Por eso, además del color, utiliza texto o íconos, y elige colores con distintos niveles de saturación para diferenciar los objetos. Puedes utilizar una herramienta como Color Oracle para simular el daltonismo y ver el aspecto que tendría tu elemento visual para una persona con esta afección.

red-50 cumple los estándares de contraste de color si se utiliza sobre el negro black.

white cumple los estándares de contraste de color si se utiliza sobre el verde azulado teal-60.

red-50 cumple los estándares de contraste de color si se utiliza sobre el azul blue-10.

white cumple los estándares de contraste de color si se utiliza sobre el violeta purple-60.

red-50 no cumple los estándares de contraste de color si aparece sobre el gris gray-80.

white no cumple los estándares de contraste de color si aparece sobre el verde azulado teal-40.

red-50 no cumple los estándares de contraste de color si aparece sobre el azul blue-70.

white no cumple los estándares de contraste de color si aparece sobre el violeta purple-30.

Todos los recursos y los sistemas de diseño de Red Hat comparten la misma paleta de colores, pero en algunos de ellos estos se aplican de distintas maneras según las necesidades específicas.

El color en las presentaciones

Una presentación puede ser el primer contacto de un cliente o un partner con la marca Red Hat. Por ello, las presentaciones deben reflejar la imagen y la esencia de la empresa, así como seguir las prácticas recomendadas en materia de accesibilidad. Nuestra plantilla para presentaciones incluye propuestas de selecciones de colores.

Plantilla para presentaciones de Red Hat (se requieren las credenciales de acceso de Red Hat)

El color en las ilustraciones

Las ilustraciones nos permiten representar las tecnologías complejas o describir las ideas con diferentes matices. Si eliges la paleta de colores principales y utilizas el rojo para realzar ciertos elementos, te asegurarás de que las ilustraciones reflejen el estilo de Red Hat; sin embargo, si incorporas colores secundarios podrás lograr el tono adecuado para la historia.

Estándares para las ilustraciones de Red Hat

El color en la experiencia de los usuarios

En los contenidos web de Red Hat se utiliza nuestra paleta de colores a través de tokens de diseño, y se siguen los estándares de accesibilidad web para optimizar la experiencia de visualización en pantalla.

Visita ux.redhat.com