# Near-black and blue color palette

The Near-black and blue color 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 travel posters and environmental mood boards. Its darkest tone is black, and its lightest tone is blue.

- Also called: Monochrome black and blue linear swatches
- Seed: `kUGRLHFxe_aKmP0srz9A`
- Page: https://grabient.com/kUGRLHFxe_aKmP0srz9A?style=linearSwatches&steps=4&angle=135
- Drawn as: linear swatches, 4 steps, 135 degrees
- Kinds: dark, cool, monochrome
- Hues: monochromatic
- Contrast of its darkest and lightest colors: 1.7 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 | `#02020a` | `oklch(9.84% 0.0248 279.84)` | Ninja | white, 20.6 to 1 |
| 2 | `#0b0d2e` | `oklch(18.11% 0.0648 275.62)` | Mysterious Depths | white, 18.9 to 1 |
| 3 | `#151f59` | `oklch(27.17% 0.1047 270.33)` | Fibonacci Blue | white, 15.3 to 1 |
| 4 | `#18337d` | `oklch(35.04% 0.1295 265.05)` | Twilight Express | white, 11.5 to 1 |

## CSS

```css
background: linear-gradient(135deg, #02020a 0.000% 25.000%, #0b0d2e 25.000% 50.000%, #151f59 50.000% 75.000%, #18337d 75.000% 100.000%);
background: linear-gradient(135deg, oklch(9.84% 0.0248 279.84) 0.000% 25.000%, oklch(18.11% 0.0648 275.62) 25.000% 50.000%, oklch(27.17% 0.1047 270.33) 50.000% 75.000%, oklch(35.04% 0.1295 265.05) 75.000% 100.000%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.098 | 0.025 | 279.8 |
| 2 | 0.181 | 0.065 | 275.6 |
| 3 | 0.272 | 0.105 | 270.3 |
| 4 | 0.35 | 0.13 | 265 |

## In these collections

- [Blue swatches](https://grabient.com/blue-swatches)
- [Monochromatic swatches](https://grabient.com/monochromatic-swatches)
- [Ocean swatches](https://grabient.com/ocean-swatches)

## Other forms

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