# Seamless black, blue and gray angular gradient

Seamless black, blue and gray angular gradient with 48 colors: #1a2224, #1b272a, #1c2e32, #1e363c, #1f4048, #1f4b55, #1d5662, #1b626f, #166c7b, #117586, #097c8f, #058195, #058298, #0e7f96, #187990, #207187, #25677c, #285b6f, #295061, #294654, #273c49, #25353f, #233039, #222d37, #212e39, #213242, #233850, #283f62, #2f4877, #39508e, #4659a6, #5360bd, #6167d1, #6c6ce2, #736fed, #7571f3, #7071f0, #6470e8, #546dd9, #4268c5, #2e61ad, #1c5994, #114f7a, #0f4561, #133a4b, #16303a, #19282d, #1a2224. Edit it and copy or download CSS, SVG, PNG or shader code.

- Seed: `kWPgmZxyO_yUJQ3OxMQnwS4Q`
- Page: https://grabient.com/kWPgmZxyO_yUJQ3OxMQnwS4Q?style=angularGradient&steps=48&angle=0
- Drawn as: angular gradient, 48 steps, 0 degrees
- Kinds: cool, seamless
- Hues: analogous
- Contrast of its darkest and lightest colors: 4.1 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 | `#1a2224` | `oklch(24.41% 0.0124 215.86)` | Noble Black | white, 16.2 to 1 |
| 2 | `#1b272a` | `oklch(26.16% 0.0172 215.71)` | Black Pearl | white, 15.3 to 1 |
| 3 | `#1c2e32` | `oklch(28.63% 0.0238 215.37)` | Freinacht Black | white, 14.1 to 1 |
| 4 | `#1e363c` | `oklch(31.64% 0.0320 214.92)` | Cruel Sea | white, 12.7 to 1 |
| 5 | `#1f4048` | `oklch(35.03% 0.0412 214.41)` | Bay Isle Pointe | white, 11.1 to 1 |
| 6 | `#1f4b55` | `oklch(38.63% 0.0510 213.89)` | Berry Blue Green | white, 9.5 to 1 |
| 7 | `#1d5662` | `oklch(42.28% 0.0609 213.43)` | Baltic Trench | white, 8.1 to 1 |
| 8 | `#1b626f` | `oklch(45.82% 0.0705 213.08)` | Excellence | white, 6.9 to 1 |
| 9 | `#166c7b` | `oklch(49.07% 0.0793 212.91)` | Teal Fury | white, 6 to 1 |
| 10 | `#117586` | `oklch(51.87% 0.0869 212.97)` | Glamour Green | white, 5.3 to 1 |
| 11 | `#097c8f` | `oklch(54.06% 0.0929 213.32)` | Jade Shard | white, 4.8 to 1 |
| 12 | `#058195` | `oklch(55.46% 0.0967 214.01)` | Craftsman Blue | white, 4.5 to 1 |
| 13 | `#058298` | `oklch(55.92% 0.0978 215.12)` | Cruising | black, 4.6 to 1 |
| 14 | `#0e7f96` | `oklch(55.23% 0.0956 216.62)` | Pagoda | white, 4.6 to 1 |
| 15 | `#187990` | `oklch(53.54% 0.0903 218.46)` | Bimini Blue | white, 5 to 1 |
| 16 | `#207187` | `oklch(51.07% 0.0825 220.59)` | Waterworld | white, 5.5 to 1 |
| 17 | `#25677c` | `oklch(48.03% 0.0732 222.98)` | Jester Blue | white, 6.3 to 1 |
| 18 | `#285b6f` | `oklch(44.64% 0.0629 225.58)` | Quiet Storm | white, 7.4 to 1 |
| 19 | `#295061` | `oklch(41.12% 0.0525 228.34)` | Shadow of Night | white, 8.6 to 1 |
| 20 | `#294654` | `oklch(37.69% 0.0427 231.21)` | Rainstorm | white, 10 to 1 |
| 21 | `#273c49` | `oklch(34.56% 0.0341 234.16)` | Tarawera | white, 11.4 to 1 |
| 22 | `#25353f` | `oklch(31.95% 0.0275 237.13)` | Petrol Slumber | white, 12.6 to 1 |
| 23 | `#233039` | `oklch(30.08% 0.0237 240.09)` | Freinacht Black | white, 13.5 to 1 |
| 24 | `#222d37` | `oklch(29.16% 0.0234 242.98)` | Freinacht Black | white, 13.9 to 1 |
| 25 | `#212e39` | `oklch(29.43% 0.0275 245.88)` | Tangaroa | white, 13.8 to 1 |
| 26 | `#213242` | `oklch(30.92% 0.0366 249.38)` | Blue Whale | white, 13.1 to 1 |
| 27 | `#233850` | `oklch(33.42% 0.0501 253.41)` | Cool Air of Debonair | white, 12 to 1 |
| 28 | `#283f62` | `oklch(36.69% 0.0668 257.76)` | Elmer’s Echo | white, 10.5 to 1 |
| 29 | `#2f4877` | `oklch(40.49% 0.0857 262.23)` | Dragonfly | white, 9 to 1 |
| 30 | `#39508e` | `oklch(44.58% 0.1057 266.64)` | Chinese Blue | white, 7.7 to 1 |
| 31 | `#4659a6` | `oklch(48.72% 0.1257 270.78)` | Purple Frenzy | white, 6.5 to 1 |
| 32 | `#5360bd` | `oklch(52.67% 0.1447 274.46)` | Borage Blue | white, 5.5 to 1 |
| 33 | `#6167d1` | `oklch(56.20% 0.1615 277.47)` | Borage Blue | white, 4.8 to 1 |
| 34 | `#6c6ce2` | `oklch(59.06% 0.1752 279.63)` | If I Could Fly | black, 4.8 to 1 |
| 35 | `#736fed` | `oklch(61.01% 0.1846 280.73)` | Medium Slate Blue | black, 5.2 to 1 |
| 36 | `#7571f3` | `oklch(61.82% 0.1887 280.58)` | Hera Blue | black, 5.4 to 1 |
| 37 | `#7071f0` | `oklch(61.31% 0.1867 278.89)` | Hera Blue | black, 5.3 to 1 |
| 38 | `#6470e8` | `oklch(59.67% 0.1792 275.53)` | If I Could Fly | black, 5 to 1 |
| 39 | `#546dd9` | `oklch(57.08% 0.1672 270.77)` | Cornflower | white, 4.6 to 1 |
| 40 | `#4268c5` | `oklch(53.76% 0.1515 264.94)` | God of Rain | white, 5.2 to 1 |
| 41 | `#2e61ad` | `oklch(49.90% 0.1333 258.33)` | Rainbow Bright | white, 6 to 1 |
| 42 | `#1c5994` | `oklch(45.69% 0.1134 251.24)` | Suddenly Sapphire | white, 7.2 to 1 |
| 43 | `#114f7a` | `oklch(41.34% 0.0928 243.99)` | China Seas | white, 8.6 to 1 |
| 44 | `#0f4561` | `oklch(37.05% 0.0724 236.87)` | Forest Blues | white, 10.2 to 1 |
| 45 | `#133a4b` | `oklch(33.01% 0.0532 230.19)` | Subterranean River | white, 12 to 1 |
| 46 | `#16303a` | `oklch(29.43% 0.0362 224.26)` | Tangaroa | white, 13.7 to 1 |
| 47 | `#19282d` | `oklch(26.49% 0.0223 219.38)` | Black Pearl | white, 15.2 to 1 |
| 48 | `#1a2224` | `oklch(24.41% 0.0124 215.86)` | Noble Black | white, 16.2 to 1 |

