Color
Cimientos
El uso constante del color crea una experiencia de usuario cohesiva que mejora el reconocimiento de la marca y la confianza en todas las plataformas digitales.
Colores de referencia
Nuestra paleta básica incluye colores primarios de la marca y colores neutros. Estos permiten que nuestro contenido brille a la vez que garantizan suficiente contraste. Cada color tiene un propósito específico para mejorar la experiencia del usuario.
Azul primario (azul 50): Este es el color de interacción principal para todos los sitios y aplicaciones de TxDOT. Se utiliza para elementos interactivos como enlaces, botones y entradas, creando coherencia y alineación de marca.
Azul oscuro (Azul 80): Utilizado como nuestro azul secundario.
Gris 100: Se utiliza para la fuente principal.
Blanco (Gris 0):Nuestro color de fondo primario.
Colores semánticos
Éxito (verde):Se utiliza para indicar que las acciones del usuario se han realizado correctamente, como las actualizaciones de contraseñas.
Información (verde azulado):Llama la atención sobre información importante que no es urgente ni está relacionada con la acción del usuario, como las etiquetas de estado o los paneles de información.
Negativo (rojo):Indica riesgos, peligros, errores o acciones destructivas, como introducir una contraseña incorrecta.
Alerta (naranja):Destaca las alertas para llamar la atención del usuario, como los mensajes nuevos.
Advertencia (amarillo):Advierte sobre posibles acciones, centrando la atención del usuario.
Gris neutro:Se utiliza en todo el sistema de diseño para texto, campos de formulario, fondos, divisores, etc.
Accesibilidad
La accesibilidad es una pieza fundamental en el sistema de diseño digital. El uso del color debe seguir las mejores prácticas de accesibilidad, que incluyen:
- Alto contraste: Garantiza que el texto y los elementos importantes se destaquen sobre los fondos.
- Amigable con los daltónicos: Evite las combinaciones de colores que son difíciles de distinguir para los usuarios daltónicos.
- Uso consistente: Aplicar colores de manera consistente para ayudar a los usuarios a reconocer y comprender su significado.
Primario
Azul 10
HEXÁGONO: #c8ecfa
RGB: 200 / 236 / 250
Azul 20
HEXÁGONO:#93d5f6
RGB: 147 / 213 / 246
Azul 30
HEXÁGONO:#5bafe5
RGB: 91 / 175 / 229
Azul 40
HEXÁGONO:#3288cb
RGB: 50 / 136 / 203
Azul 50
HEXÁGONO:#0056a9
RGB: 0 / 86 / 169
Azul 60
HEXÁGONO:#004291
RGB: 0 / 66 / 145
Azul 70
HEXÁGONO:#003179
RGB: 0 / 49 / 121
Azul 80
HEXÁGONO:#002262
RGB: 0 / 34 / 98
Azul 90
HEXÁGONO:#001851
RGB: 0 / 24 / 81
Éxito
Verde 10
HEXÁGONO:#DAFFC1
RGB: 218 / 255 / 193
Verde 20
HEXÁGONO:#B7F190
RGB: 183 / 241 / 144
Verde 30
HEXÁGONO:#86DC4C
RGB: 134 / 220 / 76
Verde 40
HEXÁGONO:#4AAC0B
RGB: 74 / 172 / 11
Verde 50
HEXÁGONO:#3A8709
RGB: 58 / 135 / 9
Verde 60
HEXÁGONO:#2C6D0D
RGB: 44 / 109 / 13
Verde 70
HEXÁGONO:#1C5308
RGB: 28 / 83 / 8
Verde 80
HEXÁGONO:#134705
RGB: 19 / 71 / 5
Verde 90
HEXÁGONO:#0B3A03
RGB: 11 / 58 / 3
Información
Verde azulado 10
HEXÁGONO:#C8F7FA
RGB: 200 / 247 / 250
Verde azulado20
HEXÁGONO:#96EDF3
RGB: 150 / 237 / 243
Verde azulado30
HEXÁGONO:#5EDAE2
RGB: 94 / 218 / 226
Verde azulado40
HEXÁGONO:#32C1CB
RGB: 50 / 193 / 203
Teal50
HEXÁGONO:#009EA9
RGB: 0/158/169
Verde azulado60
HEXÁGONO:#007780
RGB: 0/119/128
Verde azulado70
HEXÁGONO:#00646B
RGB: 0 / 100 / 107
Verde azulado80
HEXÁGONO:#004C52
RGB: 0/76/82
Verde azulado90
HEXÁGONO:#003E42
RGB: 0 / 62 / 66
Error
Rojo 10
HEXÁGONO:#FBB5B5
RGB: 251 / 181 / 181
Red20
HEXÁGONO:#FF8F8F
RGB: 255 / 143 / 143
Red30
HEXÁGONO:#FF5C5C
RGB: 255 / 92 / 92
Red40
HEXÁGONO:#F43434
RGB: 244 / 52 / 52
Red50
HEXÁGONO:#D90D0D
RGB: 217 / 13 / 13
Red60
HEXÁGONO:#B60909
RGB: 182 / 9 / 9
Red70
HEXÁGONO:#990606
RGB: 153 / 6 / 6
Red80
HEXÁGONO:#720303
RGB: 114 / 3 / 3
Rojo90
HEXÁGONO:#5A0101
RGB: 90 / 1 / 1
Alerta
Naranja10
HEXÁGONO: #FBCDB5
RGB: 251 / 205 / 181
Naranja20
HEXÁGONO: #FFB68F
RGB: 255 / 182 / 143
Naranja30
HEXÁGONO: #FF955C
RGB: 255 / 149 / 92
Naranja40
HEXÁGONO: #F47734
RGB: 244 / 119 / 52
Naranja50
HEXÁGONO: #DF5C16
RGB: 223 / 92 / 22
Naranja60
HEXÁGONO: #C34A09
RGB: 195 / 74 / 9
Naranja70
HEXÁGONO: #A23D06
RGB: 162 / 61 / 6
Naranja80
HEXÁGONO: #852E00
RGB: 133 / 46 / 0
Naranja90
HEXÁGONO: #702700
RGB: 112 / 39 / 0
Advertencia
Amarillo10
HEXÁGONO: #FEF9D1
RGB: 254 / 249 / 209
Amarillo20
HEXÁGONO: #FDF3A3
RGB: 253 / 243 / 163
Amarillo30
HEXÁGONO: #FBE975
RGB: 251 / 233 / 117
Amarillo40
HEXÁGONO: #F7DE52
RGB: 247 / 222 / 82
Amarillo50
HEXÁGONO: #F2CE1B
RGB: 242 / 206 / 27
Amarillo60
HEXÁGONO: #D0AD13
RGB: 208 / 173 / 19
Amarillo70
HEXÁGONO: #AE8D0D
RGB: 174 / 141 / 13
Amarillo80
HEXÁGONO: #8C6F08
RGB: 140 / 111 / 8
Amarillo 90
HEXÁGONO: #745905
RGB: 116 / 89 / 5
Neutral
Gris 0
HEXÁGONO: #FFFFFF
RGB: 255 / 255 / 255
Gris10
HEXÁGONO: #F1F1F1
RGB: 241 / 241 / 241
Gris20
HEXÁGONO: #CECECE
RGB: 206 / 206 / 206
Gris30
HEXÁGONO: #B0B0B0
RGB: 176 / 176 / 176
Gris40
HEXÁGONO: #969696
RGB: 150 / 150 / 150
Gris50
HEXÁGONO: #757575
RGB: 117 / 117 / 117
Gris60
HEXÁGONO: #616161
RGB: 97 / 97 / 97
Gris70
HEXÁGONO: #525252
RGB: 82 / 82 / 82
Gris80
HEXÁGONO: #474747
RGB: 71 / 71 / 71
Gris90
HEXÁGONO: #3D3D3D
RGB: 61 / 61 / 61
Gris 100
HEXÁGONO: #1A1A1A
RGB: 26 / 26 / 26