Paleta 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.

How we use color

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.

Una imagen que muestra los matices y las tonalidades del rojo, el blanco y el negro.

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. 

Una imagen que muestra los colores anaranjado, amarillo, verde azulado y violeta.

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.

Una imagen que muestra varias opciones de colores degradados de la paleta.

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.

Core light
Una paleta de colores muestra tres maneras distintas de aplicar el grupo de colores claros. Los fondos pueden ser gris gray-10 o blanco (white), mientras que el texto puede ser de color negro (black) o rojo red-50. Los demás elementos gráficos pueden ser de cualquier matiz o tonalidad de blanco, negro o rojo de Red Hat. En el lado derecho, se muestran cuatro imágenes de ejemplo en las que se utiliza el grupo de colores oscuros brillantes.
Core dark
Una paleta de colores muestra tres maneras distintas de aplicar el grupo de colores oscuros. Los fondos pueden ser negro (black) o gris gray-80, mientras que el texto puede ser de color blanco (white) o rojo red-50. Los demás elementos gráficos pueden ser de cualquier matiz o tonalidad de blanco, negro o rojo de Red Hat. En el lado derecho, se muestran cuatro imágenes de ejemplo en las que se utiliza el grupo de colores oscuros.
Core red
Una paleta de colores muestra tres maneras distintas de aplicar el grupo de colores rojos. Los fondos pueden ser rojo red-10 o blanco (white), mientras que el texto puede ser de color negro (black) o rojo red-50. Los demás elementos gráficos pueden ser de cualquier matiz o tonalidad de blanco, negro o rojo de Red Hat. En el lado derecho, se muestran cinco imágenes de ejemplo en las que se utiliza el grupo de colores rojos.
Expressive light
Una paleta de colores muestra tres maneras distintas de aplicar el grupo de colores claros brillantes. Los fondos pueden ser gris gray-10, rojo red-10 o blanco (white), mientras que el texto puede ser de color negro (black), violeta purple-80 o rojo red-50. Los demás elementos gráficos pueden ser de cualquier matiz o tonalidad de amarillo, anaranjado, verde azulado, blanco, negro, violeta o rojo de Red Hat. En el lado derecho, se muestran tres imágenes de ejemplo en las que se utiliza el grupo de colores oscuros brillantes.
Expressive dark
Una paleta de colores muestra tres maneras distintas de aplicar el grupo de colores oscuros brillantes. El fondo puede ser negro (black) o violeta purple-80, mientras que el texto puede ser de color blanco (white) o rojo. Los demás elementos gráficos pueden ser de cualquier matiz o tonalidad de amarillo, anaranjado, verde azulado, blanco, negro, violeta o rojo de Red Hat. En el lado derecho, se muestran tres imágenes de ejemplo en las que se utiliza el grupo de colores oscuros brillantes.
Interface light
Una paleta de colores muestra tres maneras distintas de aplicar el grupo de colores claros para la interfaz. Los colores de fondo más habituales son el blanco (white) y los grises gray-10 y gray-30, mientras que el texto puede ser de color gris gray-95 o gray-80, azul interaction-blue-50 o rojo red-50. Los demás elementos gráficos pueden presentar matices o tonalidades de otros colores de la paleta de Red Hat. En el lado derecho, se muestran tres imágenes de ejemplo en las que se utiliza el grupo de colores rojos.

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).

Interface dark
Una paleta de colores muestra tres maneras distintas de aplicar el grupo de colores oscuros para la interfaz. Los colores de fondo más habituales son los grises gray-95, gray-80 y gray-70, mientras que el texto puede ser blanco (white), gris gray-30, azul interaction-blue-20 o rojo red-50. Los demás elementos gráficos pueden presentar matices o tonalidades de otros colores de la paleta de Red Hat. En el lado derecho, se muestran tres imágenes de ejemplo en las que se utiliza el grupo de colores oscuros para la interfaz.

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

Una imagen que muestra un uso incorrecto: una presentación en la que se utilizan colores que no pertenecen a la paleta oficial de Red Hat.

