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.

Skip to end of banner Go to start of banner

Colour

Skip to end of metadata

Created by Nick Harris , last modified on Aug 23, 2022

Go to start of metadata

You are viewing an old version of this page. View the current version.

Compare with Current View Version History

Chameleon colour palettes

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.

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

No labels