Red Hat SummitPaleta de colores
Los colores no solo ofrecen un aspecto atractivo, sino que influyen en la percepción que nuestro público tiene del tono y la relevancia del mensaje que transmitimos. Con el rojo como protagonista, la paleta de colores combina la practicidad con el estilo de nuestra marca para despertar el interés del público.
No es cualquier rojo
Todas las marcas poseen un color que las identifica, pero pocas llevan uno tan ligado a su identidad principal. El color rojo desempeña un papel fundamental en la historia de Red Hat desde sus inicios y representa nuestra pasión por el trabajo en equipo y el deseo de ayudar a los demás.
El color de Red Hat es un rojo puro (sin azul ni verde).
#ee0000
RGB 238, 0, 0
CMYK 0, 98, 85, 0 Pantone 1788 C
El rojo Red Hat (también conocido como red-50) capta la atención del público, así que hay que utilizarlo de manera sensata. Los toques de rojo identifican nuestra marca y resaltan los aspectos relevantes sin sobrecargar.
Paleta de colores principales
Cuando creamos un producto que representa a la perfección a Red Hat, recurrimos a nuestros colores principales, es decir, aquellos que aparecen en el logotipo y que son los que más se asocian a nuestra marca. Los matices y las tonalidades de rojo y los grises neutros aportan flexibilidad para crear profundidad y sombras.
Paleta de colores secundarios
La paleta de colores secundarios aporta dinamismo y complementa el rojo Red Hat, sin restarle protagonismo. Para lograr un mayor impacto, combina solo uno o dos colores secundarios con el rojo de la marca.
Colores degradados
Usamos tonos degradados sutiles para rellenar y acentuar el fondo a fin de aportar mayor profundidad y generar más interés. Nunca deben ser el centro de atención de la composición: no deben eclipsarla, sino realzarla.
Nuestra metodología para utilizar los colores
Para mantener el aspecto de Red Hat, no basta con utilizar los colores de nuestra paleta. Prestar atención a la proporción de cada color que se usa y el lugar en el que aparece es igual de importante. Para emplear el color de manera uniforme, sigue estos principios básicos.
Mantén un estilo sencillo
Utiliza colores sobrios y estilizados. Mantén un estilo sencillo y aprovecha los espacios libres amplios para destacar el mensaje y permitir que el público se centre en los aspectos esenciales.
Usa el rojo con un propósito determinado
El rojo es un color intenso. En lugar de usarlo para cubrir todo un espacio, pon toques de rojo para resaltar los elementos más importantes de la composición.
Crea un equilibrio
Utiliza los matices más claros, las tonalidades más oscuras y los colores degradados más sutiles en los objetos grandes y los fondos. Usa los valores de color más saturados con moderación para destacar algún elemento concreto, facilitar la exploración o generar mayor interés.
Ten en cuenta las fuentes de color
Amplía la imagen y observa los colores de todos los elementos de la composición. Ten en cuenta cómo interactúan entre sí y hacia dónde se dirige la atención.
Grupos de colores
Para facilitar la elección de colores que armonicen entre sí, ofrecemos una serie de grupos de colores que combinan los tonos de las paletas de diferentes maneras. Empieza cada proyecto con uno de estos grupos.
Para obtener información más específica sobre el color en las interfaces de usuario, visita ux.redhat.com (diseño web) y PatternFly (diseño de productos).
Para obtener información más específica sobre el color en las interfaces de usuario, visita ux.redhat.com (diseño web) y PatternFly (diseño de productos).
Aspectos que debes evitar
No utilices colores que no pertenezcan a la paleta de colores de Red Hat.
No llenes toda la presentación con el color rojo de Red Hat (rojo-50). Como el rojo es intenso, úsalo para agregar unos toques de color.
Utiliza dos colores secundarios, como máximo, en un mismo elemento visual; cuantos menos colores sean, mejor.
Recuerda que debes usar el rojo de Red Hat (red-50) para todos los productos de la marca.
Procura utilizar colores que sean accesibles. Verifica siempre la relación de contraste del texto y otros elementos con el color de fondo.
Evita el uso excesivo de los colores degradados. Utilízalos para aportar mayor profundidad y sofisticación.
Paletas de colores auxiliares
Además de nuestros colores principales y secundarios, tenemos dos paletas de colores auxiliares que pueden usarse cuando sea necesario. Estos colores solo se deben utilizar para los fines previstos, no como colores secundarios.
Paleta de información
La paleta de información se reserva exclusivamente para los estados y las actividades interactivas. Tiene un carácter funcional y no decorativo. Puedes utilizar estos colores en interfaces, páginas web, gráficos y diagramas, informes y otros elementos visuales informativos.
Paleta de colores para personas
Nuestro objetivo consiste en representar siempre a las personas tal y como son en la vida real. Solo deben utilizarse para ilustrar los tonos de piel de las personas. Para cada una, elige una opción. Obtén más información sobre la ilustración de personas.
Contextualización con colores
Los colores pueden comunicar rápidamente cualquier información o mensaje determinado. Utilizamos asociaciones de colores conocidas en las interfaces de usuario, así como en presentaciones de diapositivas, infografías y diagramas, para garantizar la uniformidad en todo el proceso de comunicación con el cliente.
| Color | Asociación | Más información |
| Red Hat | El rojo es el color de nuestra marca. No utilices este color para representar aspectos negativos. | |
| Riesgo, disminución | Se produjo un fenómeno negativo, como un error crítico o la disminución de un valor. | |
| Precaución | Se produjo un error o una acción que no es de carácter crítico. | |
| Advertencia | Toma medidas de inmediato para evitar una acción o un error críticos. | |
| Éxito, mejora | Se produjo un acontecimiento positivo, como una acción exitosa o el aumento de un valor. | |
| Enlace o interacción | Si se hace clic en el objeto o en el texto, aparece un hipervínculo o se produce un cambio de estado. | |
| Información o recomendación | Hay información de interés disponible. | |
| Neutral | Un botón o determinada información no están disponibles o carecen de importancia. |
Muestrario de colores
La paleta de colores se divide en 11 gamas cromáticas diferentes. 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 gamas que comparten el mismo número son similares en saturación y valor, por lo tanto, tienen un peso visual parecido.
Haz clic en uno de los muestrarios de colores para copiar el código hexadecimal en tu portapapeles o descarga nuestros archivos de muestrarios.
Los colores de nuestra marca
Con estos colores, representamos y damos a conocer la marca Red Hat.
Paleta de colores principales
red-10
#fce3e3
red-20
#fbc5c5
red-30
#f9a8a8
red-40
#f56e6e
red-50
(Red Hat red)
#ee0000
RGB 238 0 0
CMYK 0 98 85 0
Pantone 1788C
red-60
#a60000
red-70
#5f0000
red-80
#3f0000
white
#ffffff
RGB 255 255 255
CMYK 0 0 0 0
Pantone White
gray-10
#f2f2f2
gray-20
#e0e0e0
gray-30
#c7c7c7
gray-40
#a3a3a3
gray-50
#707070
gray-60
#4d4d4d
gray-70
#383838
gray-80
#292929
gray-90
#1f1f1f
gray-95
(negro para la experiencia del usuario)
#151515
black
#000000
RGB 0 0 0
CMYK 60 40 40 100
Pantone Black C
Paleta de colores secundarios
orange-10
#ffe8cc
orange-20
#fccb8f
orange-30
#f8ae54
orange-40
#f5921b
RGB 245 146 27
CMYK 0 50 100 0
Pantone 144C
orange-50
#ca6c0f
orange-60
#9e4a06
orange-70
#732e00
orange-80
#4d1f00
yellow-10
#fff4cc
yellow-20
#ffe072
yellow-30
#ffcc17
RGB 248 204 23
CMYK 0 15 100 0
Pantone 108C
yellow-40
#dca614
yellow-50
#b98412
yellow-60
#96640f
yellow-70
#73480b
yellow-80
#54330b
teal-10
#daf2f2
teal-20
#b9e5e5
teal-30
#9ad8d8
teal-40
#63bdbd
teal-50
#37a3a3
RGB 55 163 163
CMYK 80 10 30 10
Pantone 2234C
teal-60
#147878
teal-70
#004d4d
teal-80
#003333
purple-10
#ece6ff
purple-20
#d0c5f4
purple-30
#b6a6e9
purple-40
#876fd4
purple-50
#5e40be
RGB 94 64 190
CMYK 85 80 0 0
Pantone 2097C
purple-60
#3d2785
purple-70
#21134d
purple-80
#1b0d33
Paletas de colores auxiliares
Paleta de información
Estos colores son de carácter funcional. Solo deben utilizarse para los fines previstos y no como elementos visuales decorativos.
success-green-10
#e9f7df
success-green-20
#d1f1bb
success-green-30
#afdc8f
success-green-40
#87bb62
success-green-50
#63993d
RGB 99 153 61
CMYK 70 0 100 10
Pantone 7737C
success-green-60
#3d7317
success-green-70
#204d00
danger-orange-10
#ffe3d9
danger-orange-20
#fbbea8
danger-orange-30
#f89b78
danger-orange-40
#f4784a
danger-orange-50
#f0561d
RGB 240 86 29
CMYK 0 83 100 0
Pantone 165C
danger-orange-60
#b1380b
danger-orange-70
#731f00
interaction-blue-10
#e0f0ff
interaction-blue-20
#b9dafc
interaction-blue-30
#92c5f9
interaction-blue-40
#4394e5
interaction-blue-50
#0066cc
RGB 0 102 204
CMYK 85 55 0 5
Pantone 2387C
interaction-blue-60
#004d99
interaction-blue-70
#003366
Paleta de colores para personas
Estos tonos se describen de manera distinta a las asociaciones de colores tradicionales. Los tonos fríos tienden hacia los rosas, mientras que los cálidos tienden hacia los amarillos y los marrones. Obtén más información sobre la ilustración de personas.
cool-tone-10
#ffe3dc
cool-tone-20
#f7c8bb
cool-tone-30
#e8a997
cool-tone-40
#ce8873
cool-tone-50
#a66552
cool-tone-60
#724335
cool-tone-70
#40251d
warm-tone-10
#ffe9dc
warm-tone-20
#f9d5c0
warm-tone-30
#edbea1
warm-tone-40
#d8a381
warm-tone-50
#b88564
warm-tone-60
#8e6549
warm-tone-70
#664934
Accesibilidad
Tener una postura abierta y de colaboración implica ofrecer experiencias justas e inclusivas. Cualquier persona debería poder acceder a todos los recursos de Red Hat (diapositivas de presentaciones, páginas web, interfaces de productos, publicaciones en redes sociales, etc.).
El color desempeña un papel fundamental en lo que respecta a la accesibilidad, ya que afecta la forma en que las personas con alteraciones visuales perciben y asimilan la información. Por eso, es importante tomar decisiones inteligentes a la hora de usar colores en nuestro trabajo.
Contraste
El contraste es 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.
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.
El rojo red-50 cumple los estándares de contraste de color si se utiliza sobre el negro (black).
El blanco (white) cumple los estándares de contraste de color si se utiliza sobre el verde azulado teal-60.
El negro (black) cumple los estándares de contraste de color si se utiliza sobre el rojo red-10.
El blanco (white) cumple los estándares de contraste de color si se utiliza sobre el violeta purple-60.
El rojo red-50 no cumple los estándares de contraste de color si se utiliza sobre el gris gray-80.
El blanco (white) no cumple los estándares de contraste de color si se utiliza sobre el verde azulado teal-40.
El negro (black) no cumple los estándares de contraste de color si se utiliza sobre el rojo red-60.
El blanco (white) no cumple los estándares de contraste de color si se utiliza sobre el violeta purple-30.
Daltonismo
Las personas con daltonismo no perciben las diferencias de color como la mayoría de la gente, lo cual puede dificultar la comprensión de la información que solo se distingue por el color, en especial la de gráficos o 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).
Cuando solo te basas en el color para transmitir el significado de un elemento visual, es posible que las personas con daltonismo no puedan comprenderlo. Por eso, utiliza también texto o íconos y elige colores con distintos niveles de saturación para diferenciar los objetos. Usa una herramienta como Color Oracle para simular el aspecto que podría tener tu elemento visual para una persona con esta condición.
Además de los colores, utiliza etiquetas para identificar las distintas secciones de los diagramas, los gráficos y las interfaces.
No te bases únicamente en el color, ya que una persona daltónica no podrá distinguir los colores y, por tanto, le será imposible comprender la información.
Vibración cromática
Las tonalidades saturadas con una intensidad similar pueden producir vibraciones cuando se utilizan juntas y, como consecuencia, crear un efecto borroso en los bordes. Esto puede ser difícil de mirar y distinguir para cualquier persona, e incluso dañino para quienes tienen problemas de visión.
Combina colores vivos con otros más neutros y con menor saturación.
Evita usar colores con una intensidad similar en la misma zona.
Recursos relacionados
Conceptos básicos de accesibilidad en el diseño digital
Pautas de Accesibilidad para el Contenido Web (WCAG)
