# Night Signal palette

The Night Signal palette brings together dark gray, blue, purple, and light red. The colors span a broad lightness range, combining restrained color with clear contrast. Its balanced and composed character suits brand mood boards and editorial graphics. Its darkest tone is dark gray, and its lightest tone is light red.

- Also called: Black, navy and gray linear gradient
- Seed: `kUOQ3Ar5Y-0gQxHgDcoA`
- Page: https://grabient.com/kUOQ3Ar5Y-0gQxHgDcoA?steps=32
- Drawn as: linear gradient, 32 steps, 90 degrees
- Kinds: dark to light, muted
- Hues: wide
- Contrast of its darkest and lightest colors: 7.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 | `#181b24` | `oklch(22.44% 0.0179 270.70)` | Coarse Wool | white, 17.1 to 1 |
| 2 | `#1a1d27` | `oklch(23.28% 0.0206 269.96)` | Coarse Wool | white, 16.7 to 1 |
| 3 | `#1b202c` | `oklch(24.33% 0.0244 268.74)` | Black Howl | white, 16.3 to 1 |
| 4 | `#1d2331` | `oklch(25.56% 0.0289 267.22)` | Dark | white, 15.7 to 1 |
| 5 | `#1e2637` | `oklch(26.95% 0.0340 265.53)` | Midnight Express | white, 15.1 to 1 |
| 6 | `#202a3e` | `oklch(28.45% 0.0393 263.84)` | Eternal Darkness | white, 14.4 to 1 |
| 7 | `#222e44` | `oklch(30.06% 0.0446 262.30)` | Latin Charm | white, 13.6 to 1 |
| 8 | `#24324b` | `oklch(31.73% 0.0496 261.08)` | Blue Lobelia | white, 12.8 to 1 |
| 9 | `#263752` | `oklch(33.44% 0.0541 260.31)` | Cool Air of Debonair | white, 12 to 1 |
| 10 | `#293b59` | `oklch(35.15% 0.0576 260.16)` | Nautilus | white, 11.2 to 1 |
| 11 | `#2d3f5f` | `oklch(36.85% 0.0601 260.79)` | Gulf Blue | white, 10.5 to 1 |
| 12 | `#324465` | `oklch(38.52% 0.0613 262.21)` | Black Turmeric | white, 9.8 to 1 |
| 13 | `#37486a` | `oklch(40.27% 0.0614 264.11)` | Starlit Night | white, 9.1 to 1 |
| 14 | `#3e4c6f` | `oklch(42.08% 0.0607 266.46)` | Mountain Blueberry | white, 8.4 to 1 |
| 15 | `#455173` | `oklch(43.94% 0.0592 269.25)` | Astronaut | white, 7.8 to 1 |
| 16 | `#4d5678` | `oklch(45.84% 0.0573 272.48)` | Alpha Centauri | white, 7.2 to 1 |
| 17 | `#545a7c` | `oklch(47.77% 0.0551 276.17)` | Blue Indigo | white, 6.6 to 1 |
| 18 | `#5c5f80` | `oklch(49.70% 0.0527 280.29)` | Strong Iris | white, 6.1 to 1 |
| 19 | `#646484` | `oklch(51.64% 0.0503 284.87)` | Pharaoh Purple | white, 5.6 to 1 |
| 20 | `#6d6988` | `oklch(53.56% 0.0482 289.88)` | Aromatic | white, 5.2 to 1 |
| 21 | `#756e8c` | `oklch(55.45% 0.0464 295.35)` | Purple Silhouette | white, 4.8 to 1 |
| 22 | `#7d728f` | `oklch(57.32% 0.0451 301.32)` | Batik Lilac | black, 4.6 to 1 |
| 23 | `#867793` | `oklch(59.29% 0.0440 308.57)` | Vintage | black, 5 to 1 |
| 24 | `#8f7d96` | `oklch(61.36% 0.0430 317.04)` | Violet Persuasion | black, 5.5 to 1 |
| 25 | `#998298` | `oklch(63.48% 0.0420 326.34)` | Mixed Berries | black, 6 to 1 |
| 26 | `#a2889b` | `oklch(65.61% 0.0411 336.14)` | Lively Light | black, 6.5 to 1 |
| 27 | `#ab8e9d` | `oklch(67.69% 0.0403 346.06)` | Mauve Shadows | black, 7 to 1 |
| 28 | `#b3949e` | `oklch(69.67% 0.0395 355.74)` | Ashberry | black, 7.6 to 1 |
| 29 | `#b999a0` | `oklch(71.50% 0.0388 4.82)` | Keepsake Lilac | black, 8.1 to 1 |
| 30 | `#bf9fa1` | `oklch(73.13% 0.0382 12.93)` | Zephyr | black, 8.6 to 1 |
| 31 | `#c3a3a3` | `oklch(74.51% 0.0376 19.73)` | Lychee Berry | black, 9.1 to 1 |
| 32 | `#c7a7a4` | `oklch(75.59% 0.0372 24.83)` | Parfait | black, 9.4 to 1 |

