Color

Si bien la paleta principal de colores de Repsol es más amplia para ganar en flexibilidad, en digital se restringe a los siguientes colores.


La proporción de color es importante en el diseño de un producto digital. La nueva identidad de marca Repsol promueve una gran presencia de superficies blanca. Titulares o alguna superficies naranja, y la mayoría de elementos interactivos en turquesa.

Paleta de color primaria

Naranja Repsol 60

$c-orange-60

Naranja Repsol 70

$c-orange-70

Turquesa repsol 20

$c-turquoise-20

Turquesa Repsol 60

$c-turquoise-60

Turquesa Repsol 80

$c-turquoise-80

Turquesa Repsol 90

$c-turquoise-90

Paleta de color secundaria

Amarillo Repsol 60

$c-yellow-60

Azul Repsol 100

$c-blue-100

Paleta de colores neutrales

Blanco

$c-white

Gris 10

$c-grey-10

Gris 20

$c-grey-20

Gris 30

$c-grey-30

Gris 50

$c-grey-50

Gris 60

$c-grey-60

Gris 70

$c-grey-70

Paleta de color feedback

Los colores para feedback se han generado a partir de la gama de color Repsol para entorno digital. No obstante, para optimizar su valor semántico se han customizado individualmente en el porcentaje de opacidad de masa y trazo. Se ofrecen a continuación los nuevos valores hexadecimales resultantes.

Atención Original

$c-attention-original

Atención Masa

$c-attention-bulk

Atención Trazo

$c-attention-stroke

Confirmación Original

$c-confirmation-original

Confirmación Masa

$c-confirmation-bulk

Confirmación Trazo

$c-confirmation-stroke

Error Original

$c-error-original

Error Masa

$c-error-bulk

Error Trazo

$c-error-stroke

Notificación Original

$c-notification-original

Notificación Masa

$c-notification-bulk

Notificación trazo

$c-notification-stroke

Paleta de color visualización de datos

Colores base

Los colores presentes en esta página se denominan colores de base. Representan el punto inicial de las distintas opciones de visualización de datos que mostraremos posteriormente. Esta paleta de color queda restringida para el uso de visualizaciones de datos. Aparte de los colores de marca de Repsol, añadimos 2 colores nuevos (Burdeos y Morado), también podemos encontrar 4 opciones de color en escala de grises. El Burdeos y el Morado se ha generado para otorgar mas variedad a la gama original generando por consecuencia una paleta más flexible. Los colores en escala de grises nos servirán para diferenciar aquellos elementos que se sobreponen al gráfico mismo como horizontes o líneas de objetivo.

Naranja 60

$c-orange-60

Burdeos 70

$c-burgundy-70

Gris 30

$c-grey-30

Turquesa 60

$c-turquoise-60

Morado 60

$c-purple-60

Gris 50

$c-grey-50

Amarillo 50

$c-yellow-50

Negro

$c-black

Blanco

$c-white

Azul 80

$c-blue-80

Gris 70

$c-grey-70

01. Entorno comercial

En el entorno comercial, la paleta de color para la visualización de datos está compuesta por 12 colores. Es importante remarcar la secuencia de uso de la paleta. Para C, se definen 3 casos en función del número de categorías por cada una de las gráficas.

  • Caso 01 De 0 a 4 categorías
    1 Naranja 60 / 2 Turquesa 60 / 3 Amarillo 50 / 4 Azul 80
  • Caso 02 De 5 a 8 categorías
    1 Naranja 60 / 2 Naranja 30 / 3 Turquesa 60 / 4 Turquesa 30 / 5 Amarillo 50 / 6 Amarillo 20 / 7 Azul 80 / 8 Azul 30
  • Caso 03 Más de 8 categorías
    1 Naranja 60 / 2 Naranja 30/ 3 Turquesa 60 / 4 Turquesa 30 / 5 Amarillo 50 / 6 Amarillo 20 / 7 Azul 80 / 8 Azul 30 / 9 Burdeos 70 / 10 Burdeos 20 / 11 Morado 60 / 12 Morado 20

Naranja 60

$c-orange-60

Amarillo 50

$c-yellow-50

Burdeos 70

$c-burgundy-70

Naranja 30

$c-orange-30

Amarillo 20

$c-yellow-20

Burdeos 20

$c-burgundy-20

Turquesa 60

$c-turquoise-60

Azul 80

$c-blue-80

Morado 60

$c-purple-60

Turquesa 30

$c-turquoise-30

Azul 30

$c-blue-30

Morado 20

$c-purple-20

02. Entorno Power BI

En el entorno de Power Bi, la visualización de datos tiene algunas limitaciones. A la hora de configurar una paleta de color, la herramienta genera variaciones de tono de cada color a partir de una paleta de color de base que podemos importar en la herramienta.

