# Monochrome black, gray and blue linear gradient

Monochrome black, gray and blue linear gradient with 7 colors: #34262d, #544e5b, #7f8b99, #98b4bc, #7cadbb, #4c89b0, #396aa6. Edit it and copy or download CSS, SVG, PNG or shader code.

- Seed: `kSSRH3X4wwcInxG`
- Page: https://grabient.com/kSSRH3X4wwcInxG
- Drawn as: linear gradient, 7 steps, 90 degrees
- Kinds: light center, muted, cool
- Hues: analogous
- Contrast of its darkest and lightest colors: 6.5 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 | `#34262d` | `oklch(28.74% 0.0234 347.34)` | Smoky Charcoal | white, 14.3 to 1 |
| 2 | `#544e5b` | `oklch(43.37% 0.0235 307.11)` | Mulled Wine | white, 8 to 1 |
| 3 | `#7f8b99` | `oklch(63.15% 0.0246 252.31)` | Prophetic Sea | black, 6 to 1 |
| 4 | `#98b4bc` | `oklch(75.20% 0.0331 216.31)` | Blue Shell | black, 9.6 to 1 |
| 5 | `#7cadbb` | `oklch(71.76% 0.0562 217.87)` | November Skies | black, 8.5 to 1 |
| 6 | `#4c89b0` | `oklch(60.57% 0.0868 238.22)` | Tropic | black, 5.5 to 1 |
| 7 | `#396aa6` | `oklch(51.97% 0.1089 254.35)` | In the Nick | white, 5.5 to 1 |

## CSS

```css
background: linear-gradient(90deg, #34262d 0.0%, #544e5b 16.7%, #7f8b99 33.3%, #98b4bc 50.0%, #7cadbb 66.7%, #4c89b0 83.3%, #396aa6 100.0%);
background: linear-gradient(90deg in oklch, oklch(28.74% 0.0234 347.34) 0.0%, oklch(43.37% 0.0235 307.11) 16.7%, oklch(63.15% 0.0246 252.31) 33.3%, oklch(75.20% 0.0331 216.31) 50.0%, oklch(71.76% 0.0562 217.87) 66.7%, oklch(60.57% 0.0868 238.22) 83.3%, oklch(51.97% 0.1089 254.35) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.287 | 0.023 | 347.3 |
| 2 | 0.752 | 0.033 | 216.3 |
| 3 | 0.52 | 0.109 | 254.3 |

## In these collections

- [Chrysanthemum tea porcelain](https://grabient.com/chrysanthemum-tea-porcelain)

## Other forms

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