Colour

Foundations

Colour

The color scheme and its corresponding uses.

Primary: to distinguish actions and interpolation elements.
Greys: To compose the page with its sections and give shape to the texts.
Feedback: para asignar significados semánticos afirmativos, de advertencia, negativos e informativos a los elementos de la composición.
Decorative: To highlight certain areas and details in the designs.
Others: For very specific styles that are repeated throughout the system.

Primaries

They help to distinguish the actions and elements of interaction.

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)

Minor

They allow you to highlight certain areas and details in the designs.

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)

Greys

They help to compose the page with its sections and give shape to the texts

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

They allow to assign semantic meanings of an affirmative warning, negative and informative type to the elements of the composition.

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)

Warning

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)

Information

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)

Others

Used in very specific styles that are repeated throughout the system.

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)

Send an email to the Design System team at desarrollo.dintel@correo.gob.es , use our application Teams DINTEL.