# Analogous black, blue and purple linear swatches

Analogous black, blue and purple linear swatches with 14 colors: #020202, #03070a, #03151c, #002531, #003343, #003e52, #00485f, #114f69, #235572, #335a7c, #475d85, #5b608a, #6c628b, #77648a. Edit it and copy or download CSS, SVG, PNG or shader code.

- Seed: `kUFgCkKBi_TiaQhEFsdg`
- Page: https://grabient.com/kUFgCkKBi_TiaQhEFsdg?style=linearSwatches&steps=14&angle=0
- Drawn as: linear swatches, 14 steps, 0 degrees
- Kinds: dark to light, vivid, cool
- Hues: analogous
- Contrast of its darkest and lightest colors: 3.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 | `#020202` | `oklch(8.66% 0.0000 89.88)` | Black Hole | white, 20.7 to 1 |
| 2 | `#03070a` | `oklch(12.57% 0.0123 229.29)` | Eight Ball | white, 20.1 to 1 |
| 3 | `#03151c` | `oklch(18.24% 0.0303 227.21)` | Creeping Death | white, 18.6 to 1 |
| 4 | `#002531` | `oklch(24.46% 0.0466 225.61)` | Daintree | white, 16.1 to 1 |
| 5 | `#003343` | `oklch(30.01% 0.0569 225.10)` | Nordic Noir | white, 13.4 to 1 |
| 6 | `#003e52` | `oklch(34.08% 0.0654 226.44)` | Maniac Mansion | white, 11.5 to 1 |
| 7 | `#00485f` | `oklch(37.40% 0.0733 228.54)` | Stegadon Scale Green | white, 10 to 1 |
| 8 | `#114f69` | `oklch(40.23% 0.0740 232.03)` | Hanada Blue | white, 8.9 to 1 |
| 9 | `#235572` | `oklch(42.80% 0.0724 237.81)` | Canoe Blue | white, 8 to 1 |
| 10 | `#335a7c` | `oklch(45.34% 0.0713 246.87)` | Dark Blue | white, 7.2 to 1 |
| 11 | `#475d85` | `oklch(47.86% 0.0694 261.54)` | Indigo Navy Blue | white, 6.6 to 1 |
| 12 | `#5b608a` | `oklch(50.20% 0.0666 279.08)` | Karmic Grape | white, 6 to 1 |
| 13 | `#6c628b` | `oklch(52.15% 0.0639 295.48)` | Posy Purple | white, 5.5 to 1 |
| 14 | `#77648a` | `oklch(53.54% 0.0620 306.71)` | Posy Purple | white, 5.2 to 1 |

## CSS

```css
background: linear-gradient(0deg, #020202 0.000% 7.143%, #03070a 7.143% 14.286%, #03151c 14.286% 21.429%, #002531 21.429% 28.571%, #003343 28.571% 35.714%, #003e52 35.714% 42.857%, #00485f 42.857% 50.000%, #114f69 50.000% 57.143%, #235572 57.143% 64.286%, #335a7c 64.286% 71.429%, #475d85 71.429% 78.571%, #5b608a 78.571% 85.714%, #6c628b 85.714% 92.857%, #77648a 92.857% 100.000%);
background: linear-gradient(0deg, oklch(8.66% 0.0000 89.88) 0.000% 7.143%, oklch(12.57% 0.0123 229.29) 7.143% 14.286%, oklch(18.24% 0.0303 227.21) 14.286% 21.429%, oklch(24.46% 0.0466 225.61) 21.429% 28.571%, oklch(30.01% 0.0569 225.10) 28.571% 35.714%, oklch(34.08% 0.0654 226.44) 35.714% 42.857%, oklch(37.40% 0.0733 228.54) 42.857% 50.000%, oklch(40.23% 0.0740 232.03) 50.000% 57.143%, oklch(42.80% 0.0724 237.81) 57.143% 64.286%, oklch(45.34% 0.0713 246.87) 64.286% 71.429%, oklch(47.86% 0.0694 261.54) 71.429% 78.571%, oklch(50.20% 0.0666 279.08) 78.571% 85.714%, oklch(52.15% 0.0639 295.48) 85.714% 92.857%, oklch(53.54% 0.0620 306.71) 92.857% 100.000%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.087 | 0 | 230.6 |
| 2 | 0.315 | 0.068 | 225.3 |
| 3 | 0.445 | 0.072 | 243.3 |
| 4 | 0.535 | 0.062 | 306.7 |

## In these collections

- [Dark multicolor gradients](https://grabient.com/dark-multicolor-gradients)
- [Muted gradients](https://grabient.com/muted-gradients)
- [Moody gradients](https://grabient.com/moody-gradients)
- [Dark muted gradients](https://grabient.com/dark-muted-gradients)

## Other forms

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