Color

Fundamentos

Color

El esquema de color y sus usos correspondientes.

Primarios: para distinguir las acciones y los elementos de interpolación.
Grises: para componer la página con sus secciones y dar forma a los textos.
Retroalimentación: para asignar significados semánticos afirmativos, de advertencia, negativos e informativos a los elementos de la composición.
Decorativo: para resaltar determinadas zonas y detalles en los diseños.
Otros: para estilos muy concretos que se repiten en todo el sistema.

Primarios

Ayudan a distinguir las acciones y elementos de interacción.

200

#E8EFFA

rgb(232, 239, 250)

hsl(217, 64, 95)

300

#D7E2F5

rgb(215,226, 245)

hsl(218 60, 90)

400

#9CB9E5

rgb(156, 185, 229)

hsl(216, 58, 75)

500

#114DA6

rgb(17,77, 166)

hsl(216, 81, 36)

600

#093473

rgb(9, 52, 115)

hsl(216, 85, 24)

700

#04214D

rgb(4, 22, 77)

hsl(216, 90, 16)

Secundarios

Permiten resaltar ciertas zonas y detalles en los diseños.

500

#C33400

rgb(173, 21, 25)

hsl(358, 78, 38)

600

#802200

rgb(128, 34, 0)

hsl(16, 100, 25)

700

#521600

rgb(82, 22, 0)

hsl(16, 100, 16)

Grises

Ayudan a componer la página con sus secciones y dar forma a los textos

000

#FFFFFF

rgb(255, 255, 255)

hsl(0, 0, 100)

100

#F7F7F8

rgb(247, 247, 248)

hsl(240, 7, 97)

200

#EEEFF0

rgb(238, 239, 240)

hsl(210, 6, 94)

#DCDFE3

rgb(220, 223, 227)

hsl(214, 11, 88)

400

#B5B8BE

rgb(181, 184, 190)

hsl(220, 6, 73)

500

#696E75

rgb(105, 110, 117)

hsl(215, 5, 44)

600

#363D47

rgb(54, 61, 71)

hsl(215, 14 25)

700

#0A0E14

rgb(10, 14, 20)

hsl(216, 33, 6)

Feedback

Permiten asignar significados semánticos de tipo afirmativo aviso, negativo e informativo a los elementos de la composición.

Error

100

#FCF6F5

rgb(252, 246, 245)

hsl(9, 54, 97)

200

#F5E1DC

rgb(245, 225, 220)

hsl(12, 56, 91

300

#E8886F

rgb(232, 136, 111)

hsl(12, 72, 67)

400

#C44727

rgb(196, 71, 39)

hsl(12, 67, 46)

500

#5E1503

rgb(94, 21, 3)

hsl(12, 94, 19)

600

#330C02

rgb(51, 12, 2)

hsl(12, 92, 10)

Exito

100

#F3F9F6

rgb(243, 249, 246)

(150, 33, 96)

200

#E5F5EC

rgb(299, 245, 236)

hsl(146, 44, 93)

300

#4DB277

rgb(77, 178, 119)

hsl(145, 40, 50)

400

#198044

rgb(25,128,68)

hsl(145, 67, 30)

500

#015223

rgb(1, 82, 35)

hsl(145, 98, 16)

600

#0A2B18

rgb(10, 43, 24)

hsl(145, 62, 10)

Advertencia

100

#FFFAF2

rgb(255, 250, 242)

hsl(37, 100, 97)

200

#FCF0DC

rgb(252, 240, 220)

hsl(37, 84, 93)

300

#DBB251

rgb(219, 178, 81)

hsl(42, 66, 59)

400

#AD8821

rgb(173, 126, 33)

hsl(44, 68, 40)

500

#594100

rgb(89, 65, 0)

hsl(44, 100, 17)

600

#332302

rgb(51, 35, 2)

hsl(40, 92, 10)

Información

100

#F2F2FC

rgb(242, 242, 252)

hsl(240, 63, 97)

200

#E9E7F6

rgb(233, 231, 246)

hsl(248, 45, 94)

300

#928FC2

rgb(146, 143, 194)

hsl(244, 29, 66)

400

#605AAD

rgb(96, 90, 173)

hsl(244, 34, 52)

500

#1E1655

rgb(30, 22, 85)

hsl(248, 59, 21)

600

#030121

rgb(3, 1, 33)

hsl(244, 94, 7)

Otros

Utilizados en estilos muy específicos que se repiten a lo largo del sistema.

overlay

#515C6D

rgba(7, 22, 46, 0.7)

hsla(217, 74, 10, 0.7)

focus

#C33400

rgba(207, 112, 0, 1)

hsla(216 14%, 25%, 1)

#E59100

rgba(229 145, 0, 1)

hsla(38, 100%, 45% 1)

Envía un correo electrónico al equipo del Sistema de Diseño a desarrollo.dintel@correo.gob.es , utiliza nuestra aplicación Teams DINTEL.