| No | Name | R | G | B | HEX |
|---|---|---|---|---|---|
| 1 | malachite | 4 | 231 | 98 | #04e762ff |
| 2 | selective-yellow | 245 | 183 | 0 | #f5b700ff |
| 3 | celestial-blue | 0 | 161 | 228 | #00a1e4ff |
| 4 | mexican-pink | 220 | 0 | 115 | #dc0073ff |
| 5 | chartreuse | 137 | 252 | 0 | #89fc00ff |
We use the colors in the defined order.
You must make sure that the contrast ratio of text and interactive elements meets level AA of the Web Content Accessibility Guidelines (WCAG 2.1).
Each color has multiple variants with transparency:
| CSS Variable | Alpha | Malachite | Selective Yellow | Celestial Blue | Mexican Pink | Chartreuse |
|---|---|---|---|---|---|---|
--color-name-1 |
10% | --malachite-1 |
--selective-yellow-1 |
--celestial-blue-1 |
--mexican-pink-1 |
--chartreuse-1 |
--color-name-2 |
20% | --malachite-2 |
--selective-yellow-2 |
--celestial-blue-2 |
--mexican-pink-2 |
--chartreuse-2 |
--color-name-3 |
30% | --malachite-3 |
--selective-yellow-3 |
--celestial-blue-3 |
--mexican-pink-3 |
--chartreuse-3 |
--color-name-4 |
40% | --malachite-4 |
--selective-yellow-4 |
--celestial-blue-4 |
--mexican-pink-4 |
--chartreuse-4 |
--color-name-5 |
50% | --malachite-5 |
--selective-yellow-5 |
--celestial-blue-5 |
--mexican-pink-5 |
--chartreuse-5 |
--color-name-6 |
60% | --malachite-6 |
--selective-yellow-6 |
--celestial-blue-6 |
--mexican-pink-6 |
--chartreuse-6 |
--color-name-7 |
70% | --malachite-7 |
--selective-yellow-7 |
--celestial-blue-7 |
--mexican-pink-7 |
--chartreuse-7 |
Replace
color-namewith one of the color names above.
Each color has multiple variants with adaptive colors.
| CSS Variable | Light Mode | Dark Mode | Malachite | Selective Yellow | Celestial Blue | Mexican Pink | Chartreuse |
|---|---|---|---|---|---|---|---|
--color-name-1-adaptive |
10% white | 10% black | --malachite-1--adaptive |
--selective-yellow-1--adaptive |
--celestial-blue-1--adaptive |
--mexican-pink-1--adaptive |
--chartreuse-1--adaptive |
--color-name-2-adaptive |
20% white | 20% black | --malachite-2--adaptive |
--selective-yellow-2--adaptive |
--celestial-blue-2--adaptive |
--mexican-pink-2--adaptive |
--chartreuse-2--adaptive |
--color-name-3-adaptive |
30% white | 30% black | --malachite-3--adaptive |
--selective-yellow-3--adaptive |
--celestial-blue-3--adaptive |
--mexican-pink-3--adaptive |
--chartreuse-3--adaptive |
--color-name-4-adaptive |
40% white | 40% black | --malachite-4--adaptive |
--selective-yellow-4--adaptive |
--celestial-blue-4--adaptive |
--mexican-pink-4--adaptive |
--chartreuse-4--adaptive |
--color-name-5-adaptive |
50% white | 50% black | --malachite-5--adaptive |
--selective-yellow-5--adaptive |
--celestial-blue-5--adaptive |
--mexican-pink-5--adaptive |
--chartreuse-5--adaptive |
--color-name-6-adaptive |
60% white | 60% black | --malachite-6--adaptive |
--selective-yellow-6--adaptive |
--celestial-blue-6--adaptive |
--mexican-pink-6--adaptive |
--chartreuse-6--adaptive |
--color-name-7-adaptive |
70% white | 70% black | --malachite-7--adaptive |
--selective-yellow-7--adaptive |
--celestial-blue-7--adaptive |
--mexican-pink-7--adaptive |
--chartreuse-7--adaptive |
Replace
color-namewith one of the color names above.