...
Chameleon colour palettes
Chameleon comes with a full set of colour palettes for you to customise your websites.
Info |
---|
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 |