## CSS

```css
background: conic-gradient(from 0deg, #1a2224 0.0%, #1b272a 2.1%, #1c2e32 4.3%, #1e363c 6.4%, #1f4048 8.5%, #1f4b55 10.6%, #1d5662 12.8%, #1b626f 14.9%, #166c7b 17.0%, #117586 19.1%, #097c8f 21.3%, #058195 23.4%, #058298 25.5%, #0e7f96 27.7%, #187990 29.8%, #207187 31.9%, #25677c 34.0%, #285b6f 36.2%, #295061 38.3%, #294654 40.4%, #273c49 42.6%, #25353f 44.7%, #233039 46.8%, #222d37 48.9%, #212e39 51.1%, #213242 53.2%, #233850 55.3%, #283f62 57.4%, #2f4877 59.6%, #39508e 61.7%, #4659a6 63.8%, #5360bd 66.0%, #6167d1 68.1%, #6c6ce2 70.2%, #736fed 72.3%, #7571f3 74.5%, #7071f0 76.6%, #6470e8 78.7%, #546dd9 80.9%, #4268c5 83.0%, #2e61ad 85.1%, #1c5994 87.2%, #114f7a 89.4%, #0f4561 91.5%, #133a4b 93.6%, #16303a 95.7%, #19282d 97.9%, #1a2224 100.0%);
background: conic-gradient(from 0deg in oklch, oklch(24.41% 0.0124 215.86) 0.0%, oklch(26.16% 0.0172 215.71) 2.1%, oklch(28.63% 0.0238 215.37) 4.3%, oklch(31.64% 0.0320 214.92) 6.4%, oklch(35.03% 0.0412 214.41) 8.5%, oklch(38.63% 0.0510 213.89) 10.6%, oklch(42.28% 0.0609 213.43) 12.8%, oklch(45.82% 0.0705 213.08) 14.9%, oklch(49.07% 0.0793 212.91) 17.0%, oklch(51.87% 0.0869 212.97) 19.1%, oklch(54.06% 0.0929 213.32) 21.3%, oklch(55.46% 0.0967 214.01) 23.4%, oklch(55.92% 0.0978 215.12) 25.5%, oklch(55.23% 0.0956 216.62) 27.7%, oklch(53.54% 0.0903 218.46) 29.8%, oklch(51.07% 0.0825 220.59) 31.9%, oklch(48.03% 0.0732 222.98) 34.0%, oklch(44.64% 0.0629 225.58) 36.2%, oklch(41.12% 0.0525 228.34) 38.3%, oklch(37.69% 0.0427 231.21) 40.4%, oklch(34.56% 0.0341 234.16) 42.6%, oklch(31.95% 0.0275 237.13) 44.7%, oklch(30.08% 0.0237 240.09) 46.8%, oklch(29.16% 0.0234 242.98) 48.9%, oklch(29.43% 0.0275 245.88) 51.1%, oklch(30.92% 0.0366 249.38) 53.2%, oklch(33.42% 0.0501 253.41) 55.3%, oklch(36.69% 0.0668 257.76) 57.4%, oklch(40.49% 0.0857 262.23) 59.6%, oklch(44.58% 0.1057 266.64) 61.7%, oklch(48.72% 0.1257 270.78) 63.8%, oklch(52.67% 0.1447 274.46) 66.0%, oklch(56.20% 0.1615 277.47) 68.1%, oklch(59.06% 0.1752 279.63) 70.2%, oklch(61.01% 0.1846 280.73) 72.3%, oklch(61.82% 0.1887 280.58) 74.5%, oklch(61.31% 0.1867 278.89) 76.6%, oklch(59.67% 0.1792 275.53) 78.7%, oklch(57.08% 0.1672 270.77) 80.9%, oklch(53.76% 0.1515 264.94) 83.0%, oklch(49.90% 0.1333 258.33) 85.1%, oklch(45.69% 0.1134 251.24) 87.2%, oklch(41.34% 0.0928 243.99) 89.4%, oklch(37.05% 0.0724 236.87) 91.5%, oklch(33.01% 0.0532 230.19) 93.6%, oklch(29.43% 0.0362 224.26) 95.7%, oklch(26.49% 0.0223 219.38) 97.9%, oklch(24.41% 0.0124 215.86) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.244 | 0.012 | 215.9 |
| 2 | 0.559 | 0.098 | 214.8 |
| 3 | 0.291 | 0.025 | 244.4 |
| 4 | 0.618 | 0.189 | 280.3 |
| 5 | 0.244 | 0.012 | 215.9 |

## Other forms

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