Color
Cimientos
El uso constante del color crea una experiencia de usuario cohesiva que mejora el reconocimiento y la confianza de la marca en todas las plataformas digitales.
Colores de línea base
Nuestra paleta de referencia incluye colores primarios de la marca y colores neutros. Estos permiten que nuestro contenido brille al tiempo 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 consistencia y alineación de marca.
Azul oscuro (Azul 80): Se utiliza como nuestro azul secundario.
Gris 100: Se utiliza para la fuente principal.
Blanco (Gris 0):Nuestro color de fondo principal.
Colores semánticos
Éxito (verde):Se utiliza para indicar el éxito en las acciones del usuario, 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 etiquetas de estado o paneles de información.
Negativo (rojo):Indica riesgos, peligros, errores o acciones destructivas, como ingresar una contraseña incorrecta.
Alerta (naranja):Resalta 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: Garantizar que el texto y los elementos importantes se destaquen sobre los fondos.
- Amigable con los daltónicos: Evitar 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
HEXAGONAL: #c8ecfa
RGB: 200 / 236 / 250
Azul 20
HEXAGONAL:#93d5f6
Datos RGB: 147 / 213 / 246
Azul 30
HEXAGONAL:#5bafe5
Referencia: 91 / 175 / 229
Azul 40
HEXAGONAL:#3288cb
RGB: 50 / 136 / 203
Azul 50
HEXAGONAL:#0056a9
RGB: 0 / 86 / 169
Azul 60
MALEFICIO:#004291
RGB: 0 / 66 / 145
Azul 70
HEXAGONAL:#003179
Alimentación: 0 / 49 / 121
Azul 80
HEXAGONAL:#002262
RGB: 0 / 34 / 98
Azul 90
HEXAGONAL:#001851
RGB: 0 / 24 / 81
Éxito
Verde 10
HEXAGONAL:#DAFFC1
Referencia: 218 / 255 / 193
Verde 20
HEXAGONAL:#B7F190
Rango RGB: 183 / 241 / 144
Verde 30
HEXAGONAL:#86DC4C
RGB: 134 / 220 / 76
Verde 40
HEXAGONAL:#4AAC0B
RGB: 74 / 172 / 11
Verde 50
MALEFICIO:#3A8709
Rango RGB: 58 / 135 / 9
Verde 60
HEXAGONAL:#2C6D0D
RGB: 44 / 109 / 13
Verde 70
HEXAGONAL:#1C5308
RGB: 28 / 83 / 8
Verde 80
MALEFICIO:#134705
RGB: 19 / 71 / 5
Verde 90
MALEFICIO:#0B3A03
RGB: 11 / 58 / 3
Información
Cerceta 10
MALEFICIO:#C8F7FA
RGB: 200 / 247 / 250
Verde azulado20
HEXAGONAL:#96EDF3
Rango RGB: 150 / 237 / 243
Verde azulado30
MALEFICIO:#5EDAE2
Referencia: 94 / 218 / 226
Verde azulado40
MALEFICIO:#32C1CB
Rango RGB: 50 / 193 / 203
Verde azulado50
HEXAGONAL:#009EA9
RGB: 0/158/169
Verde azulado60
HEXADECIMAL: # 007780
RGB: 0/119/128
Verde azulado70
HEXAGONAL:#00646B
RGB: 0 / 100 / 107
Verde azulado80
HEXAGONAL:#004C52
RGB: 0/76/82
Verde azulado90
HEXAGONAL:#003E42
RGB: 0 / 62 / 66
Error
Rojo 10
HEXAGONAL: #FBB5B5
RGB: 251 / 181 / 181
Rojo20
HEXAGONAL:#FF8F8F
Datos RGB: 255 / 143 / 143
Rojo30
HEXAGONAL:#FF5C5C
RGB: 255 / 92 / 92
Rojo40
HEXAGONAL:#F43434
RGB: 244 / 52 / 52
Rojo50
MALEFICIO:#D90D0D
RGB: 217 / 13 / 13
Rojo60
HEXAGONAL:#B60909
RGB: 182 / 9 / 9
Rojo70
MALEFICIO:#990606
RGB: 153 / 6 / 6
Rojo80
MALEFICIO:#720303
RGB: 114 / 3 / 3
Rojo90
HEXAGONAL:#5A0101
RGB: 90 / 1 / 1
Alerta
Naranja10
HEXAGONAL: #FBCDB5
RGB: 251 / 205 / 181
Naranja20
HEXAGONAL: #FFB68F
Rango RGB: 255 / 182 / 143
Naranja30
HEXAGONAL: #FF955C
Teléfono: 255 / 149 / 92
Naranja40
HEXAGONAL: #F47734
RGB: 244 / 119 / 52
Naranja50
HEXAGONAL: #DF5C16
RGB: 223 / 92 / 22
Naranja60
HEXAGONAL: #C34A09
RGB: 195 / 74 / 9
Naranja70
HEXAGONAL: #A23D06
RGB: 162 / 61 / 6
Naranja80
HEXAGONAL: #852E00
Precio: 133 / 46 / 0
Naranja90
HEXAGONAL: #702700
RGB: 112 / 39 / 0
Advertencia
Amarillo10
HEXAGONAL: #FEF9D1
RGB: 254 / 249 / 209
Amarillo20
HEXAGONAL: #FDF3A3
RGB: 253 / 243 / 163
Amarillo30
HEXAGONAL: #FBE975
RGB: 251 / 233 / 117
Amarillo40
HEXAGONAL: #F7DE52
RGB: 247 / 222 / 82
Amarillo50
HEXAGONAL: #F2CE1B
RGB: 242 / 206 / 27
Amarillo60
HEXAGONAL: #D0AD13
Referencia: 208 / 173 / 19
Amarillo70
HEXAGONAL: #AE8D0D
Datos RGB: 174 / 141 / 13
Amarillo80
HEXAGONAL: #8C6F08
RGB: 140 / 111 / 8
Amarillo 90
MALEFICIO: #745905
RGB: 116 / 89 / 5
Neutral
Gris 0
HEXAGONAL: #FFFFFF
RGB: 255 / 255 / 255
Gris10
HEXAGONAL: #F1F1F1
RGB: 241 / 241 / 241
Gris20
HEXAGONAL: #CECECE
RGB: 206 / 206 / 206
Gris30
HEXAGONAL: #B0B0B0
Rango de alimentación: 176 / 176 / 176
Gris40
HEXAGONAL: #969696
RGB: 150 / 150 / 150
Gris50
HEXAGONAL: #757575
RGB: 117 / 117 / 117
Gris60
HEXAGONAL: #616161
RGB: 97 / 97 / 97
Gris70
MALEFICIO: #525252
RGB: 82 / 82 / 82
Gris80
MALEFICIO: #474747
RGB: 71 / 71 / 71
Gris90
HEXAGONAL: #3D3D3D
RGB: 61 / 61 / 61
Gris 100
HEXAGONAL: #1A1A1A
RGB: 26 / 26 / 26