# Black, navy, teal and beige linear swatches

Black, navy, teal and beige linear swatches with 7 colors: #101722, #172f3f, #145158, #156b61, #08335a, #77475e, #e7d7b1. Edit it and copy or download CSS, SVG, PNG or shader code.

- Seed: `kWNBK4rBK7zycuwmnc18BNRo`
- Page: https://grabient.com/kWNBK4rBK7zycuwmnc18BNRo?style=linearSwatches&angle=160
- Drawn as: linear swatches, 7 steps, 160 degrees
- Kinds: cool, multicolor
- Hues: wide
- Contrast of its darkest and lightest colors: 12.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 | `#101722` | `oklch(20.47% 0.0248 259.45)` | Kuroi Black | white, 17.9 to 1 |
| 2 | `#172f3f` | `oklch(29.48% 0.0412 237.97)` | NATO Blue | white, 13.7 to 1 |
| 3 | `#145158` | `oklch(40.19% 0.0610 205.56)` | Deep Sanction | white, 8.8 to 1 |
| 4 | `#156b61` | `oklch(47.64% 0.0785 183.37)` | Fashion Blue | white, 6.3 to 1 |
| 5 | `#08335a` | `oklch(31.64% 0.0836 251.04)` | Effervescent Blue | white, 12.8 to 1 |
| 6 | `#77475e` | `oklch(46.18% 0.0729 350.41)` | Bewitching | white, 7.3 to 1 |
| 7 | `#e7d7b1` | `oklch(88.19% 0.0524 87.55)` | Sunning Deck | black, 14.7 to 1 |

## CSS

```css
background: linear-gradient(160deg, #101722 0.000% 14.286%, #172f3f 14.286% 28.571%, #145158 28.571% 42.857%, #156b61 42.857% 57.143%, #08335a 57.143% 71.429%, #77475e 71.429% 85.714%, #e7d7b1 85.714% 100.000%);
background: linear-gradient(160deg, oklch(20.47% 0.0248 259.45) 0.000% 14.286%, oklch(29.48% 0.0412 237.97) 14.286% 28.571%, oklch(40.19% 0.0610 205.56) 28.571% 42.857%, oklch(47.64% 0.0785 183.37) 42.857% 57.143%, oklch(31.64% 0.0836 251.04) 57.143% 71.429%, oklch(46.18% 0.0729 350.41) 71.429% 85.714%, oklch(88.19% 0.0524 87.55) 85.714% 100.000%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.205 | 0.025 | 259.5 |
| 2 | 0.346 | 0.051 | 224.6 |
| 3 | 0.476 | 0.079 | 183.4 |
| 4 | 0.303 | 0.081 | 297.5 |
| 5 | 0.882 | 0.052 | 447.6 |

## In these collections

- [Neo deco swatches](https://grabient.com/neo-deco-swatches)

## Other forms

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