Colors
Oklahoma.gov colors are designed to be clear and accessible. They are made up of Core Colors, Alert Colors, Theme Colors and Highlight Colors.
How it Works
The different color groups have different applications. The Core Color group is coded as actionable for clear navigability. The Focus Colors and Alert Colors are to get attention. The Theme Colors harmonize and unify the site experience.
How to Use
Each color group outlined on this page has a different usage as detailed below.
Core Colors
Core Colors are used for consistency in body text and link colors. With consistent colors for buttons and calls-to-action, the user quickly learns what is actionable, making it easy to navigate the site.
Body Copy - Slate Gray Dark
RGB: 70 70 70
HEX: #464646
Text Link - Water Blue - Dark
RGB: 0 78 154
HEX: #004E9A
Text Link Hover/Visited - Water Blue - Bright
RGB: 24 123 192
HEX: #187BC0
Focus Colors
Alert Colors are intentionally loud, and therefore are to be used sparingly. Alert Colors can commonly be found in line strokes, where the content needs to be more pronounced than other content on the page.
Sky Blue - Bright
RGB: 28 166 223
HEX: #1CA6DF
Siren
RGB: 226 0 0
HEX: #E20000
Branded Colors
Oklahoma Branded Colors, paired in Bright and Dark shades, used in backgrounds and in line strokes, help define the tone of the site, giving it expression. See Theme Colors page for more on this subject.
Sky Blue - Bright
CMYK: 72 17 0 0 | RGB: 28 166 223
HEX: #1CA6DF | Pantone: 2171
Sky Blue - Dark
CMYK: 100 48 0 14 | RGB: 0 102 166
HEX: #0066A6 | Pantone: 2384
Woodland Green - Bright
CMYK: 57 6 92 19 | RGB: 102 155 65
HEX: #669B41| Pantone: 7490
Woodland Green - Dark
CMYK: 61 0 99 56 | RGB: 50 104 32
HEX: #326820| Pantone: 2280
Red Clay - Bright
CMYK: 0 77 97 15 | RGB: 209 84 32
HEX: #D15420 | Pantone: 7580
Red Clay - Dark
CMYK: 0 70 89 48 | RGB: 145 65 21
HEX: #914115 | Pantone: 7587
Prairie Gold - Bright
CMYK: 12 49 100 0 | RGB: 222 144 39
HEX: #DE9027 | Pantone: 131
Prairie Gold - Dark
CMYK: 27 63 100 13 | RGB: 169 103 40
HEX: #A96728 | Pantone: 132
Water Blue - Bright
CYMK: 84 46 0 0 | RGB: 24 123 192
HEX: #187BC0 | Pantone: 660
Water Blue - Dark
CYMK: 100 73 0 10 | RGB: 0 78 154
HEX: #004E9A | Pantone: 7686
Slate Gray - Bright
CMYK: 0 0 0 65 | RGB: 120 120 120
HEX: #787878 | Pantone: Cool Gray 8
Slate Gray - Dark
CMYK: 0 0 0 88 | RGB: 70 70 70
HEX: #464646 | Pantone: Cool Gray 10
Alert Colors
Highlight Colors are used in the background of Alert messages to convey the tone of a message. Since the background is a color field, it separates it from the white background of the page and other graphics.
Pale Blue
RGB: 220 241 250
HEX: #DCF1FA
Lime Green
RGB: 232 240 226
HEX: #E8F0E2
Dusty Rose
RGB: 248 229 221
HEX: #F8E5DD
Petal Pink
RGB: 251 216 216
HEX: #FBD8D8
Pebble Gray
RGB: 239 239 239
HEX: #EFEFEF
Metal Gray
RGB: 188 188 188
HEX: #BCBCBC
White
RGB: 255 255 255
HEX: #FFFFFF
Using Color with Headline Type
Color backgrounds can be used with White headlines in the following configurations. The ADA compliance guidelines dictate that the contrast ratio for headlines be at least 3:1.
Headline type with Bright colored background
Headline type with Dark colored background
All of the colors which are specified as Dark can be used as color backgrounds with white header type.
Using Color with Body Text
Color backgrounds can be used with White colored body text in the following configuration. The AA compliance guidelines dictate that the contrast ratio for normal text be at least 4.5:1.
Body text with Bright colored background
Body text with Dark colored background
