# Navy and muted teal angular gradient

Seamless cool navy and blue angular gradient with 24 colors: #101827, #111a2a, #121d2e, #132034, #14243a, #152841, #162c47, #17314d, #183653, #1a3c59, #1c4460, #1f4d67, #22556d, #265b71, #295f73, #2b6073, #2b5d70, #295568, #264a5e, #223e52, #1d3244, #182638, #131e2e, #101827. Edit it and copy or download CSS, SVG, PNG or shader code.

- Also called: Seamless cool navy and blue angular gradient
- Seed: `kUNRe6qJa-jqXPMai8Rg`
- Page: https://grabient.com/kUNRe6qJa-jqXPMai8Rg?style=angularGradient&steps=24&angle=0
- Drawn as: angular gradient, 24 steps, 0 degrees
- Kinds: dark, cool, monochrome, seamless
- Hues: analogous
- Contrast of its darkest and lightest colors: 2.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 | `#101827` | `oklch(20.87% 0.0317 262.27)` | Sambucus | white, 17.7 to 1 |
| 2 | `#111a2a` | `oklch(21.74% 0.0344 261.43)` | Sambucus | white, 17.4 to 1 |
| 3 | `#121d2e` | `oklch(22.88% 0.0382 260.43)` | Trapped Darkness | white, 16.9 to 1 |
| 4 | `#132034` | `oklch(24.23% 0.0427 259.25)` | Sombre Night | white, 16.3 to 1 |
| 5 | `#14243a` | `oklch(25.75% 0.0476 257.86)` | Cool Balaclavas Are Forever | white, 15.6 to 1 |
| 6 | `#152841` | `oklch(27.39% 0.0524 256.24)` | Eternal Darkness | white, 14.8 to 1 |
| 7 | `#162c47` | `oklch(29.08% 0.0568 254.37)` | Crow Black Blue | white, 14 to 1 |
| 8 | `#17314d` | `oklch(30.78% 0.0603 252.23)` | Crow Black Blue | white, 13.2 to 1 |
| 9 | `#183653` | `oklch(32.48% 0.0627 249.73)` | Incremental Blue | white, 12.4 to 1 |
| 10 | `#1a3c59` | `oklch(34.66% 0.0644 246.12)` | Poseidon | white, 11.4 to 1 |
| 11 | `#1c4460` | `oklch(37.24% 0.0656 241.61)` | Sir Edmund | white, 10.2 to 1 |
| 12 | `#1f4d67` | `oklch(39.94% 0.0664 236.74)` | Seafarer | white, 9.1 to 1 |
| 13 | `#22556d` | `oklch(42.47% 0.0666 232.02)` | Newport Grey | white, 8.1 to 1 |
| 14 | `#265b71` | `oklch(44.55% 0.0663 227.99)` | Chathams Blue | white, 7.4 to 1 |
| 15 | `#295f73` | `oklch(45.89% 0.0655 225.18)` | Holiday Velvet | white, 7 to 1 |
| 16 | `#2b6073` | `oklch(46.23% 0.0640 224.10)` | Holiday Velvet | white, 6.9 to 1 |
| 17 | `#2b5d70` | `oklch(45.21% 0.0617 225.33)` | Blumine | white, 7.2 to 1 |
| 18 | `#295568` | `oklch(42.74% 0.0581 228.90)` | Wakefield | white, 8 to 1 |
| 19 | `#264a5e` | `oklch(39.22% 0.0536 234.19)` | Arapawa | white, 9.4 to 1 |
| 20 | `#223e52` | `oklch(35.07% 0.0485 240.49)` | Asurmen Blue Wash | white, 11.1 to 1 |
| 21 | `#1d3244` | `oklch(30.73% 0.0433 247.13)` | Blue Whale | white, 13.2 to 1 |
| 22 | `#182638` | `oklch(26.63% 0.0385 253.43)` | Abyssal Anchorfish Blue | white, 15.2 to 1 |
| 23 | `#131e2e` | `oklch(23.20% 0.0345 258.70)` | The Count’s Black | white, 16.8 to 1 |
| 24 | `#101827` | `oklch(20.87% 0.0317 262.27)` | Sambucus | white, 17.7 to 1 |

## CSS

```css
background: conic-gradient(from 0deg, #101827 0.0%, #111a2a 4.3%, #121d2e 8.7%, #132034 13.0%, #14243a 17.4%, #152841 21.7%, #162c47 26.1%, #17314d 30.4%, #183653 34.8%, #1a3c59 39.1%, #1c4460 43.5%, #1f4d67 47.8%, #22556d 52.2%, #265b71 56.5%, #295f73 60.9%, #2b6073 65.2%, #2b5d70 69.6%, #295568 73.9%, #264a5e 78.3%, #223e52 82.6%, #1d3244 87.0%, #182638 91.3%, #131e2e 95.7%, #101827 100.0%);
background: conic-gradient(from 0deg in oklch, oklch(20.87% 0.0317 262.27) 0.0%, oklch(21.74% 0.0344 261.43) 4.3%, oklch(22.88% 0.0382 260.43) 8.7%, oklch(24.23% 0.0427 259.25) 13.0%, oklch(25.75% 0.0476 257.86) 17.4%, oklch(27.39% 0.0524 256.24) 21.7%, oklch(29.08% 0.0568 254.37) 26.1%, oklch(30.78% 0.0603 252.23) 30.4%, oklch(32.48% 0.0627 249.73) 34.8%, oklch(34.66% 0.0644 246.12) 39.1%, oklch(37.24% 0.0656 241.61) 43.5%, oklch(39.94% 0.0664 236.74) 47.8%, oklch(42.47% 0.0666 232.02) 52.2%, oklch(44.55% 0.0663 227.99) 56.5%, oklch(45.89% 0.0655 225.18) 60.9%, oklch(46.23% 0.0640 224.10) 65.2%, oklch(45.21% 0.0617 225.33) 69.6%, oklch(42.74% 0.0581 228.90) 73.9%, oklch(39.22% 0.0536 234.19) 78.3%, oklch(35.07% 0.0485 240.49) 82.6%, oklch(30.73% 0.0433 247.13) 87.0%, oklch(26.63% 0.0385 253.43) 91.3%, oklch(23.20% 0.0345 258.70) 95.7%, oklch(20.87% 0.0317 262.27) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.209 | 0.032 | 262.3 |
| 2 | 0.319 | 0.062 | 250.6 |
| 3 | 0.461 | 0.063 | 224.2 |
| 4 | 0.209 | 0.032 | 262.3 |

## In these collections

- [App background gradients](https://grabient.com/app-background-gradients)

## Other forms

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