# Black, gray, teal and light blue linear swatches

Black, gray, teal and light blue linear swatches with 7 colors: #081b21, #65918a, #7ebda8, #187e75, #05502f, #147169, #aec8fc. Edit it and copy or download CSS, SVG, PNG or shader code.

- Seed: `kWNRSdYhY50QgQevnrx6ZzMo`
- Page: https://grabient.com/kWNRSdYhY50QgQevnrx6ZzMo?style=linearSwatches&angle=160
- Drawn as: linear swatches, 7 steps, 160 degrees
- Kinds: vivid, cool
- Hues: analogous
- Contrast of its darkest and lightest colors: 10.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 | `#081b21` | `oklch(20.87% 0.0276 220.78)` | Black Stallion | white, 17.6 to 1 |
| 2 | `#65918a` | `oklch(62.23% 0.0488 183.09)` | Oil Blue | black, 5.9 to 1 |
| 3 | `#7ebda8` | `oklch(74.93% 0.0714 171.27)` | Peppermint Bar | black, 9.7 to 1 |
| 4 | `#187e75` | `oklch(53.54% 0.0882 185.91)` | Geneva Green | white, 4.9 to 1 |
| 5 | `#05502f` | `oklch(37.93% 0.0867 157.73)` | Card Table Green | white, 9.6 to 1 |
| 6 | `#147169` | `oklch(49.74% 0.0821 186.06)` | Advantageous | white, 5.8 to 1 |
| 7 | `#aec8fc` | `oklch(83.07% 0.0785 264.11)` | Night Snow | black, 12.4 to 1 |

## CSS

```css
background: linear-gradient(160deg, #081b21 0.000% 14.286%, #65918a 14.286% 28.571%, #7ebda8 28.571% 42.857%, #187e75 42.857% 57.143%, #05502f 57.143% 71.429%, #147169 71.429% 85.714%, #aec8fc 85.714% 100.000%);
background: linear-gradient(160deg, oklch(20.87% 0.0276 220.78) 0.000% 14.286%, oklch(62.23% 0.0488 183.09) 14.286% 28.571%, oklch(74.93% 0.0714 171.27) 28.571% 42.857%, oklch(53.54% 0.0882 185.91) 42.857% 57.143%, oklch(37.93% 0.0867 157.73) 57.143% 71.429%, oklch(49.74% 0.0821 186.06) 71.429% 85.714%, oklch(83.07% 0.0785 264.11) 85.714% 100.000%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.209 | 0.028 | 220.8 |
| 2 | 0.772 | 0.061 | 169 |
| 3 | 0.535 | 0.088 | 185.9 |
| 4 | 0.374 | 0.084 | 156.3 |
| 5 | 0.831 | 0.079 | 264.1 |

## In these collections

- [Winter swatches](https://grabient.com/winter-swatches)

## Other forms

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