# Beige blue indigo diagonal bands

Complementary blue, gray and tan linear swatches with 21 colors: #110288, #12008f, #130097, #1601a2, #1b12a9, #2223af, #2a32b4, #3342b8, #3e52bb, #495fbd, #536cbe, #5e78be, #6c83bc, #7e8cb8, #8897b4, #8da2ae, #9ba8a5, #a8ada6, #b1b3a2, #bcb895, #c7ba89. Edit it and copy or download CSS, SVG, PNG or shader code.

- Also called: Complementary blue, gray and tan linear swatches
- Seed: `kcSou_Kc8_7NKQDAOL_zCW_daPPxehDDZBg7o`
- Page: https://grabient.com/kcSou_Kc8_7NKQDAOL_zCW_daPPxehDDZBg7o?style=linearSwatches&steps=21&angle=315
- Drawn as: linear swatches, 21 steps, 315 degrees
- Kinds: dark to light, cool
- Hues: monochromatic
- Contrast of its darkest and lightest colors: 7.7 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 | `#110288` | `oklch(29.13% 0.1915 268.59)` | Yearning | white, 15.1 to 1 |
| 2 | `#12008f` | `oklch(29.98% 0.1991 268.51)` | Blue Trust | white, 14.7 to 1 |
| 3 | `#130097` | `oklch(31.24% 0.2076 268.44)` | Cadmium Blue | white, 14.2 to 1 |
| 4 | `#1601a2` | `oklch(32.96% 0.2180 268.65)` | Groundwater | white, 13.4 to 1 |
| 5 | `#1b12a9` | `oklch(35.25% 0.2167 269.39)` | Deep Sea Exploration | white, 12.2 to 1 |
| 6 | `#2223af` | `oklch(38.00% 0.2107 270.28)` | Sapphire Splendour | white, 10.9 to 1 |
| 7 | `#2a32b4` | `oklch(41.07% 0.2005 270.81)` | Blue Cardinal Flower | white, 9.4 to 1 |
| 8 | `#3342b8` | `oklch(44.62% 0.1848 271.09)` | Early Spring Night | white, 8 to 1 |
| 9 | `#3e52bb` | `oklch(48.35% 0.1662 271.01)` | Free Speech Blue | white, 6.7 to 1 |
| 10 | `#495fbd` | `oklch(51.86% 0.1482 270.33)` | Chinese Bellflower | white, 5.7 to 1 |
| 11 | `#536cbe` | `oklch(55.24% 0.1304 269.06)` | Amparo Blue | white, 4.9 to 1 |
| 12 | `#5e78be` | `oklch(58.50% 0.1118 267.33)` | Blue Android Base | black, 4.9 to 1 |
| 13 | `#6c83bc` | `oklch(61.60% 0.0911 267.13)` | Orbital | black, 5.6 to 1 |
| 14 | `#7e8cb8` | `oklch(64.59% 0.0676 270.79)` | Galactic Gossamer | black, 6.3 to 1 |
| 15 | `#8897b4` | `oklch(67.37% 0.0463 264.72)` | Blueberry Buckle | black, 7.1 to 1 |
| 16 | `#8da2ae` | `oklch(69.87% 0.0295 233.43)` | Favourite Jeans | black, 7.8 to 1 |
| 17 | `#9ba8a5` | `oklch(72.13% 0.0155 181.53)` | Casting Shadow | black, 8.5 to 1 |
| 18 | `#a8ada6` | `oklch(74.14% 0.0106 135.68)` | Light Drizzle | black, 9.1 to 1 |
| 19 | `#b1b3a2` | `oklch(75.99% 0.0230 112.55)` | Environmental | black, 9.8 to 1 |
| 20 | `#bcb895` | `oklch(77.62% 0.0475 101.55)` | Bog | black, 10.4 to 1 |
| 21 | `#c7ba89` | `oklch(78.74% 0.0661 95.29)` | Bakelite Yellow | black, 10.8 to 1 |

## CSS

```css
background: linear-gradient(315deg, #110288 0.000% 4.762%, #12008f 4.762% 9.524%, #130097 9.524% 14.286%, #1601a2 14.286% 19.048%, #1b12a9 19.048% 23.810%, #2223af 23.810% 28.571%, #2a32b4 28.571% 33.333%, #3342b8 33.333% 38.095%, #3e52bb 38.095% 42.857%, #495fbd 42.857% 47.619%, #536cbe 47.619% 52.381%, #5e78be 52.381% 57.143%, #6c83bc 57.143% 61.905%, #7e8cb8 61.905% 66.667%, #8897b4 66.667% 71.429%, #8da2ae 71.429% 76.190%, #9ba8a5 76.190% 80.952%, #a8ada6 80.952% 85.714%, #b1b3a2 85.714% 90.476%, #bcb895 90.476% 95.238%, #c7ba89 95.238% 100.000%);
background: linear-gradient(315deg, oklch(29.13% 0.1915 268.59) 0.000% 4.762%, oklch(29.98% 0.1991 268.51) 4.762% 9.524%, oklch(31.24% 0.2076 268.44) 9.524% 14.286%, oklch(32.96% 0.2180 268.65) 14.286% 19.048%, oklch(35.25% 0.2167 269.39) 19.048% 23.810%, oklch(38.00% 0.2107 270.28) 23.810% 28.571%, oklch(41.07% 0.2005 270.81) 28.571% 33.333%, oklch(44.62% 0.1848 271.09) 33.333% 38.095%, oklch(48.35% 0.1662 271.01) 38.095% 42.857%, oklch(51.86% 0.1482 270.33) 42.857% 47.619%, oklch(55.24% 0.1304 269.06) 47.619% 52.381%, oklch(58.50% 0.1118 267.33) 52.381% 57.143%, oklch(61.60% 0.0911 267.13) 57.143% 61.905%, oklch(64.59% 0.0676 270.79) 61.905% 66.667%, oklch(67.37% 0.0463 264.72) 66.667% 71.429%, oklch(69.87% 0.0295 233.43) 71.429% 76.190%, oklch(72.13% 0.0155 181.53) 76.190% 80.952%, oklch(74.14% 0.0106 135.68) 80.952% 85.714%, oklch(75.99% 0.0230 112.55) 85.714% 90.476%, oklch(77.62% 0.0475 101.55) 90.476% 95.238%, oklch(78.74% 0.0661 95.29) 95.238% 100.000%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.291 | 0.192 | 268.6 |
| 2 | 0.327 | 0.218 | 268.6 |
| 3 | 0.402 | 0.204 | 270.7 |
| 4 | 0.504 | 0.156 | 270.7 |
| 5 | 0.598 | 0.103 | 266.5 |
| 6 | 0.681 | 0.041 | 259.1 |
| 7 | 0.744 | 0.011 | 131.2 |
| 8 | 0.787 | 0.066 | 95.3 |

## In these collections

- [Indigo swatches](https://grabient.com/indigo-swatches)

## Other forms

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