Colour

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.

Colours in use

Action colours

	Colour	Default	Inverse
	Action
	On-action
	Action hover
	On-hover
	Action focus
	On-Focus
	Action focus border
	Action active
	On-active
	Action disabled
	On-disabled
	Selected
	On-selected
	Dropdown hover
	CTA link border

General UI colours

	Colour	Default	Inverse
	Accent
	Input field border
	Input field hover
	Divider
	Heading
	Body
	Placeholder
	Visited
	Surface
	Elevation
	Background default
	Background alternating

Semantic colours

	Colour	Default	Inverse
	Error
	On-error
	Error fill
	Notice
	On-notice
	Notice fill
	Success
	On-Success
	Success fill
	Destructive
	On-destructive

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

*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. *