La paleta que se enseña a continuación es una muestra del resultado una vez importada la paleta de color de base. No existe la posibilidad de controlar las tonalidades de color una vez superadas las 36 variantes; en ese caso Power BI las crea según su algoritmo.

Así mismo, la secuencia de color utilizada está controlada por Power BI y actúa de la siguente manera:

Naranja PB 00 (Base)

$c-orange-pb-00

Naranja PB 01

$c-orange-pb-01

Naranja PB 02

$c-orange-pb-02

Naranja PB 03

$c-orange-pb-03

Naranja PB 04

$c-orange-pb-04

Naranja PB 05

$c-orange-pb-05

Turquesa PB 00 (Base)

$c-turquoise-pb-00

Turquesa PB 01

$c-turquoise-pb-01

Turquesa PB 02

$c-turquoise-pb-02

Turquesa PB 03

$c-turquoise-pb-03

Turquesa PB 04

$c-turquoise-pb-04

Turquesa PB 05

$c-turquoise-pb-05

Amarillo PB 00 (Base)

$c-yellow-pb-00

Amarillo PB 01

$c-yellow-pb-01

Amarillo PB 02

$c-yellow-pb-02

Amarillo PB 03

$c-yellow-pb-03

Amarillo PB 04

$c-yellow-pb-04

Amarillo PB 05

$c-yellow-pb-05

Azul PB 00 (Base)

$c-blue-pb-00

Azul PB 01

$c-blue-pb-01

Azul PB 02

$c-blue-pb-02

Azul PB 03

$c-blue-pb-03

Azul PB 04

$c-blue-pb-04

Azul PB 05

$c-blue-pb-05

Burdeos PB 00 (Base)

$c-burgundy-pb-00

Burdeos PB 01

$c-burgundy-pb-01

Burdeos PB 02

$c-burgundy-pb-02

Burdeos PB 03

$c-burgundy-pb-03

Burdeos PB 04

$c-burgundy-pb-04

Burdeos PB 05

$c-burgundy-pb-05

Morado PB 00 (Base)

$c-purple-pb-00

Morado PB 01

$c-purple-pb-01

Morado PB 02

$c-purple-pb-02

Morado PB 03

$c-purple-pb-03

Morado PB 04

$c-purple-pb-04

Morado PB 05

$c-purple-pb-05

03. Secuencial

Una paleta secuencial varía entre dos colores que van desde el blanco o un tono más claro a uno más oscuro, variando uno o más de los parámetros en el espacio de color HSV / HSL (generalmente solo saturación o valor / luminosidad o ambas). Una paleta secuencial es adecuada para datos ordenados que progresan de menor a mayor. Las diferencias de claridad son claves en esta clase de paleta, asociando colores claros a datos que expresan un valor más bajo y colores oscuros dato que expresan valores más altos.

Secuencial Naranja 01

$c-orange-secuential-01

Secuencial Naranja 02

$c-orange-secuential-02

Secuencial Naranja 03

$c-orange-secuential-03

Secuencial Naranja 04

$c-orange-secuential-04

Secuencial Naranja 05

$c-orange-secuential-05

Secuencial Naranja 06

$c-orange-secuential-06

Secuencial Naranja 07

$c-orange-secuential-07

Secuencial Turquesa 01

$c-turquoise-secuential-01

Secuencial Turquesa 02

$c-turquoise-secuential-02

Secuencial Turquesa 03

$c-turquoise-secuential-03

Secuencial Turquesa 04

$c-turquoise-secuential-04

Secuencial Turquesa 05

$c-turquoise-secuential-05

Secuencial Turquesa 06

$c-turquoise-secuential-06

Secuencial Turquesa 07

$c-turquoise-secuential-07

04. Polarizada

La paleta polarizada pone énfasis en los valores de rango medio y máximo en ambos extremos del rango de datos. El punto crítico o ruptura en el medio de la secuencia, se representa con colores claros y los extremos de valores mínimo y altos se enfatizan con colores oscuros que tienen tonos contrastantes.

Divergente Naranja 01

$c-orange-divergent-01

Divergente Naranja 02

$c-orange-divergent-02

Divergente Naranja 03

$c-orange-divergent-03

Divergente 00

$c-divergent-00

Divergente Turquesa 01

$c-turquoise-divergent-01

Divergente Turquesa 02

$c-turquoise-divergent-02

Divergente Turquesa 03

$c-turquoise-divergent-03

Tipografía

La tipografía guía para el usuario a lo largo de toda su experiencia en el producto.

Grid

Descubre cómo estructurar contenido en la página.

Componentes

Conoce las unidades mínimas para construir productos digitales en Repsol.