05 Aug 2024
About
The following are a collection of colour palettes intended to be used by developers to help them choose theme colours that are distinguishable for colour blind users. Generally they will also make themes easier to read for all users. Please note that even though these palettes have been specifically designed for excellent legibility the designer still needs to check the contrast ratios between colours and use tools to check themes for suitability with different sorts of colour blindness. The best suggestion would be to check how the theme looks in greyscale, and ensure that no data is lost when doing that.
I have created a tool called the Fabio Crameri Palette Generator. It comes with a bunch of different palettes for different uses and is now my go-to when trying to find CVD-friendly colour combinations.
There is also this Viridis Color Palette Generator. The palettes here are only for categorical charts, so bear that in mind.
Categorical Palettes
Okabe-Ito Palette
Source
| Colour | Colour Name | RGB | Hex Code |
|---|
 | Blue | 0, 114, 178 | #0072b2 |
 | Light Blue | 86, 180, 233 | #56b4e9 |
 | Purple | 204, 121, 167 | #cc79a7 |
 | Green | 0, 158, 115 | #009e73 |
 | Red | 213, 94, 0 | #d55e00 |
 | Orange | 230, 159, 0 | #e69f00 |
 | Yellow | 240, 228, 66 | #f0e542 |
Muth Palette
Source
| Colour | Colour Name | RGB | Hex Code |
|---|
 | Blue | 25, 60, 188 | #193cbc |
 | Light Blue | 81, 165, 219 | #51a5db |
 | Purple | 188, 99, 150 | #bc6396 |
 | Green | 28, 143, 97 | #1c8f61 |
 | Red | 196, 75, 36 | #c44b24 |
 | Orange | 221, 141, 43 | #dd8d2b |
 | Yellow | 237, 225, 67 | #ede143 |
ONS-AF (Categorical) Palette
Source
| Colour | Colour Name | RGB | Hex Code |
|---|
 | Dark Blue | 18, 67, 109 | #12436d |
 | Turqoise | 40, 161, 151 | #28a197 |
 | Dark Pink | 128, 22, 80 | #801650 |
 | Orange | 244, 106, 37 | #f46a25 |
 | Dark Grey | 61, 61, 61 | #3d3d3d |
 | Light Purple | 162, 133, 209 | #a285d1 |
Tol (Bright) Palette
Source
| Colour | Colour Name | RGB | Hex Code |
|---|
 | Blue | 68, 119, 170 | #4477aa |
 | Cyan | 102, 204, 238 | #66ccee |
 | Green | 34, 136, 51 | #228833 |
 | Yellow | 204, 187, 68 | #ccbb44 |
 | Red | 238, 102, 119 | #ee6677 |
 | Purple | 170, 51, 119 | #aa3377 |
 | Grey | 187, 187, 187 | #bbbbbb |
Tol (High Contrast) Palette
Source
| Colour | Colour Name | RGB | Hex Code |
|---|
 | White | 255, 255, 255 | #ffffff |
 | Yellow | 221, 170, 51 | #ddaa33 |
 | Red | 187, 85, 102 | #bb5566 |
 | Blue | 0, 68, 136 | #004488 |
 | Black | 0, 0, 0 | #000000 |
Sequential Palettes
ONS-AF (Sequential) Palette
Source
| Colour | Colour Name | RGB | Hex Code |
|---|
| Dark Blue | 18, 67, 109 | #12436d |
 | Mid Blue | 32, 115, 188 | #2073bc |
 | Light Blue | 107, 172, 230 | #6bace6 |
Tol (YlOrBr) Palette
Source
| Colour | Colour Name | RGB | Hex Code |
|---|
 | Very Pale Yellow | 255, 255, 229 | #ffffe5 |
 | Pale Yellow | 255, 247, 188 | #fff7bc |
 | Very Pale Orange | 254, 227, 145 | #fee391 |
 | Pale Orange | 254, 196, 79 | #fec44f |
 | Orange | 251, 154, 41 | #fb9a29 |
 | Dark Orange | 236, 112, 20 | #ec7014 |
 | Very Dark Orange | 204, 76, 2 | #cc4c02 |
 | Mid Brown | 153, 52, 4 | #993404 |
 | Dark Brown | 102, 37, 6 | #662506 |
Tol (Smooth Rainbow) Palette
Source
| Colour | Colour Name | RGB | Hex Code |
|---|
 | N/A | 232, 236, 251 | #e8ecfb |
 | N/A | 221, 216, 239 | #ddd8ef |
 | N/A | 209, 193, 225 | #d1c1e1 |
 | N/A | 195, 168, 209 | #c3a8d1 |
 | N/A | 181, 143, 194 | #b58fc2 |
 | N/A | 167, 120, 180 | #a778b4 |
 | N/A | 155, 98, 167 | #9b62a7 |
 | N/A | 140, 78, 153 | #8c4e99 |
 | N/A | 111, 76, 155 | #6f4c9b |
 | N/A | 96, 89, 169 | #6059a9 |
 | N/A | 85, 104, 184 | #5568b8 |
 | N/A | 78, 121, 197 | #4e79c5 |
 | N/A | 77, 138, 198 | #4e96bc |
| N/A | 78, 150, 188 | #4e96bc |