*This site is a work-in-progress and some pages are more complete than others. If you have any questions or issues, please email nick.harris@reckitt.com. *
Colour
- Nick Harris
Chameleon comes with a full set of colour palettes for you to customise your websites.
You can override every colour in the design system by creating your own CSS variables.
Read the theming guide the for more information.
Default and inverse
Chameleon provides two modes out of the box, default, and inverse. Default and inverse is designed to work with a brand's identity regardless of the lightness or darkness of the prominent brand colours.
For example, Vanish uses lighter colours for their brand identity. Their default palette will be lighter, and their inverse palette will use darker colours.
In contrast, Durex’s brand colours are traditionally darker. Durex’s default colour palette will be their standard colours, but they could use the inverse palette if they wanted to design a page with a lighter colour scheme, or to bring attention to certain content on a darker page.
Light and dark mode
The use of mode in Chameleon should not be confused with light and dark modes.
Light and dark mode is a site wide device or user controlled setting who’s primary feature is to choose between light text on dark backgrounds or dark text on light backgrounds. Most browsers and devices offer this option but it’s up to you whether you honour this choice.
Light and dark modes are considered themes in Chameleon and will require a full set of colour palettes (default and inverse) to be designed and implemented.
On{colour}
Some colours in Chameleon are referred to as on colours. These are colours designed to sit on top of other colours.
For example, this button uses two colours:
Action - For the background colour
On-action - For the text colour
We make this separation to allow for maximum flexibility. If you wanted to change your action colour you only need to consider the action, and on-action declarations. Otherwise you would have to find out where you’ve used every instance of your action colour (chameleon green-500) and change it individually. You would also need to ensure that any text that sits on top of action is also updated.
Colours in use
Action colours
| Colour | Default | Inverse |
|---|---|---|---|
| Action | chameleon green-500 | chameleon green-500 |
| On-action | white-500 | deep blue-500 |
| Action hover | chameleon green-700 | chameleon green-150 |
| On-hover | white-500 | deep blue-500 |
| Action focus | chameleon green-700 | chameleon green-150 |
| On-Focus | white-500 | deep blue-500 |
| Action focus border | chameleon blue-400 | chameleon blue-400 |
| Action active | chameleon green-800 | chameleon green-50 |
| On-active | white-500 | deep blue-500 |
| Action disabled | grey-200 | grey-200 |
| On-disabled | grey-500 | grey-500 |
| Selected | chameleon green-800 | chameleon green-50 |
| On-selected | white-500 | deep blue-500 |
| Dropdown hover | chameleon green-50 | steel blue-900 |
| CTA link border | chameleon green-400 | chameleon green-400 |
General UI colours
| Colour | Default | Inverse |
|---|---|---|---|
| Accent | chameleon blue-500 | chameleon blue-300 |
| Input field border | grey-400 | grey-300 |
| Input field hover | grey-600 | grey-100 |
| Divider | grey-400 | grey-300 |
| Heading | steel blue-500 | steel blue-50 |
| Body | steel blue-300 | steel blue-200 |
| Placeholder | steel blue-100 | steel blue-300 |
| Visited | purple-500 | purple-300 |
| Surface | white-500 | chameleon blue-850 |
| Elevation | grey-900 / 12% opacity | grey-100 / 12% opacity |
| Background default | white-500 | deep blue-500 |
| Background alternating | light blue-500 | steel blue-500 |
Semantic colours
| Colour | Default | Inverse |
|---|---|---|---|
| Error | red-500 | n/a |
| On-error | red-700 | n/a |
| Error fill | red-50 | n/a |
| Notice | amber-500 | n/a |
| On-notice | amber-700 | n/a |
| Notice fill | amber-50 | n/a |
| Success | green-500 | n/a |
| On-Success | green-700 | n/a |
| Success fill | green-50 | n/a |
| Destructive | red-500 | n/a |
| On-destructive | white-500 | n/a |
Full colour list
Chameleon Green
chameleon green-50 | hsl(184, 32%, 93%) | #E7F2F3 |
chameleon green-100 | hsl(184, 32%, 86%) | #CFE5E6 |
chameleon green-150 | hsl(184, 32%, 78%) | #B6D8DA |
chameleon green-200 | hsl(184, 32%, 71%) | #9ECBCD |
chameleon green-300 | hsl(184, 32%, 57%) | #6EB0B5 |
chameleon green-400 | hsl(184, 43%, 43%) | #3D969C |
chameleon green-500 | hsl(184, 32%, 93%) | #0D7C83 |
chameleon green-600 | hsl(184, 82%, 28%) | #0A6369 |
chameleon green-700 | hsl(184, 82%, 17%) | #084A4F |
chameleon green-800 | hsl(184, 82%, 11%) | #053234 |
chameleon green-850 | hsl(184, 82%, 8%) | #042527 |
chameleon green-900 | hsl(184, 82%, 6%) | #03191A |
chameleon green-950 | hsl(184, 82%, 3%) | #010C0D |
Chameleon blue
chameleon blue-50 | hsl(201, 52%, 94%) | #E7F1F7 |
chameleon blue-100 | hsl(201, 52%, 87%) | #CEE4EF |
chameleon blue-150 | hsl(201, 52%, 81%) | #B6D6E8 |
chameleon blue-200 | hsl(201, 52%, 75%) | #9DC8E0 |
chameleon blue-300 | hsl(201, 52%, 62%) | #6CADD0 |
chameleon blue-400 | hsl(201, 53%, 49%) | #3B91C1 |
chameleon blue-500 | hsl(201, 89%, 37%) | #0A76B1 |
chameleon blue-600 | hsl(201, 89%, 29%) | #085E8E |
chameleon blue-700 | hsl(201, 89%, 22%) | #06476A |
chameleon blue-800 | hsl(201, 89%, 15%) | #042F47 |
chameleon blue-850 | hsl(201, 89%, 11%) | #032335 |
chameleon blue-900 | hsl(201, 89%, 7%) | #021823 |
chameleon blue-950 | hsl(201, 89%, 4%) | #010C12 |
Steel blue
steel blue-50 | hsl(199, 6%, 91%) | #E8EAEB |
steel blue-100 | hsl(199, 6%, 83%) | #D0D4D6 |
steel blue-150 | hsl(199, 6%, 74%) | #B9BFC2 |
steel blue-200 | hsl(199, 6%, 66%) | #A2A9AD |
steel blue-300 | hsl(199, 7%, 48%) | #737F84 |
steel blue-400 | hsl(199, 14%, 31%) | #45545B |
steel blue-500 | hsl(199, 39%, 14%) | #162932 |
steel blue-600 | hsl(199, 39%,11%) | #122128 |
steel blue-700 | hsl(199, 39%, 8%) | #0D191E |
steel blue-800 | hsl(199, 39%, 6%) | #091014 |
steel blue-850 | hsl(199, 39%, 4%) | #070C0F |
steel blue-900 | hsl(199, 39%, 3%) | #04080A |
steel blue-950 | hsl(199, 39%, 1%) | #020405 |
Green
green-50 | hsl(159, 33%, 94%) | #ECF5F2 |
green-100 | hsl(159, 33%, 89%) | #D9ECE5 |
green-150 | hsl(159, 33%, 83%) | #C5E2D8 |
green-200 | hsl(159, 33%, 77%) | #B2D9CB |
green-300 | hsl(159, 33%, 66%) | #8CC5B1 |
green-400 | hsl(159, 33%, 55%) | #65B297 |
green-500 | hsl(159, 43%, 44%) | #3F9F7D |
green-600 | hsl(159, 43%, 35%) | #327F64 |
green-700 | hsl(159, 43%, 26%) | #265F4B |
green-800 | hsl(159, 43%, 17%) | #194032 |
green-850 | hsl(159, 43%, 13%) | #133026 |
green-900 | hsl(159, 43%, 9%) | #0D2019 |
green-950 | hsl(159, 43%, 4%) | #06100D |
Amber
amber-50 | hsl(25, 84%, 96%) | #FDF4ED |
amber-100 | hsl(25, 84%, 92%) | #FCE8DA |
amber-150 | hsl(25, 84%, 88%) | #FADDC8 |
amber-200 | hsl(25, 84%, 84%) | #F9D1B5 |
amber-300 | hsl(25, 84%, 76%) | #F5BB91 |
amber-400 | hsl(25, 84%, 69%) | #F2A46C |
amber-500 | hsl(25, 84%, 61%) | #EF8D47 |
amber-600 | hsl(25, 84%, 61%) | #BF7139 |
amber-700 | hsl(25, 54%, 49%) | #8F552B |
amber-800 | hsl(25, 54%, 24%) | #60381C |
amber-850 | hsl(25, 54%, 18%) | #482A15 |
amber-900 | hsl(25, 54%, 12%) | #301C0E |
amber-950 | hsl(25, 54%, 6%) | #180E07 |
Red
red-50 | hsl(4, 67%, 95%) | #FBEDEC |
red-100 | hsl(4, 67%, 91%) | #F7DAD8 |
red-150 | hsl(4, 67%, 86%) | #F4C8C5 |
red-200 | hsl(4, 67%, 82%) | #F0B5B1 |
red-300 | hsl(4, 67%, 73%) | #E8918A |
red-400 | hsl(4, 67%, 63%) | #E16C63 |
red-500 | hsl(4, 67%, 54%) | #D9473C |
red-600 | hsl(4, 57%, 43%) | #AE3930 |
red-700 | hsl(4, 57%, 33%) | #822B24 |
red-800 | hsl(4, 57%, 22%) | #571C18 |
red-850 | hsl(4, 57%, 16%) | #411512 |
red-900 | hsl(4, 57%, 11%) | #2B0E0C |
red-950 | hsl(4, 57%, 5%) | #160706 |
Grey
grey-50 | hsl(0, 0%, 94%) | #EFEFEF |
grey-100 | hsl(0, 0%, 87%) | #DEDEDE |
grey-150 | hsl(0, 0%, 81%) | #CECECE |
grey-200 | hsl(0, 0%, 74%) | #BEBEBE |
grey-300 | hsl(0, 0%, 62%) | #9D9D9D |
grey-400 | hsl(0, 0%, 49%) | #7D7D7D |
grey-500 | hsl(0, 0%, 36%) | #5C5C5C |
grey-600 | hsl(0, 0%, 29%) | #4A4A4A |
grey-700 | hsl(0, 0%, 22%) | #373737 |
grey-800 | hsl(0, 0%, 14%) | #252525 |
grey-850 | hsl(0, 0%, 11%) | #1C1C1C |
grey-900 | hsl(0, 0%, 7%) | #121212 |
grey-950 | hsl(0, 0%, 4%) | #090909 |
Purple
purple-50 | hsl(273, 42%, 95%) | #F3EDF8 |
purple-100 | hsl(273, 42%, 90%) | #E7DCF1 |
purple-150 | hsl(273, 42%, 85%) | #DBCAE9 |
purple-200 | hsl(273, 42%, 80%) | #CFB8E2 |
purple-300 | hsl(273, 42%, 71%) | #B795D4 |
purple-400 | hsl(273, 42%, 61%) | #9F71C5 |
purple-500 | hsl(273, 42%, 51%) | #874EB7 |
purple-600 | hsl(273, 40%, 41%) | #6C3E92 |
purple-700 | hsl(273, 40%, 31%) | #512F6E |
purple-800 | hsl(273, 40%, 20%) | #361F49 |
purple-850 | hsl(273, 40%, 15%) | #291737 |
purple-900 | hsl(273, 40%, 10%) | #1B1025 |
purple-950 | hsl(273, 40%, 5%) | #0E0812 |
Other
white-500 | hsl(0, 0, 100%) | #ffffff |
light blue-500 | hsl(192, 38%, 97%) | #f6fafb |
deep blue-500 | hsl(202, 57%, 18%) | #143548 |