Color
Skip to main content

Color

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.

Primary Blue (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.

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.

Negative (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.

Primary

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

Success

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

Information

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

Error

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

Alert

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

Warning

Yellow 10
HEX: #FEF9D1
RGB: 254 / 249 / 209

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

Neutral

Gray 0
HEX: #FFFFFF
RGB: 255 / 255 / 255

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: #969696
RGB: 150 / 150 / 150

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: #1A1A1A
RGB: 26 / 26 / 26