## CSS

```css
background: linear-gradient(90deg, #181b24 0.0%, #1a1d27 3.2%, #1b202c 6.5%, #1d2331 9.7%, #1e2637 12.9%, #202a3e 16.1%, #222e44 19.4%, #24324b 22.6%, #263752 25.8%, #293b59 29.0%, #2d3f5f 32.3%, #324465 35.5%, #37486a 38.7%, #3e4c6f 41.9%, #455173 45.2%, #4d5678 48.4%, #545a7c 51.6%, #5c5f80 54.8%, #646484 58.1%, #6d6988 61.3%, #756e8c 64.5%, #7d728f 67.7%, #867793 71.0%, #8f7d96 74.2%, #998298 77.4%, #a2889b 80.6%, #ab8e9d 83.9%, #b3949e 87.1%, #b999a0 90.3%, #bf9fa1 93.5%, #c3a3a3 96.8%, #c7a7a4 100.0%);
background: linear-gradient(90deg in oklch, oklch(22.44% 0.0179 270.70) 0.0%, oklch(23.28% 0.0206 269.96) 3.2%, oklch(24.33% 0.0244 268.74) 6.5%, oklch(25.56% 0.0289 267.22) 9.7%, oklch(26.95% 0.0340 265.53) 12.9%, oklch(28.45% 0.0393 263.84) 16.1%, oklch(30.06% 0.0446 262.30) 19.4%, oklch(31.73% 0.0496 261.08) 22.6%, oklch(33.44% 0.0541 260.31) 25.8%, oklch(35.15% 0.0576 260.16) 29.0%, oklch(36.85% 0.0601 260.79) 32.3%, oklch(38.52% 0.0613 262.21) 35.5%, oklch(40.27% 0.0614 264.11) 38.7%, oklch(42.08% 0.0607 266.46) 41.9%, oklch(43.94% 0.0592 269.25) 45.2%, oklch(45.84% 0.0573 272.48) 48.4%, oklch(47.77% 0.0551 276.17) 51.6%, oklch(49.70% 0.0527 280.29) 54.8%, oklch(51.64% 0.0503 284.87) 58.1%, oklch(53.56% 0.0482 289.88) 61.3%, oklch(55.45% 0.0464 295.35) 64.5%, oklch(57.32% 0.0451 301.32) 67.7%, oklch(59.29% 0.0440 308.57) 71.0%, oklch(61.36% 0.0430 317.04) 74.2%, oklch(63.48% 0.0420 326.34) 77.4%, oklch(65.61% 0.0411 336.14) 80.6%, oklch(67.69% 0.0403 346.06) 83.9%, oklch(69.67% 0.0395 355.74) 87.1%, oklch(71.50% 0.0388 4.82) 90.3%, oklch(73.13% 0.0382 12.93) 93.5%, oklch(74.51% 0.0376 19.73) 96.8%, oklch(75.59% 0.0372 24.83) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.224 | 0.018 | 270.7 |
| 2 | 0.374 | 0.061 | 261.2 |
| 3 | 0.567 | 0.045 | 299.2 |
| 4 | 0.756 | 0.037 | 384.8 |

## In these collections

- [Lo-fi](https://grabient.com/lo-fi)

## Other forms

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