# Gray and blue linear gradient

Gray and blue linear gradient with 7 colors: #bcd0b1, #9bc1bc, #80a8bb, #648ab2, #526f9c, #525b83, #58536b. Edit it and copy or download CSS, SVG, PNG or shader code.

- Seed: `kW1CJf3w_JE8bRJAG8GOg5DQ`
- Page: https://grabient.com/kW1CJf3w_JE8bRJAG8GOg5DQ
- Drawn as: linear gradient, 7 steps, 90 degrees
- Kinds: light to dark, muted, cool
- Hues: analogous
- Contrast of its darkest and lightest colors: 4.4 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 | `#bcd0b1` | `oklch(83.46% 0.0469 134.30)` | Apple Ice | black, 12.8 to 1 |
| 2 | `#9bc1bc` | `oklch(78.30% 0.0416 185.69)` | Pitter Patter | black, 10.7 to 1 |
| 3 | `#80a8bb` | `oklch(70.87% 0.0517 228.23)` | Winter Twilight | black, 8.2 to 1 |
| 4 | `#648ab2` | `oklch(62.20% 0.0744 250.54)` | Perfect Periwinkle | black, 5.8 to 1 |
| 5 | `#526f9c` | `oklch(53.78% 0.0793 259.54)` | Chesty Bond | white, 5.1 to 1 |
| 6 | `#525b83` | `oklch(48.12% 0.0649 273.75)` | Marlin | white, 6.5 to 1 |
| 7 | `#58536b` | `oklch(45.67% 0.0386 292.81)` | Arraign | white, 7.3 to 1 |

## CSS

```css
background: linear-gradient(90deg, #bcd0b1 0.0%, #9bc1bc 16.7%, #80a8bb 33.3%, #648ab2 50.0%, #526f9c 66.7%, #525b83 83.3%, #58536b 100.0%);
background: linear-gradient(90deg in oklch, oklch(83.46% 0.0469 134.30) 0.0%, oklch(78.30% 0.0416 185.69) 16.7%, oklch(70.87% 0.0517 228.23) 33.3%, oklch(62.20% 0.0744 250.54) 50.0%, oklch(53.78% 0.0793 259.54) 66.7%, oklch(48.12% 0.0649 273.75) 83.3%, oklch(45.67% 0.0386 292.81) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.835 | 0.047 | 134.3 |
| 2 | 0.748 | 0.043 | 211.4 |
| 3 | 0.622 | 0.074 | 250.5 |
| 4 | 0.504 | 0.076 | 264.3 |
| 5 | 0.457 | 0.039 | 292.8 |

## In these collections

- [Locker sticker collage](https://grabient.com/locker-sticker-collage)

## Other forms

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