Colors

Colores

Actualizado el 14/03/2024

Esta es la paleta de colores de la ULPGC. En cada uno de los colores puede encontrar su nominación hexadecimal, su código RGB y el nombre de la variable SASS asignada.

Colores primarios

Los colores primarios son asignados a la mayoría de los componentes de la interfaz, desde los botones hasta la tipografía. Estos son los colores que deben prevalecer en el sitio web ya que representan los colores establecidos en el Manual de Identidad Visual Corporativa de la ULPGC.

Azul

#0066A1

rgb(0, 102, 161)

CSS

.color-blue

SASS

$color-blue

Naranja

#FFA100

rgb(255, 161, 0)

CSS

.color-orange

SASS

$color-orange

Gris Profundo

#565A5C

rgb(86, 90, 92)

CSS

.color-gray

SASS

$color-gray

Colores secundarios

Los colores secundarios de la interfaz se emplean para detalles y complementos de la interfaz como, por ejemplo, el color de las líneas divisoras o el color de fondo de un botón en estado activo. No deben usarse en exceso ni prevalecer sobre los colores primarios en ningún momento.

Los colores secundarios Rojo Alerta y Verde Éxito (y sus variantes) serán usados, de forma exclusiva, para modificar un elemento de la interfaz con el objetivo de mostrar un estado de alerta al usuario (por ejemplo, un mensaje de error)

Azul 50%

#7FB2D0

rgb(127, 178, 208)

CSS

.color-blue-50

SASS

$color-blue-50

Azul 80%

#3385B4

rgb(51, 133, 180)

CSS

.color-blue-80

SASS

$color-blue-80

Azul oscuro

#05476D

rgb(5, 71, 109)

CSS

.color-blue-dark

SASS

$color-blue-dark

Naranja 50%

#FFD07F

rgb(255, 208, 127)

CSS

.color-orange-50

SASS

$color-orange-50

Naranja 80%

#FFB433

rgb(255, 180, 51)

CSS

.color-orange-80

SASS

$color-orange-80

Naranja oscuro

#9C6609

rgb(156, 102, 9)

CSS

.color-orange-dark

SASS

$color-orange-dark

Gris 10%

#EEEEEE

rgb(238, 238, 238)

CSS

.color-gray-10

SASS

$color-gray-10

Gris 20%

#DDDEDE

rgb(221, 222, 222)

CSS

.color-gray-20

SASS

$color-gray-20

Gris 50%

#AAACAD

rgb(170, 172, 173)

CSS

.color-gray-50

SASS

$color-gray-50

Gris 80%

#787B7D

rgb(120, 123, 125)

CSS

.color-gray-80

SASS

$color-gray-80

Gris oscuro

#2D3133

rgb(45, 49, 51)

CSS

.color-gray-dark

SASS

$color-gray-dark

Rojo Alerta

#CB2E2D

rgb(203, 46, 45)

CSS

.color-red

SASS

$color-red

Rojo Alerta 10%

#FCECE8

rgb(252, 236, 232)

CSS

.color-red10

SASS

$color-red-10

Rojo Alerta oscuro

#8C290E

rgb(140, 41, 14)

CSS

.color-red-dark

SASS

$color-red-dark

Verde Éxito

#377B33

rgb(55, 123, 51)

CSS

.color-green

SASS

$color-green

Verde Éxito 10%

#E6F5EA

rgb(230, 245, 234)

CSS

.color-green-10

SASS

$color-green-10

Verde Éxito oscuro

#04591C

rgb(4, 89, 28)

CSS

.color-green-dark

SASS

$color-green-dark

Colores neutros

Los colores neutros de la interfaz tienen, como función principal, servir de contraste de fondo contra el color básico del sitio web, que debe ser blanco en la mayoría de los casos.

Como excepción, el color blanco se empleará también como reemplazo del color principal de un componente cuando se encuentre con un fondo oscuro con el que no exista suficiente contraste como, por ejemplo, la versión invertida de los botones (ver variable invertida de los botones)

Azul 10%

#E5EFF5

rgb(229, 239, 245)

CSS

.color-blue-10

SASS

$color-blue-10

Naranja 10%

#FFF5E5

rgb(255, 245, 229)

CSS

.color-orange-10

SASS

$color-orange-10

Gris 5%

#F6F7F7

rgb(246, 247, 247)

CSS

.color-gray-5

SASS

$color-gray-5

Blanco

#FFFFFF

rgb(255, 255, 255)

CSS

.color-white

SASS

$color-white