Color
Foundation library
Consistent color use creates a cohesive user experience that enhances brand recognition and trust across all digital platforms.
Baseline colors
Our baseline palette includes primary brand colors and neutral colors. These allow our content to shine while ensuring enough contrast. Each color serves a specific purpose to improve the user experience.
Brand (Blue 50): This is the primary interaction color for all TxDOT sites and applications. It is used for interactive elements like links, buttons, and inputs, creating consistency and brand alignment.
Dark blue (Blue 80): Used as our secondary blue.
Black (Gray 100): Used for primary font.
White (Gray 0): Our primary background color.
Semantic colors
Success (Green): Used to indicate success in user actions, such as password updates.
Info (Teal): Draws attention to important information that isn't urgent or related to user action, like status tags or info panels.
Error (Red): Indicates risks, dangers, errors, or destructive actions, such as entering an incorrect password.
Alert (Orange): Highlights alerts to draw user attention, like new messages.
Warning (Yellow): Warns about potential actions, focusing user attention.
Neutral (Gray): Used throughout the design system for text, form fields, backgrounds, dividers, etc.
Accessibility
Accessibility is a critical piece in the digital design system. Color use must follow accessibility best practices, including:
- High Contrast: Ensuring text and important elements stand out against backgrounds.
- Color-Blind Friendly: Avoiding color combinations that are difficult to distinguish for color-blind users.
- Consistent Use: Applying colors consistently to help users recognize and understand their meaning.
Brand
Blue 5
HEX: #e5f8ff
RGB: 229 / 248 / 255
Blue 10
HEX: #c8ecfa
RGB: 200 / 236 / 250
Blue 20
HEX: #93d5f6
RGB: 147 / 213 / 246
Blue 30
HEX: #5bafe5
RGB: 91 / 175 / 229
Blue 40
HEX: #3288cb
RGB: 50 / 136 / 203
Blue 50
HEX: #0056a9
RGB: 0 / 86 / 169
Blue 60
HEX: #004291
RGB: 0 / 66 / 145
Blue 70
HEX: #003179
RGB: 0 / 49 / 121
Blue 80
HEX: #002262
RGB: 0 / 34 / 98
Blue 90
HEX: #001851
RGB: 0 / 24 / 81
Blue 100
HEX: #001a33
RGB: 0 / 26 / 51
Success
Green 5
HEX: #e8ffd9
RGB: 232 / 255 / 217
Green 10
HEX: #daffc1
RGB: 218 / 255 / 193
Green 20
HEX: #b7f190
RGB: 183 / 241 / 144
Green 30
HEX: #86dc4c
RGB: 134 / 220 / 76
Green 40
HEX: #4aac0b
RGB: 74 / 172 / 11
Green 50
HEX: #3a8709
RGB: 58 / 135 / 9
Green 60
HEX: #2c6d0d
RGB: 44 / 109 / 13
Green 70
HEX: #1c5308
RGB: 28 / 83 / 8
Green 80
HEX: #134705
RGB: 19 / 71 / 5
Green 90
HEX: #0b3a03
RGB: 11 / 58 / 3
Green 100
HEX: #072602
RGB: 7 / 38 / 2
Information
Teal 5
HEX: #e5fdff
RGB: 229 / 253 / 255
Teal 10
HEX: #c8f7fa
RGB: 200 / 247 / 250
Teal 20
HEX: #96edf3
RGB: 150 / 237 / 243
Teal 30
HEX: #5edae2
RGB: 94 / 218 / 226
Teal 40
HEX: #32c1cb
RGB: 50 / 193 / 203
Teal 50
HEX: #009ea9
RGB: 0 / 158 / 169
Teal 60
HEX: #007780
RGB: 0 / 119 / 128
Teal 70
HEX: #00646b
RGB: 0 / 100 / 107
Teal 80
HEX: #004c52
RGB: 0 / 76 / 82
Teal 90
HEX: #003e42
RGB: 0 / 62 / 66
Teal 100
HEX: #033033
RGB: 3 / 48 / 51
Error
Red 5
HEX: #ffe5e5
RGB: 255 / 229 / 229
Red 10
HEX: #fbb5b5
RGB: 251 / 181 / 181
Red 20
HEX: #ff8f8f
RGB: 255 / 143 / 143
Red 30
HEX: #ff5c5c
RGB: 255 / 92 / 92
Red 40
HEX: #f43434
RGB: 244 / 52 / 52
Red 50
HEX: #d90d0d
RGB: 217 / 13 / 13
Red 60
HEX: #b60909
RGB: 182 / 9 / 9
Red 70
HEX: #990606
RGB: 153 / 6 / 6
Red 80
HEX: #720303
RGB: 114 / 3 / 3
Red 90
HEX: #5a0101
RGB: 90 / 1 / 1
Red 100
HEX: #380000
RGB: 56 / 0 / 0
Alert
Orange 5
HEX: #ffe6d9
RGB: 255 / 230 / 217
Orange 10
HEX: #fbcdb5
RGB: 251 / 205 / 181
Orange 20
HEX: #ffb68f
RGB: 255 / 182 / 143
Orange 30
HEX: #ff955c
RGB: 255 / 149 / 92
Orange 40
HEX: #f47734
RGB: 244 / 119 / 52
Orange 50
HEX: #df5c16
RGB: 223 / 92 / 22
Orange 60
HEX: #c34a09
RGB: 195 / 74 / 9
Orange 70
HEX: #a23d06
RGB: 162 / 61 / 6
Orange 80
HEX: #852e00
RGB: 133 / 46 / 0
Orange 90
HEX: #702700
RGB: 112 / 39 / 0
Orange 100
HEX: #471900
RGB: 71 / 25 / 0
Warning
Yellow 5
HEX: #fefadd
RGB: 254 / 250 / 221
Yellow 10
HEX: #fef7c1
RGB: 254 / 247 / 193
Yellow 20
HEX: #fdf3a3
RGB: 253 / 243 / 163
Yellow 30
HEX: #fbe975
RGB: 251 / 233 / 117
Yellow 40
HEX: #f7de52
RGB: 247 / 222 / 82
Yellow 50
HEX: #f2ce1b
RGB: 242 / 206 / 27
Yellow 60
HEX: #d0ad13
RGB: 208 / 173 / 19
Yellow 70
HEX: #ae8d0d
RGB: 174 / 141 / 13
Yellow 80
HEX: #8c6f08
RGB: 140 / 111 / 8
Yellow 90
HEX: #745905
RGB: 116 / 89 / 5
Yellow 100
HEX: #493803
RGB: 73 / 56 / 3
Neutral
Gray 0
HEX: #ffffff
RGB: 255 / 255 / 255
Gray 5
HEX: #f8f8f8
RGB: 248 / 248 / 248
Gray 10
HEX: #f1f1f1
RGB: 241 / 241 / 241
Gray 20
HEX: #cecece
RGB: 206 / 206 / 206
Gray 30
HEX: #b0b0b0
RGB: 176 / 176 / 176
Gray 40
HEX: #949494
RGB: 148 / 148 / 148
Gray 50
HEX: #757575
RGB: 117 / 117 / 117
Gray 60
HEX: #616161
RGB: 97 / 97 / 97
Gray 70
HEX: #525252
RGB: 82 / 82 / 82
Gray 80
HEX: #474747
RGB: 71 / 71 / 71
Gray 90
HEX: #3d3d3d
RGB: 61 / 61 / 61
Gray 100
HEX: #000000
RGB: 0 / 0 / 0