# Near-black and blue app background palette

The Near-black and blue app background palette brings together black, dark blue, and blue. The colors span a moderate lightness range, combining moderate color with gentle contrast. Its dark and grounded character suits website sections and interface mockups. Its darkest tone is black, and its lightest tone is blue.

- Also called: Monochrome black to navy angular gradient
- Seed: `kUGRLUGZQ_KifPszFj8A`
- Page: https://grabient.com/kUGRLUGZQ_KifPszFj8A?style=angularGradient&steps=40&angle=255
- Drawn as: angular gradient, 40 steps, 255 degrees
- Kinds: dark to light, dark, cool, monochrome
- Hues: analogous
- Contrast of its darkest and lightest colors: 2.2 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 | `#040209` | `oklch(9.84% 0.0248 298.13)` | Ninja | white, 20.6 to 1 |
| 2 | `#04020a` | `oklch(10.29% 0.0261 297.85)` | Ninja | white, 20.5 to 1 |
| 3 | `#05030c` | `oklch(10.84% 0.0278 297.53)` | Broken Tube | white, 20.5 to 1 |
| 4 | `#06030e` | `oklch(11.47% 0.0297 297.16)` | Broken Tube | white, 20.4 to 1 |
| 5 | `#070410` | `oklch(12.19% 0.0319 296.75)` | Broken Tube | white, 20.3 to 1 |
| 6 | `#090513` | `oklch(12.96% 0.0343 296.29)` | Not Tonight | white, 20.1 to 1 |
| 7 | `#0a0616` | `oklch(13.79% 0.0368 295.80)` | Not Tonight | white, 20 to 1 |
| 8 | `#0c0719` | `oklch(14.66% 0.0394 295.29)` | Not Tonight | white, 19.8 to 1 |
| 9 | `#0e081c` | `oklch(15.56% 0.0421 294.74)` | Tristesse | white, 19.6 to 1 |
| 10 | `#10091f` | `oklch(16.48% 0.0448 294.18)` | Tristesse | white, 19.3 to 1 |
| 11 | `#120b23` | `oklch(17.40% 0.0475 293.59)` | Tristesse | white, 19.1 to 1 |
| 12 | `#140d26` | `oklch(18.31% 0.0502 293.00)` | Corbeau | white, 18.8 to 1 |
| 13 | `#150f29` | `oklch(19.21% 0.0527 292.39)` | Corbeau | white, 18.5 to 1 |
| 14 | `#17102d` | `oklch(20.08% 0.0551 291.78)` | Midnight Monarch | white, 18.2 to 1 |
| 15 | `#191230` | `oklch(20.95% 0.0576 291.15)` | Midnight Monarch | white, 17.9 to 1 |
| 16 | `#1b1434` | `oklch(21.84% 0.0603 290.47)` | Lost in Sadness | white, 17.5 to 1 |
| 17 | `#1d1637` | `oklch(22.77% 0.0632 289.76)` | Blacklist | white, 17.2 to 1 |
| 18 | `#1e183b` | `oklch(23.71% 0.0663 289.02)` | Prune Plum | white, 16.8 to 1 |
| 19 | `#201a3f` | `oklch(24.67% 0.0693 288.26)` | Prune Plum | white, 16.4 to 1 |
| 20 | `#221c43` | `oklch(25.63% 0.0723 287.49)` | Azulado | white, 15.9 to 1 |
| 21 | `#241e48` | `oklch(26.59% 0.0751 286.70)` | Azulado | white, 15.5 to 1 |
| 22 | `#25204c` | `oklch(27.53% 0.0778 285.92)` | Silent Orbit | white, 15.1 to 1 |
| 23 | `#27224f` | `oklch(28.47% 0.0802 285.15)` | Pāua | white, 14.6 to 1 |
| 24 | `#292453` | `oklch(29.37% 0.0822 284.39)` | Pāua | white, 14.2 to 1 |
| 25 | `#2a2756` | `oklch(30.25% 0.0838 283.65)` | Ceremonial Purple | white, 13.8 to 1 |
| 26 | `#2c295a` | `oklch(31.09% 0.0849 282.94)` | Ceremonial Purple | white, 13.4 to 1 |
| 27 | `#2d2b5c` | `oklch(31.89% 0.0854 282.27)` | Deep Sea Base | white, 13 to 1 |
| 28 | `#2e2d5e` | `oklch(32.66% 0.0853 281.62)` | Galaxea | white, 12.6 to 1 |
| 29 | `#303060` | `oklch(33.44% 0.0844 280.95)` | Galaxea | white, 12.2 to 1 |
| 30 | `#313262` | `oklch(34.21% 0.0830 280.27)` | Galaxea | white, 11.9 to 1 |
| 31 | `#323464` | `oklch(34.97% 0.0811 279.60)` | Deep Koamaru | white, 11.5 to 1 |
| 32 | `#343765` | `oklch(35.70% 0.0788 278.94)` | Rhynchites Nitens | white, 11.2 to 1 |
| 33 | `#353966` | `oklch(36.42% 0.0763 278.29)` | Rhynchites Nitens | white, 10.8 to 1 |
| 34 | `#373b66` | `oklch(37.10% 0.0736 277.67)` | Rhynchites Nitens | white, 10.5 to 1 |
| 35 | `#383d67` | `oklch(37.74% 0.0709 277.09)` | Bay of Many | white, 10.2 to 1 |
| 36 | `#3a3f67` | `oklch(38.34% 0.0682 276.54)` | Raven Night | white, 10 to 1 |
| 37 | `#3b4168` | `oklch(38.89% 0.0658 276.04)` | Gloomy Blue | white, 9.7 to 1 |
| 38 | `#3c4368` | `oklch(39.38% 0.0636 275.59)` | Chronicle | white, 9.5 to 1 |
| 39 | `#3d4468` | `oklch(39.80% 0.0619 275.20)` | Genie | white, 9.3 to 1 |
| 40 | `#3e4569` | `oklch(40.16% 0.0606 274.88)` | Starlit Night | white, 9.2 to 1 |

