# Seamless rainbow linear swatches

Seamless rainbow linear swatches with 7 colors: #00030c, #d0ee87, #02092b, #ffba8b, #001a23, #a33e46, #00030c. Edit it and copy or download CSS, SVG, PNG or shader code.

- Seed: `kaGR2yczCwxSZ0NrMNGmaCpcAw0gMjrDA`
- Page: https://grabient.com/kaGR2yczCwxSZ0NrMNGmaCpcAw0gMjrDA?style=linearSwatches&angle=180
- Drawn as: linear swatches, 7 steps, 180 degrees
- Kinds: light center, rainbow, seamless
- Hues: two-hue
- Contrast of its darkest and lightest colors: 15.9 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 | `#00030c` | `oklch(9.93% 0.0309 253.31)` | Ninja | white, 20.6 to 1 |
| 2 | `#d0ee87` | `oklch(90.55% 0.1337 122.45)` | Sulu | black, 16.2 to 1 |
| 3 | `#02092b` | `oklch(16.14% 0.0703 265.11)` | Mysterious Depths | white, 19.4 to 1 |
| 4 | `#ffba8b` | `oklch(84.25% 0.1010 55.17)` | Savannah Sun | black, 12.6 to 1 |
| 5 | `#001a23` | `oklch(20.10% 0.0382 225.29)` | Creeping Death | white, 17.9 to 1 |
| 6 | `#a33e46` | `oklch(50.39% 0.1337 18.18)` | Moonrose | white, 6.3 to 1 |
| 7 | `#00030c` | `oklch(9.93% 0.0309 253.31)` | Ninja | white, 20.6 to 1 |

## CSS

```css
background: linear-gradient(180deg, #00030c 0.000% 14.286%, #d0ee87 14.286% 28.571%, #02092b 28.571% 42.857%, #ffba8b 42.857% 57.143%, #001a23 57.143% 71.429%, #a33e46 71.429% 85.714%, #00030c 85.714% 100.000%);
background: linear-gradient(180deg, oklch(9.93% 0.0309 253.31) 0.000% 14.286%, oklch(90.55% 0.1337 122.45) 14.286% 28.571%, oklch(16.14% 0.0703 265.11) 28.571% 42.857%, oklch(84.25% 0.1010 55.17) 42.857% 57.143%, oklch(20.10% 0.0382 225.29) 57.143% 71.429%, oklch(50.39% 0.1337 18.18) 71.429% 85.714%, oklch(9.93% 0.0309 253.31) 85.714% 100.000%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.098 | 0.04 | 250.3 |
| 2 | 0.906 | 0.134 | 122.4 |
| 3 | 0.161 | 0.07 | 265.1 |
| 4 | 0.843 | 0.134 | 415.2 |
| 5 | 0.201 | 0.09 | 225 |
| 6 | 0.504 | 0.134 | 378.2 |
| 7 | 0.098 | 0.04 | 250.3 |

## Other forms

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