Color Palettes
There are three color palettes we use at Hudl. Keep reading for the details on what they are and when to use them.
This palette shows off the essence of our brand: premium, athletic and intentional. That’s why these are the colors most closely associated with Hudl.
| Hex | RGB | CMYK | Pantone | |
|---|---|---|---|---|
| Dark Orange |
#FF5000
|
255, 80, 0
|
0, 69, 100, 0
|
1595 CP
|
| Orange |
#FF6300
|
255, 99, 0
|
0, 61, 100, 0
|
1585 CP
|
| Light Orange |
#FF6E00
|
255, 110, 0
|
0, 57, 100, 0
|
1575 CP
|
| Dark Ink |
#191F24
|
25, 31, 36
|
31, 14, 0, 86
|
433 CP
|
| Ink |
#232A31
|
35, 42, 49
|
29, 14, 0, 81
|
Cool Gray 11 CP
|
| Light Ink |
#38434F
|
56, 67, 79
|
29, 15, 0, 69
|
Cool Gray 10 CP
|
| Typewriter |
#4E5D6C
|
78, 93, 108
|
28, 14, 0, 58
|
Cool Gray 9 CP
|
| Electric |
#009CE3
|
0, 156, 227
|
100, 31, 0, 11
|
7689 CP
|
| White |
#FFFFFF
|
255, 255, 255
|
0, 0, 0, 0
|
N/A
|
| Dark Gray |
#DCE1E6
|
220, 225, 230
|
4, 2, 0, 10
|
12% Black
|
| Gray |
#EDF0F2
|
237, 240, 242
|
2, 1, 0, 5
|
9% Black
|
| Light Gray |
#F9FAFB
|
249, 250, 251
|
1, 0, 0, 2
|
3% Black
|
We use this palette when we need to showcase a specific team within a design.
| Hex | RGB | CMYK | |
|---|---|---|---|
| Maroon |
#790622
|
121, 6, 34
|
0, 45, 34, 53
|
| Scarlet |
#D00000
|
208, 0, 0
|
0, 83, 82, 18
|
| Apple |
#FF1E1E
|
255, 30, 30
|
0, 88, 88, 0
|
| Orange |
#FF8C00
|
255, 140, 0
|
0, 45, 100, 0
|
| Gold |
#EDB407
|
237, 180, 7
|
0, 22, 90, 7
|
| Yellow |
#FFDD00
|
255, 221, 0
|
0, 13, 100, 0
|
| Forest |
#245900
|
36, 89, 0
|
21, 0, 35, 65
|
| Kelly |
#3E9600
|
62, 150, 0
|
35, 0, 59, 41
|
| Sky |
#53BCEF
|
83, 188, 239
|
61, 20, 0, 6
|
| Royal |
#084DA8
|
8, 77, 168
|
63, 36, 0, 34
|
| Navy |
#0C3970
|
12, 57, 112
|
39, 22, 0, 56
|
| Purple |
#621296
|
98, 18, 150
|
20, 52, 0, 41
|
| White |
#FFFFFF
|
255, 255, 255
|
0, 0, 0, 0
|
| Silver |
#D7D9DD
|
215, 217, 221
|
2, 2, 0, 13
|
| Grey |
#646566
|
100, 101, 102
|
1, 0, 0, 60
|
| Black |
#222222
|
34, 34, 34
|
0, 0, 0, 87
|
When we need to communicate an action to take, information to digest or the status of an update, we use this palette of colors.
| Hex | RGB | CMYK | |
|---|---|---|---|
| Action |
#009CE3
|
0, 156, 227
|
89, 28, 0, 11
|
| Information |
#4D6680
|
77, 102, 128
|
20, 10, 0, 50
|
| Confirmation |
#78A100
|
120, 161, 0
|
16, 0, 63, 37
|
| Warning |
#F2B600
|
242, 182, 0
|
0, 24, 95, 5
|
| Critical |
#E81C00
|
232, 28, 0
|
0, 80, 91, 9
|
Don’t use team colors for copy blocks.
Do use team colors for design accents.
Do use orange sparingly.
Do use varying color levels for type hierarchy.
Do use electric for call-to-actions, but not for body copy.