# Color palette

Source: https://iriscss.com/documentation/customize/color-palette/

26 color families with 11 shades each, from 50 (lightest) to 950 (darkest). The palette is the same in both themes.

Each shade is a variable, `--i-color-{family}-{shade}`. Hover a swatch to see its name. White and black are `--i-color-white` and `--i-color-black`.

| Color | 50 | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | 950 |
| --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- |
| red | #fef2f2 | #ffe2e2 | #ffc9c9 | #ffa2a2 | #ff6467 | #fb2c36 | #e7000b | #c10007 | #9f0712 | #82181a | #460809 |
| rose | #fff1f2 | #ffe4e6 | #ffccd3 | #ffa1ad | #ff637e | #ff2056 | #ec003f | #c70036 | #a50036 | #8b0836 | #4d0218 |
| pink | #fdf2f8 | #fce7f3 | #fccee8 | #fda5d5 | #fb64b6 | #f6339a | #e60076 | #c6005c | #a3004c | #861043 | #510424 |
| fuchsia | #fdf4ff | #fae8ff | #f6cfff | #f4a8ff | #ed6aff | #e12afb | #c800de | #a800b7 | #8a0194 | #721378 | #4b004f |
| purple | #faf5ff | #f3e8ff | #e9d4ff | #dab2ff | #c27aff | #ad46ff | #9810fa | #8200db | #6e11b0 | #59168b | #3c0366 |
| violet | #f5f3ff | #ede9fe | #ddd6ff | #c4b4ff | #a684ff | #8e51ff | #7f22fe | #7008e7 | #5d0ec0 | #4d179a | #2f0d68 |
| indigo | #eef2ff | #e0e7ff | #c6d2ff | #a3b3ff | #7c86ff | #615fff | #4f39f6 | #432dd7 | #372aac | #312c85 | #1e1a4d |
| blue | #eff6ff | #dbeafe | #bedbff | #8ec5ff | #51a2ff | #2b7fff | #155dfc | #1447e6 | #193cb8 | #1c398e | #162456 |
| sky | #f0f9ff | #dff2fe | #b8e6fe | #74d4ff | #00bcff | #00a6f4 | #0084d1 | #0069a8 | #00598a | #024a70 | #052f4a |
| cyan | #ecfeff | #cefafe | #a2f4fd | #53eafd | #00d3f2 | #00b8db | #0092b8 | #007595 | #005f78 | #104e64 | #053345 |
| teal | #f0fdfa | #cbfbf1 | #96f7e4 | #46ecd5 | #00d5be | #00bba7 | #009689 | #00786f | #005f5a | #0b4f4a | #022f2e |
| emerald | #ecfdf5 | #d0fae5 | #a4f4cf | #5ee9b5 | #00d492 | #00bc7d | #096 | #007a55 | #006045 | #004f3b | #002c22 |
| jade | #eefdf5 | #d6fbe6 | #aff6cf | #6dedaf | #03da82 | #00c367 | #00a052 | #007e46 | #01633b | #075233 | #022d1c |
| green | #f0fdf4 | #dcfce7 | #b9f8cf | #7bf1a8 | #05df72 | #00c950 | #00a63e | #008236 | #016630 | #0d542b | #032e15 |
| spring | #f4feee | #e4fcd9 | #c9f9b4 | #9bf37d | #50e339 | #3ecc28 | #2fa61f | #25801b | #1f6518 | #21541d | #0e2e0c |
| lime | #f7fee7 | #ecfcca | #d8f999 | #bbf451 | #9ae600 | #7ccf00 | #5ea500 | #497d00 | #3c6300 | #35530e | #192e03 |
| chartreuse | #fbfde8 | #f5fbc6 | #ecf58f | #ddea39 | #ccd700 | #b6c000 | #979600 | #786e00 | #635700 | #54490c | #2e2704 |
| yellow | #fefce8 | #fef9c2 | #fff085 | #ffdf20 | #fdc700 | #f0b100 | #d08700 | #a65f00 | #894b00 | #733e0a | #432004 |
| amber | #fffbeb | #fef3c6 | #fee685 | #ffd230 | #ffb900 | #fe9a00 | #e17100 | #bb4d00 | #973c00 | #7b3306 | #461901 |
| vermilion | #fff5ef | #ffe8da | #ffd0b6 | #ffae83 | #ff7831 | #fd4e18 | #ef2805 | #c61d03 | #9f1c08 | #802212 | #450e07 |
| orange | #fff7ed | #ffedd4 | #ffd6a7 | #ffb86a | #ff8904 | #ff6900 | #f54900 | #ca3500 | #9f2d00 | #7e2a0c | #441306 |
| stone | #fbfaf8 | #f6f5f3 | #e9e5e2 | #d8d3cf | #a89f98 | #7c7068 | #5a524a | #473f38 | #2b2522 | #1e1916 | #0d0a08 |
| neutral | #fafafa | #f5f5f5 | #e5e5e5 | #d4d4d4 | #a1a1a1 | #737373 | #525252 | #404040 | #262626 | #171717 | #0a0a0a |
| zinc | #fafafa | #f4f4f6 | #e4e3e9 | #d5d3da | #a09eab | #72707d | #53515e | #403e48 | #28262c | #18181c | #09090b |
| gray | #f9fafb | #f2f4f7 | #e4e6ed | #d0d4de | #97a0b2 | #687185 | #485468 | #344056 | #1d283b | #0f172a | #030713 |
| slate | #f8fafc | #f0f4fa | #e0e7f2 | #c8d4e5 | #8e9fbc | #607291 | #43536f | #2f3f5b | #1c2840 | #0e162d | #020619 |

## Base colors

`--i-color-{family}` without a shade is the 500 shade, for example `--i-color-blue`. Theme colors are built from the palette: `--i-color-info` is `--i-color-cyan` and `--i-color-danger` is `--i-color-red-600`.

```css
.tag {
  color: var(--i-color-teal-800);
  background-color: var(--i-color-teal-100);
}
```

## Text and background classes

`.color-{family}-{shade}` sets the text color and `.background-{family}-{shade}` the background. They sit in the utilities layer, so they win over component styles.

```html
<p class="color-emerald-600">Emerald 600 text</p>
<p class="color-rose-500">Rose 500 text</p>
<p class="background-amber-100 color-amber-900">Amber 900 on amber 100</p>
<p class="background-indigo-700 color-indigo-50">Indigo 50 on indigo 700</p>
```