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 Text - 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
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
Focus Colors
Focus Colors are intentionally loud, and therefore are to be used sparingly. Focus 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
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.
Sky Blue - Bright
Sky Blue - Dark
CMYK: 100 48 0 14 | RGB: 0 102 166
HEX: #0066A6 | Pantone: 2384
Woodland Green - Bright
Woodland Green - Dark
CMYK: 61 0 99 56 | RGB: 50 104 32
HEX: #326820| Pantone: 2280
Red Clay - Bright
Red Clay - Dark
CMYK: 0 70 89 48 | RGB: 145 65 21
HEX: #914115 | Pantone: 7587
Prairie Gold - Bright
Prairie Gold - Dark
CMYK: 27 63 100 13
RGB: 169 103 40
HEX: #A96728
Pantone: 132
Water Blue - Bright
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
Using Titles with Bright Backgrounds
ADA compliance guidelines dictate the contrast ratio between title text and the background color has to be at least 3:1.
The below Bright backgrounds have contrast ratios greater than 3:1, allowing for white and black title text.
White: #FFFFFF | RGB: 250, 250, 250
Black: #000000 | RGB: 0, 0, 0
Title One
3.31:1
Contrast Ratio
Woodland Green Bright Background
Title One
6.32:1
Contrast Ratio
Woodland Green Bright Background
Title One
4.19:1
Contrast Ratio
Red Clay Bright Background
Title One
5.0:1
Contrast Ratio
Red Clay Bright Background
Title One
4.41:1
Contrast Ratio
Slate Gray Bright Background
Title One
4.75:1
Contrast Ratio
Slate Gray Bright Background
Title One
4.53:1
Contrast Ratio
Water Blue Bright Background
Title One
4.63:1
Contrast Ratio
Water Blue Bright Background
Bright Backgrounds Requiring Black Title Text
ADA compliance guidelines dictate the contrast ratio between title text and the background color has to be at least 3:1.
Title One
7.56:1
Contrast Ratio
sky Blue Bright Background
Title One
8.12:1
Contrast Ratio
prairie gold Bright Background
Using Titles with Dark Backgrounds
ADA compliance guidelines dictate the contrast ratio between title text and the background color has to be at least 3:1.
All Dark background colors must use white title text.
Using White Body Text with Backgrounds
All Dark background colors require white body text.
Color backgrounds can be used with white body text in the following configuration. The ADA compliance guidelines dictate that the contrast ratio for normal text is at least 4.5:1.
Water Blue Bright allows for white and black body text.
Captions and Legal Copy with some more lines of text aenean pellentesque interdum tristique ut sollicitudin auctor.
4.5:1
Contrast Ratio
Water Blue Bright Background
4.63:1
Contrast Ratio
Water Blue Bright Background