# Indigo lemon teal bands

Blue, purple, tan and yellow linear swatches with 21 colors: #232680, #141e81, #000f81, #170d7f, #3d246b, #583f56, #6e5c60, #9f7d6d, #c7aa69, #d1d177, #e1e886, #eff28b, #eff084, #e7e06a, #cbcb57, #8cb369, #5b8977, #486164, #1e4b63, #072f79, #26007f. Edit it and copy or download CSS, SVG, PNG or shader code.

- Also called: Blue, purple, tan and yellow linear swatches
- Seed: `kcVWvCpMA_bsJSfmpsy967A-UwwE6i0tJURIQ`
- Page: https://grabient.com/kcVWvCpMA_bsJSfmpsy967A-UwwE6i0tJURIQ?style=linearSwatches&steps=21
- Drawn as: linear swatches, 21 steps, 90 degrees
- Kinds: light center
- Hues: complementary
- Contrast of its darkest and lightest colors: 12.8 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 | `#232680` | `oklch(33.46% 0.1474 273.52)` | St. Patrick’s Blue | white, 12.5 to 1 |
| 2 | `#141e81` | `oklch(31.27% 0.1626 268.81)` | Resolution Blue | white, 13.7 to 1 |
| 3 | `#000f81` | `oklch(28.66% 0.1800 264.20)` | Blue Ranger | white, 15.1 to 1 |
| 4 | `#170d7f` | `oklch(29.10% 0.1726 271.49)` | Galactic Cruise | white, 14.9 to 1 |
| 5 | `#3d246b` | `oklch(33.42% 0.1176 295.60)` | Fading Horizon | white, 12.6 to 1 |
| 6 | `#583f56` | `oklch(40.34% 0.0506 328.98)` | Bella | white, 9.3 to 1 |
| 7 | `#6e5c60` | `oklch(49.31% 0.0238 4.11)` | Poetry Plum | white, 6.2 to 1 |
| 8 | `#9f7d6d` | `oklch(61.91% 0.0488 46.28)` | Woodhaven | black, 5.6 to 1 |
| 9 | `#c7aa69` | `oklch(74.93% 0.0899 86.05)` | Wild Mustard Seed | black, 9.3 to 1 |
| 10 | `#d1d177` | `oklch(84.11% 0.1128 108.32)` | Green Gecko | black, 13 to 1 |
| 11 | `#e1e886` | `oklch(90.45% 0.1219 112.38)` | Charlock | black, 16 to 1 |
| 12 | `#eff28b` | `oklch(93.80% 0.1263 110.04)` | Tidal | black, 17.7 to 1 |
| 13 | `#eff084` | `oklch(93.27% 0.1321 109.56)` | Pineapple Perfume | black, 17.5 to 1 |
| 14 | `#e7e06a` | `oklch(88.93% 0.1395 105.78)` | Fandangle | black, 15.2 to 1 |
| 15 | `#cbcb57` | `oklch(81.88% 0.1376 109.18)` | Salsa Verde | black, 12.1 to 1 |
| 16 | `#8cb369` | `oklch(72.10% 0.1094 131.34)` | Nasturtium Leaf | black, 8.7 to 1 |
| 17 | `#5b8977` | `oklch(59.17% 0.0581 168.30)` | Privet Hedge | black, 5.2 to 1 |
| 18 | `#486164` | `oklch(47.39% 0.0297 205.06)` | Linen Grey | white, 6.6 to 1 |
| 19 | `#1e4b63` | `oklch(39.24% 0.0632 234.74)` | Lazurite Blue | white, 9.3 to 1 |
| 20 | `#072f79` | `oklch(33.15% 0.1337 261.67)` | Below the Surface | white, 12.4 to 1 |
| 21 | `#26007f` | `oklch(29.16% 0.1762 280.19)` | Prunelle | white, 15.1 to 1 |

## CSS

```css
background: linear-gradient(90deg, #232680 0.000% 4.762%, #141e81 4.762% 9.524%, #000f81 9.524% 14.286%, #170d7f 14.286% 19.048%, #3d246b 19.048% 23.810%, #583f56 23.810% 28.571%, #6e5c60 28.571% 33.333%, #9f7d6d 33.333% 38.095%, #c7aa69 38.095% 42.857%, #d1d177 42.857% 47.619%, #e1e886 47.619% 52.381%, #eff28b 52.381% 57.143%, #eff084 57.143% 61.905%, #e7e06a 61.905% 66.667%, #cbcb57 66.667% 71.429%, #8cb369 71.429% 76.190%, #5b8977 76.190% 80.952%, #486164 80.952% 85.714%, #1e4b63 85.714% 90.476%, #072f79 90.476% 95.238%, #26007f 95.238% 100.000%);
background: linear-gradient(90deg, oklch(33.46% 0.1474 273.52) 0.000% 4.762%, oklch(31.27% 0.1626 268.81) 4.762% 9.524%, oklch(28.66% 0.1800 264.20) 9.524% 14.286%, oklch(29.10% 0.1726 271.49) 14.286% 19.048%, oklch(33.42% 0.1176 295.60) 19.048% 23.810%, oklch(40.34% 0.0506 328.98) 23.810% 28.571%, oklch(49.31% 0.0238 4.11) 28.571% 33.333%, oklch(61.91% 0.0488 46.28) 33.333% 38.095%, oklch(74.93% 0.0899 86.05) 38.095% 42.857%, oklch(84.11% 0.1128 108.32) 42.857% 47.619%, oklch(90.45% 0.1219 112.38) 47.619% 52.381%, oklch(93.80% 0.1263 110.04) 52.381% 57.143%, oklch(93.27% 0.1321 109.56) 57.143% 61.905%, oklch(88.93% 0.1395 105.78) 61.905% 66.667%, oklch(81.88% 0.1376 109.18) 66.667% 71.429%, oklch(72.10% 0.1094 131.34) 71.429% 76.190%, oklch(59.17% 0.0581 168.30) 76.190% 80.952%, oklch(47.39% 0.0297 205.06) 80.952% 85.714%, oklch(39.24% 0.0632 234.74) 85.714% 90.476%, oklch(33.15% 0.1337 261.67) 90.476% 95.238%, oklch(29.16% 0.1762 280.19) 95.238% 100.000%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.335 | 0.147 | 273.5 |
| 2 | 0.287 | 0.176 | 269.3 |
| 3 | 0.465 | 0.025 | 353.8 |
| 4 | 0.807 | 0.106 | 461.6 |
| 5 | 0.941 | 0.128 | 470.1 |
| 6 | 0.795 | 0.134 | 473.2 |
| 7 | 0.461 | 0.03 | 569.4 |
| 8 | 0.291 | 0.187 | 640.2 |

## In these collections

- [Blue and yellow swatches](https://grabient.com/blue-and-yellow-swatches)

## Other forms

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