Color Scales
Color scales are the core color values that underpin all available colors in the portal interface. These are used to determine our theme variables and any other design choices in the Octopus Deploy digital landscape.
Color scales should only be used to build theme variables/tokens and are not used directly in CSS code. Below is our list of color scales, expressed as variables (in Figma) and tokens (in code theme.json).
Each preview below displays its contrast ratio (using either black or white text) and the resulting WCAG Level based on 1.4.3 Contrast.
We have separated color scales into two identifying groups:
- Shades - colors used to design particular use cases (e.g. alerts, buttons, etc.).
- Neutrals - colors that define most base elements in our designs (e.g. backgrounds, borders, text, etc.).
Shades
Blue
|
|
|
|
|
|
100 #F2F8FD |
200 #CDE4F7 |
300 #87BFEC |
400 #449BE1 |
500 #1A77CA |
|
|
|
|
|
|
|
|
|
|
|
|
600 #155EA0 |
700 #0F4778 |
800 #093051 |
900 #041A2D |
|
Purple
|
|
|
|
|
|
100 #F8F5FD |
200 #E7DEF8 |
300 #C5AEEE |
400 #A683E5 |
500 #895ED3 |
|
|
|
|
|
|
|
|
|
|
|
|
600 #7043B7 |
700 #572B97 |
800 #3B1D66 |
900 #21103A |
|
Green
|
|
|
|
|
|
100 #EEFAF5 |
200 #B8E7D3 |
300 #5ECD9E |
400 #00AB62 |
500 #00874D |
|
|
|
|
|
|
|
|
|
|
|
|
600 #006A3D |
700 #00502E |
800 #00361F |
900 #001E11 |
|
Yellow
|
|
|
|
|
|
100 #FFF7D9 |
200 #FFDF62 |
300 #E5B203 |
400 #B98F02 |
500 #927002 |
|
|
|
|
|
|
|
|
|
|
|
|
600 #745801 |
700 #584201 |
800 #3B2C00 |
900 #201800 |
|
Orange
|
|
|
|
|
|
100 #FFF5ED |
200 #FFDABF |
300 #FFA461 |
400 #EA7325 |
500 #C45317 |
|
|
|
|
|
|
|
|
|
|
|
|
600 #A13C14 |
700 #7E2812 |
800 #59170D |
900 #340B07 |
|
Red
|
|
|
|
|
|
100 #FFF3F3 |
200 #FFD8D8 |
300 #FF9F9F |
400 #FF5D5D |
500 #D63D3D |
|
|
|
|
|
|
|
|
|
|
|
|
600 #AA3030 |
700 #802424 |
800 #571818 |
900 #310E0E |
|
Neutrals
Navy
|
|
|
|
|
|
100 #F4F6F8 |
200 #DAE2E9 |
300 #A9BBCB |
400 #7C98B4 |
500 #557999 |
|
|
|
|
|
|
|
|
|
|
|
|
600 #3E607D |
700 #2E475D |
800 #1F303F |
900 #111A23 |
|
Slate
|
|
|
|
|
|
100 #F5F6F8 |
200 #DEE1E6 |
300 #B2B9C5 |
400 #8A96A7 |
500 #68778D |
|
|
|
|
|
|
|
|
|
|
|
|
600 #515D70 |
700 #3D4653 |
800 #282F38 |
900 #16191F |
|
Grey
|
|
|
|
|
|
100 #F7F7F7 |
200 #E1E1E1 |
300 #B9B9B9 |
400 #959595 |
500 #757575 |
|
|
|
|
|
|
|
|
|
|
|
|
600 #5C5C5C |
700 #454545 |
800 #2E2E2E |
900 #191919 |
|
Black | White
|
|
|
black #000000 |
white #FFFFFF |