## CSS

```css
background: conic-gradient(from 255deg, #040209 0.0%, #04020a 2.6%, #05030c 5.1%, #06030e 7.7%, #070410 10.3%, #090513 12.8%, #0a0616 15.4%, #0c0719 17.9%, #0e081c 20.5%, #10091f 23.1%, #120b23 25.6%, #140d26 28.2%, #150f29 30.8%, #17102d 33.3%, #191230 35.9%, #1b1434 38.5%, #1d1637 41.0%, #1e183b 43.6%, #201a3f 46.2%, #221c43 48.7%, #241e48 51.3%, #25204c 53.8%, #27224f 56.4%, #292453 59.0%, #2a2756 61.5%, #2c295a 64.1%, #2d2b5c 66.7%, #2e2d5e 69.2%, #303060 71.8%, #313262 74.4%, #323464 76.9%, #343765 79.5%, #353966 82.1%, #373b66 84.6%, #383d67 87.2%, #3a3f67 89.7%, #3b4168 92.3%, #3c4368 94.9%, #3d4468 97.4%, #3e4569 100.0%);
background: conic-gradient(from 255deg in oklch, oklch(9.84% 0.0248 298.13) 0.0%, oklch(10.29% 0.0261 297.85) 2.6%, oklch(10.84% 0.0278 297.53) 5.1%, oklch(11.47% 0.0297 297.16) 7.7%, oklch(12.19% 0.0319 296.75) 10.3%, oklch(12.96% 0.0343 296.29) 12.8%, oklch(13.79% 0.0368 295.80) 15.4%, oklch(14.66% 0.0394 295.29) 17.9%, oklch(15.56% 0.0421 294.74) 20.5%, oklch(16.48% 0.0448 294.18) 23.1%, oklch(17.40% 0.0475 293.59) 25.6%, oklch(18.31% 0.0502 293.00) 28.2%, oklch(19.21% 0.0527 292.39) 30.8%, oklch(20.08% 0.0551 291.78) 33.3%, oklch(20.95% 0.0576 291.15) 35.9%, oklch(21.84% 0.0603 290.47) 38.5%, oklch(22.77% 0.0632 289.76) 41.0%, oklch(23.71% 0.0663 289.02) 43.6%, oklch(24.67% 0.0693 288.26) 46.2%, oklch(25.63% 0.0723 287.49) 48.7%, oklch(26.59% 0.0751 286.70) 51.3%, oklch(27.53% 0.0778 285.92) 53.8%, oklch(28.47% 0.0802 285.15) 56.4%, oklch(29.37% 0.0822 284.39) 59.0%, oklch(30.25% 0.0838 283.65) 61.5%, oklch(31.09% 0.0849 282.94) 64.1%, oklch(31.89% 0.0854 282.27) 66.7%, oklch(32.66% 0.0853 281.62) 69.2%, oklch(33.44% 0.0844 280.95) 71.8%, oklch(34.21% 0.0830 280.27) 74.4%, oklch(34.97% 0.0811 279.60) 76.9%, oklch(35.70% 0.0788 278.94) 79.5%, oklch(36.42% 0.0763 278.29) 82.1%, oklch(37.10% 0.0736 277.67) 84.6%, oklch(37.74% 0.0709 277.09) 87.2%, oklch(38.34% 0.0682 276.54) 89.7%, oklch(38.89% 0.0658 276.04) 92.3%, oklch(39.38% 0.0636 275.59) 94.9%, oklch(39.80% 0.0619 275.20) 97.4%, oklch(40.16% 0.0606 274.88) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.098 | 0.025 | 298.1 |
| 2 | 0.201 | 0.055 | 291.8 |
| 3 | 0.319 | 0.085 | 282.3 |
| 4 | 0.402 | 0.061 | 274.9 |

## In these collections

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

## Other forms

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