Logo Gobierno de España Logo DINTEL · Sistema de diseño Diseño Normalizado de Trámites Electrónicos Inicio Primeros pasos Primeros pasos ¿Qué es DINTEL? Diseñadores Desarrolladores Recursos Preguntas frecuentes Fundamentos Fundamentos Color Tipografía Elevaciones Espaciado Retícula Borde Radio Iconografía Ilustraciones Animación Accesibilidad Tokens de diseño Contenidos digitales Visualización de datos Elementos de interfaz Elementos de interfaz Módulos Plantillas Componentes Actualizaciones Contacto
Fundamentos Color

Color

El esquema de color y sus usos correspondientes.

Primaria: 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: 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)

300

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

Éxito

100

#F3F9F6

rgb(243, 249, 246)

hsl(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)

focus negative

#E59100

rgba(229 145, 0, 1)

hsla(38, 100%, 45% 1)

Este sitio web utiliza cookies propias y de terceros para ofrecer un mejor servicio. Si continúa navegando consideramos que acepta su uso.

Logo de Financiación por la Unión Europea NextGenerationEU Logo de Plan de Recuperación Transformación y Resiliencia Logo España digital Aviso legal Accesibilidad Política de Cookies Contacto Mapa web