# Violet yellow teal bands

Seamless rainbow linear swatches with 13 colors: #1f0788, #511b76, #88365f, #c66f48, #e4a93c, #f1d333, #dfe122, #add73f, #6eab70, #247c75, #004380, #241b83, #21038f. Edit it and copy or download CSS, SVG, PNG or shader code.

- Also called: Seamless rainbow linear swatches
- Seed: `kcTYbDNa1HliuSdvPcR6kNCcwcxQtMcvJ8ZBA`
- Page: https://grabient.com/kcTYbDNa1HliuSdvPcR6kNCcwcxQtMcvJ8ZBA?style=linearSwatches&steps=13
- Drawn as: linear swatches, 13 steps, 90 degrees
- Kinds: light center, vivid, rainbow, seamless
- Hues: complementary
- Contrast of its darkest and lightest colors: 10.3 to 1

## Colors

The name most people give each color, and the text color that reads on it with its contrast.

| Stop | Hex | OKLCH | Name | Text on it |
| --- | --- | --- | --- | --- |
| 1 | `#1f0788` | `oklch(30.31% 0.1846 274.22)` | Orbital Kingdom | white, 14.5 to 1 |
| 2 | `#511b76` | `oklch(35.49% 0.1479 307.21)` | Velvet Vortex | white, 11.9 to 1 |
| 3 | `#88365f` | `oklch(45.92% 0.1203 352.02)` | Boysenberry | white, 7.6 to 1 |
| 4 | `#c66f48` | `oklch(63.12% 0.1218 44.04)` | Apricot Mocha | black, 5.7 to 1 |
| 5 | `#e4a93c` | `oklch(77.12% 0.1391 78.84)` | Mustard Glaze | black, 10 to 1 |
| 6 | `#f1d333` | `oklch(86.71% 0.1668 97.77)` | Giallo | black, 14.1 to 1 |
| 7 | `#dfe122` | `oklch(88.02% 0.1864 110.44)` | Golden Chandelier | black, 14.9 to 1 |
| 8 | `#add73f` | `oklch(82.19% 0.1795 123.99)` | Burst of Lime | black, 12.5 to 1 |
| 9 | `#6eab70` | `oklch(68.50% 0.1063 145.18)` | Happy Cricket | black, 7.7 to 1 |
| 10 | `#247c75` | `oklch(53.32% 0.0815 187.88)` | Ivy | white, 4.9 to 1 |
| 11 | `#004380` | `oklch(38.35% 0.1182 252.98)` | Bracing Blue | white, 9.9 to 1 |
| 12 | `#241b83` | `oklch(31.99% 0.1629 275.95)` | Nightly Expedition | white, 13.4 to 1 |
| 13 | `#21038f` | `oklch(31.10% 0.1929 274.57)` | Dramatic Blue | white, 14.2 to 1 |

## CSS

```css
background: linear-gradient(90deg, #1f0788 0.000% 7.692%, #511b76 7.692% 15.385%, #88365f 15.385% 23.077%, #c66f48 23.077% 30.769%, #e4a93c 30.769% 38.462%, #f1d333 38.462% 46.154%, #dfe122 46.154% 53.846%, #add73f 53.846% 61.538%, #6eab70 61.538% 69.231%, #247c75 69.231% 76.923%, #004380 76.923% 84.615%, #241b83 84.615% 92.308%, #21038f 92.308% 100.000%);
background: linear-gradient(90deg, oklch(30.31% 0.1846 274.22) 0.000% 7.692%, oklch(35.49% 0.1479 307.21) 7.692% 15.385%, oklch(45.92% 0.1203 352.02) 15.385% 23.077%, oklch(63.12% 0.1218 44.04) 23.077% 30.769%, oklch(77.12% 0.1391 78.84) 30.769% 38.462%, oklch(86.71% 0.1668 97.77) 38.462% 46.154%, oklch(88.02% 0.1864 110.44) 46.154% 53.846%, oklch(82.19% 0.1795 123.99) 53.846% 61.538%, oklch(68.50% 0.1063 145.18) 61.538% 69.231%, oklch(53.32% 0.0815 187.88) 69.231% 76.923%, oklch(38.35% 0.1182 252.98) 76.923% 84.615%, oklch(31.99% 0.1629 275.95) 84.615% 92.308%, oklch(31.10% 0.1929 274.57) 92.308% 100.000%);
```

## Keyframes

8 OKLCH keyframes joined by a Catmull-Rom spline. Hue is unwrapped degrees.

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.303 | 0.185 | 274.2 |
| 2 | 0.421 | 0.124 | 338.7 |
| 3 | 0.697 | 0.127 | 422.2 |
| 4 | 0.874 | 0.169 | 460.2 |
| 5 | 0.835 | 0.185 | 481.3 |
| 6 | 0.598 | 0.079 | 524.7 |
| 7 | 0.354 | 0.136 | 625.1 |
| 8 | 0.311 | 0.193 | 634.6 |

## In these collections

- [Tetradic color palette](https://grabient.com/tetradic-color-palette)

## Other forms

- [JSON](https://grabient.com/kcTYbDNa1HliuSdvPcR6kNCcwcxQtMcvJ8ZBA.json?style=linearSwatches&steps=13)
- [PNG](https://grabient.com/kcTYbDNa1HliuSdvPcR6kNCcwcxQtMcvJ8ZBA.png?style=linearSwatches&steps=13)
- [SVG](https://grabient.com/kcTYbDNa1HliuSdvPcR6kNCcwcxQtMcvJ8ZBA.svg?style=linearSwatches&steps=13)
- [CSS](https://grabient.com/kcTYbDNa1HliuSdvPcR6kNCcwcxQtMcvJ8ZBA.css?style=linearSwatches&steps=13)
- [ASE](https://grabient.com/kcTYbDNa1HliuSdvPcR6kNCcwcxQtMcvJ8ZBA.ase?style=linearSwatches&steps=13)
- [GPL](https://grabient.com/kcTYbDNa1HliuSdvPcR6kNCcwcxQtMcvJ8ZBA.gpl?style=linearSwatches&steps=13)
- [GRD](https://grabient.com/kcTYbDNa1HliuSdvPcR6kNCcwcxQtMcvJ8ZBA.grd?style=linearSwatches&steps=13)
- [Design tokens](https://grabient.com/kcTYbDNa1HliuSdvPcR6kNCcwcxQtMcvJ8ZBA.tokens.json?style=linearSwatches&steps=13)
- [Social card](https://grabient.com/api/og?seed=kcTYbDNa1HliuSdvPcR6kNCcwcxQtMcvJ8ZBA&style=linearSwatches&steps=13)
- [Palettes like this one](https://grabient.com/palettes?q=kcTYbDNa1HliuSdvPcR6kNCcwcxQtMcvJ8ZBA)
- [Guide for agents](https://grabient.com/llms.txt)