Color
Color is critical part of our brand—can’t beat that immediately recognizable Herman Miller red, right—and we use it to enhance our communications and to inspire our customers.
Our Approach
We strike a balance between the sophisticated palette we use to express our brand and accessibility considerations necessary to include as many people as possible in our print, digital, and environmental experiences.
Color Palette
Our color palette is broken down into categories and implemented in themes. These color themes include Brand, Text, User Interface, Support, and Experience.
Brand
brand-01
#e22d00
R:226 G:45 B:0
brand-01-hover
#c92800
R:201 G:40 B:0
link-01
#0d75cb
R:13 G:117 B:203
link-01-hover
#0352a8
R:3 G:82 B:168
User Interface
ui-00
#ffffff
R:255 G:255 B:255
ui-10
#fafafa
R:250 G:250 B:250
ui-20
#f6f6f6
R:246 G:246 B:246
ui-30
#ebebeb
R:235 G:235 B:235
ui-40
#acacac
R:172 G:172 B:172
ui-50
#616161
R:97 G:97 B:97
ui-60
#252525
R:37 G:37 B:37
ui-overlay-light
#252525
R:37 G:37 B:37 A:0.2
ui-overlay-dark
#252525
R:37 G:37 B:37 A:0.7
Text
text-dark-primary
#252525
R:37 G:37 B:37
text-dark-subdued
#252525
R:37 G:37 B:37 A:0.7
text-light-primary
#ffffff
R:255 G:255 B:255
text-light-subdued
#ffffff
R:255 G:255 B:255 A:0.7
Support
support-success
#00816c
R:0 G:129 B:108
support-warning
#ce973d
R:206 G:151 B:61
support-failure
#cd4557
R:205 G:69 B:87
support-help
#0352a8
R:3 G:82 B:168
Experience
blue-light
#e7edee
R:231 G:237 B:238
blue-mid-light
#d0dcde
R:208 G:220 B:222
blue-mid
#28628e
R:40 G:98 B:142
blue-mid-dark
#3f4b65
R:63 G:75 B:101
blue-dark
#090807
R:9 G:8 B:7
green-light
#e4efe9
R:228 G:239 B:233
green-mid-light
#cadfd4
R:202 G:223 B:212
green-mid
#00816c
R:0 G:129 B:108
green-mid-dark
#5e695e
R:94 G:105 B:94
green-dark
#283d28
R:40 G:61 B:40
lavender-light
#efe7ea
R:239 G:231 B:234
lavender-mid-light
#e0cfd6
R:224 G:207 B:214
lavender-mid
#876b8b
R:135 G:107 B:139
lavender-mid-dark
#6e5a6b
R:110 G:90 B:107
lavender-dark
#372d35
R:55 G:45 B:53
orange-light
#e6d9d4
R:230 G:217 B:212
orange-mid-light
#ceb4a9
R:206 G:180 B:169
orange-mid
#be572a
R:190 G:87 B:42
orange-mid-dark
#9c5b4b
R:156 G:91 B:75
orange-dark
#752804
R:117 G:40 B:4
pink-light
#fbf4f4
R:251 G:244 B:244
pink-mid-light
#f1d3d5
R:241 G:211 B:213
pink-mid
#cd4557
R:205 G:69 B:87
pink-mid-dark
#895559
R:137 G:85 B:89
pink-dark
#5b1833
R:91 G:24 B:51
teal-light
#e0f1f6
R:224 G:241 B:246
teal-mid-light
#bfe3ed
R:191 G:227 B:237
teal-mid
#007e94
R:0 G:126 B:148
teal-mid-dark
#446463
R:68 G:100 B:99
teal-dark
#163b3f
R:22 G:59 B:63
yellow-light
#edeae0
R:237 G:234 B:224
yellow-mid-light
#e8d98b
R:232 G:217 B:139
yellow-mid
#ce973d
R:206 G:151 B:61
yellow-mid-dark
#9f866e
R:159 G:134 B:110
yellow-dark
#725c51
R:114 G:92 B:81
Usage
Picnic’s color palette is created in a themable manner. Variables are created and assigned to roles. Here’s an example: brand-01 is currently #E22D00 and is assigned to things like primary buttons, announcement bars, and other main calls to actions. The hex value could change later and not affect the assignment of the brand-01 color variable.
| Term | Definition |
|---|---|
Value | A unique color (hex code/rgba) assigned to a universal variable |
Role | The systematic usage/s of a color value |
Variable | The code identifier for a unique role or set of roles. Variables are universal and never change across themes. Within a theme variables are assigned appropriate values. |
Theme | The set of unique color values assigned to the universal palette |
Palette | The complete set of universal variables. The palette is the naming conventions of colors used in the UI. Each theme will use the same palette of variables. |
| Variable | Role(s) | Value |
|---|---|---|
| brand-01 | Primary Brand | #e22d00 |
| brand-01-hover | Hover states | #c92800 |
| link-01 | Secondary brand | #0d75cb |
| link-01-hover | Hover states | #0352a8 |
| ui-00 | Primary button | #ffffff |
| ui-10 | Secondary background | #fafafa |
| ui-20 | Table header backgrounds | #f6f6f6 |
| ui-30 | Borders | #ebebeb |
| ui-40 | #acacac | |
| ui-50 | High contrast borders | #616161 |
| ui-60 | Text | #252525 |
| text-dark-primary | Primary text | #252525 |
| text-dark-subdued | Secondary text | R: 37 G: 37 B: 37 A: 0.7 |
| text-light-primary | Inverse primary text | #ffffff |
| text-light-subdued | Inverse secondary text | R: 255 G: 255 B: 255 A: 0.7 |
| support-success | Success | #00816c |
| support-warning | Warning | #ce973d |
| support-failure | Failure | #cd4557 |
| support-help | Help | #0352a8 |
Combinations
Analogous color schemes use colors that are next to each other on the color wheel. They create serene and comfortable designs—they are often found in nature and are harmonious and pleasing to the eye.
Picnic’s experience color palette demonstrating an analogous combination.
Accessibility
Accessibility is about more than compliance, it’s about considering all of our great variety of users, and meeting them where they are. When it comes to color, contrast is one of the most important factors to consider.
Contrast
Our goal is to adhere to AA compliance, which is the recommended color contrast set by the W3C (World Wide Web Consortium). Level AA requires a contrast ratio of 4.5:1 for normal text and 3:1 for large text.
All type color combinations on Herman Miller properties must pass WCAG AA standards of 4.5:1 for normal text and 3:1 for large text.
Text color accessibility guide.