No utilices colores que no pertenezcan a la paleta de colores de Red Hat.

Una imagen que muestra un uso incorrecto: un ejemplo de un anuncio con el fondo rojo 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.

Imagen que muestra un uso incorrecto: una ilustración en la que se emplea el rojo y tres colores secundarios.

Utiliza dos colores secundarios, como máximo, en un mismo elemento visual; cuantos menos colores sean, mejor.

Imagen que muestra un uso incorrecto: una publicación en las redes sociales en la que solo se utilizan colores secundarios.

Recuerda que debes usar el rojo de Red Hat (red-50) para todos los productos de la marca.

Imagen que muestra un uso incorrecto: una diapositiva de presentación con colores de bajo contraste.

Procura utilizar colores que sean accesibles. Verifica siempre la relación de contraste del texto y otros elementos con el color de fondo.

Imagen que muestra un uso incorrecto: el encabezado del sitio web con varios colores degradados.

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.

Una imagen que muestra el color azul (information-blue), verde (success-green) y anaranjado (danger-orange).

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.

Una imagen que muestra los matices y las tonalidades de los tonos fríos y cálidos.

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.

ColorAsociaciónMás información
redRed HatEl rojo es el color de nuestra marca. No utilices este color para representar aspectos negativos.
danger-orangeRiesgo, disminuciónSe produjo un fenómeno negativo, como un error crítico o la disminución de un valor.
orangePrecauciónSe produjo un error o una acción que no es de carácter crítico.
yellowAdvertenciaToma medidas de inmediato para evitar una acción o un error críticos.
success-greenÉxito, mejoraSe produjo un acontecimiento positivo, como una acción exitosa o el aumento de un valor.
interaction-blueEnlace o interacciónSi se hace clic en el objeto o en el texto, aparece un hipervínculo o se produce un cambio de estado.
purpleInformación o recomendaciónHay información de interés disponible.
grayNeutralUn botón o determinada información no están disponibles o carecen de importancia.
Color swatches

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

Accessibility

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.

Texto e íconos en rojo (red-50) sobre un fondo negro (black)

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

Texto e íconos en blanco (white) sobre un fondo verde azulado (teal-60)

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

Texto e íconos en negro (black) sobre un fondo rojo (red-10)

El negro (black) cumple los estándares de contraste de color si se utiliza sobre el rojo red-10.

Texto e íconos en blanco (white) sobre un fondo violeta (purple-80)

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

Texto e íconos en rojo (red-50) sobre un fondo gris (gray-80)

El rojo red-50 no cumple los estándares de contraste de color si se utiliza sobre el gris gray-80.

Texto e íconos en blanco (white) sobre un fondo verde azulado (teal-40)

El blanco (white) no cumple los estándares de contraste de color si se utiliza sobre el verde azulado teal-40.

Texto e íconos en negro (black) sobre un fondo rojo (red-60)

El negro (black) no cumple los estándares de contraste de color si se utiliza sobre el rojo red-60.

Texto e íconos en blanco (white) sobre un fondo violeta (purple-30)

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.

Un gráfico circular con etiquetas que se adjuntan a la sección correspondiente.

Además de los colores, utiliza etiquetas para identificar las distintas secciones de los diagramas, los gráficos y las interfaces.

Imagen que muestra un uso incorrecto: un gráfico circular con un código de colores. Las etiquetas no indican las secciones del gráfico.

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.

Un ejemplo de colores con alto contraste que no vibran.

Combina colores vivos con otros más neutros y con menor saturación.

Imagen que muestra un uso incorrecto: un ejemplo de colores con poco contraste que vibran.

Evita usar colores con una intensidad similar en la misma zona.

Recursos relacionados

Ícono de sitio web.

Conceptos básicos de accesibilidad en el diseño digital

Ícono de lista de verificación.

Pautas de Accesibilidad para el Contenido Web (WCAG)

Ícono de ojo.

Accesibilidad visual en Red Hat