# Midnight blue and smoky violet

A dark blue and muted violet gradient follows a quiet, closely related color pairing. Deep navy gradually moves through indigo into smoky purple, keeping the whole palette cool and subdued. The diagonal blend suits atmospheric backgrounds, evening graphics and restrained digital layouts that need depth without a bright accent.

- Also called: Analogous navy to purple linear gradient
- Seed: `kQOTS5tTDDQ`
- Page: https://grabient.com/kQOTS5tTDDQ?steps=64&angle=120
- Drawn as: linear gradient, 64 steps, 120 degrees
- Kinds: dark, cool
- Hues: analogous
- Contrast of its darkest and lightest colors: 1.9 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 | `#061a3c` | `oklch(22.44% 0.0717 260.86)` | Maastricht Blue | white, 17.2 to 1 |
| 2 | `#071a3d` | `oklch(22.60% 0.0722 261.10)` | Maastricht Blue | white, 17.1 to 1 |
| 3 | `#071a3e` | `oklch(22.78% 0.0727 261.35)` | Maastricht Blue | white, 17 to 1 |
| 4 | `#081b3f` | `oklch(22.96% 0.0733 261.63)` | Maastricht Blue | white, 17 to 1 |
| 5 | `#081b3f` | `oklch(23.17% 0.0740 261.93)` | Maastricht Blue | white, 16.9 to 1 |
| 6 | `#091b40` | `oklch(23.38% 0.0747 262.25)` | Maastricht Blue | white, 16.8 to 1 |
| 7 | `#0a1c41` | `oklch(23.61% 0.0754 262.58)` | Midnight Mirage | white, 16.7 to 1 |
| 8 | `#0a1c42` | `oklch(23.84% 0.0762 262.93)` | Midnight Mirage | white, 16.6 to 1 |
| 9 | `#0b1d43` | `oklch(24.09% 0.0770 263.30)` | Midnight Mirage | white, 16.5 to 1 |
| 10 | `#0c1d45` | `oklch(24.35% 0.0778 263.69)` | Oxford Blue | white, 16.4 to 1 |
| 11 | `#0d1e46` | `oklch(24.62% 0.0787 264.09)` | Oxford Blue | white, 16.3 to 1 |
| 12 | `#0d1e47` | `oklch(24.90% 0.0796 264.50)` | Oxford Blue | white, 16.2 to 1 |
| 13 | `#0e1f48` | `oklch(25.19% 0.0805 264.93)` | Dark Eclipse | white, 16 to 1 |
| 14 | `#0f1f49` | `oklch(25.49% 0.0815 265.37)` | Dark Eclipse | white, 15.9 to 1 |
| 15 | `#10204b` | `oklch(25.80% 0.0825 265.83)` | Dark Eclipse | white, 15.8 to 1 |
| 16 | `#11204c` | `oklch(26.12% 0.0835 266.30)` | Fly-by-Night | white, 15.6 to 1 |
| 17 | `#12214e` | `oklch(26.44% 0.0845 266.78)` | Dark Soul | white, 15.5 to 1 |
| 18 | `#13224f` | `oklch(26.77% 0.0856 267.26)` | Dark Soul | white, 15.3 to 1 |
| 19 | `#142250` | `oklch(27.11% 0.0867 267.76)` | Dark Soul | white, 15.2 to 1 |
| 20 | `#162352` | `oklch(27.45% 0.0878 268.27)` | Dark Soul | white, 15 to 1 |
| 21 | `#172353` | `oklch(27.80% 0.0889 268.79)` | Dark Soul | white, 14.9 to 1 |
| 22 | `#182455` | `oklch(28.16% 0.0900 269.31)` | Fibonacci Blue | white, 14.7 to 1 |
| 23 | `#192557` | `oklch(28.52% 0.0912 269.85)` | Fibonacci Blue | white, 14.5 to 1 |
| 24 | `#1a2558` | `oklch(28.88% 0.0924 270.38)` | Fibonacci Blue | white, 14.4 to 1 |
| 25 | `#1c265a` | `oklch(29.25% 0.0935 270.93)` | Ultramarine Violet | white, 14.2 to 1 |
| 26 | `#1d275b` | `oklch(29.62% 0.0947 271.48)` | Ultramarine Violet | white, 14 to 1 |
| 27 | `#1e275d` | `oklch(29.99% 0.0959 272.03)` | Schiava Blue | white, 13.9 to 1 |
| 28 | `#1f285f` | `oklch(30.37% 0.0971 272.59)` | Schiava Blue | white, 13.7 to 1 |
| 29 | `#212960` | `oklch(30.75% 0.0984 273.15)` | Deep Breath | white, 13.5 to 1 |
| 30 | `#222962` | `oklch(31.13% 0.0996 273.71)` | Deep Breath | white, 13.4 to 1 |
| 31 | `#242a64` | `oklch(31.51% 0.1008 274.28)` | Deep Breath | white, 13.2 to 1 |
| 32 | `#252b65` | `oklch(31.90% 0.1020 274.84)` | Mythical Night | white, 13 to 1 |
| 33 | `#262b67` | `oklch(32.28% 0.1033 275.41)` | Mythical Night | white, 12.8 to 1 |
| 34 | `#282c69` | `oklch(32.66% 0.1045 275.97)` | Underwater Realm | white, 12.7 to 1 |
| 35 | `#292d6a` | `oklch(33.04% 0.1057 276.54)` | Blue Rose | white, 12.5 to 1 |
| 36 | `#2b2d6c` | `oklch(33.42% 0.1070 277.10)` | Blue Rose | white, 12.3 to 1 |
| 37 | `#2c2e6e` | `oklch(33.80% 0.1082 277.66)` | Blue Rose | white, 12.2 to 1 |
| 38 | `#2d2f6f` | `oklch(34.18% 0.1094 278.22)` | Blue Rose | white, 12 to 1 |
| 39 | `#2f2f71` | `oklch(34.55% 0.1106 278.77)` | Blue Rose | white, 11.8 to 1 |
| 40 | `#303072` | `oklch(34.92% 0.1118 279.32)` | Ballpoint Indigo | white, 11.7 to 1 |
| 41 | `#323074` | `oklch(35.29% 0.1130 279.87)` | Ballpoint Indigo | white, 11.5 to 1 |
| 42 | `#333176` | `oklch(35.66% 0.1141 280.41)` | Ballpoint Indigo | white, 11.4 to 1 |
| 43 | `#353277` | `oklch(36.02% 0.1153 280.94)` | Ballpoint Indigo | white, 11.2 to 1 |
| 44 | `#363279` | `oklch(36.37% 0.1164 281.46)` | Ballpoint Indigo | white, 11.1 to 1 |
| 45 | `#38337a` | `oklch(36.72% 0.1176 281.98)` | Ballpoint Indigo | white, 10.9 to 1 |
| 46 | `#39337c` | `oklch(37.06% 0.1187 282.49)` | Ballpoint Indigo | white, 10.8 to 1 |
| 47 | `#3a347d` | `oklch(37.40% 0.1197 282.99)` | Ballpoint Indigo | white, 10.6 to 1 |
| 48 | `#3c347e` | `oklch(37.73% 0.1208 283.48)` | Ballpoint Indigo | white, 10.5 to 1 |
| 49 | `#3d3580` | `oklch(38.06% 0.1218 283.95)` | Majestic Eggplant | white, 10.4 to 1 |
| 50 | `#3e3581` | `oklch(38.37% 0.1229 284.42)` | Majestic Eggplant | white, 10.2 to 1 |
| 51 | `#403682` | `oklch(38.68% 0.1238 284.88)` | Majestic Eggplant | white, 10.1 to 1 |
| 52 | `#413684` | `oklch(38.98% 0.1248 285.32)` | Majestic Eggplant | white, 10 to 1 |
| 53 | `#423785` | `oklch(39.27% 0.1257 285.75)` | Majestic Eggplant | white, 9.9 to 1 |
| 54 | `#433786` | `oklch(39.55% 0.1266 286.16)` | Majestic Eggplant | white, 9.8 to 1 |
| 55 | `#453887` | `oklch(39.82% 0.1275 286.56)` | Majestic Eggplant | white, 9.7 to 1 |
| 56 | `#463888` | `oklch(40.08% 0.1284 286.95)` | Majestic Eggplant | white, 9.6 to 1 |
| 57 | `#473889` | `oklch(40.33% 0.1292 287.32)` | Nauseous Blue | white, 9.5 to 1 |
| 58 | `#48398a` | `oklch(40.57% 0.1299 287.67)` | Nauseous Blue | white, 9.4 to 1 |
| 59 | `#49398b` | `oklch(40.79% 0.1306 288.00)` | Blue Gem | white, 9.3 to 1 |
| 60 | `#4a398c` | `oklch(41.01% 0.1313 288.32)` | Blue Gem | white, 9.2 to 1 |
| 61 | `#4b3a8d` | `oklch(41.21% 0.1320 288.62)` | Blue Gem | white, 9.2 to 1 |
| 62 | `#4b3a8d` | `oklch(41.40% 0.1326 288.90)` | Blue Gem | white, 9.1 to 1 |
| 63 | `#4c3a8e` | `oklch(41.57% 0.1331 289.15)` | Blue Gem | white, 9 to 1 |
| 64 | `#4d3b8f` | `oklch(41.73% 0.1337 289.39)` | Blue Gem | white, 9 to 1 |

## CSS

```css
background: linear-gradient(120deg, #061a3c 0.0%, #071a3d 1.6%, #071a3e 3.2%, #081b3f 4.8%, #081b3f 6.3%, #091b40 7.9%, #0a1c41 9.5%, #0a1c42 11.1%, #0b1d43 12.7%, #0c1d45 14.3%, #0d1e46 15.9%, #0d1e47 17.5%, #0e1f48 19.0%, #0f1f49 20.6%, #10204b 22.2%, #11204c 23.8%, #12214e 25.4%, #13224f 27.0%, #142250 28.6%, #162352 30.2%, #172353 31.7%, #182455 33.3%, #192557 34.9%, #1a2558 36.5%, #1c265a 38.1%, #1d275b 39.7%, #1e275d 41.3%, #1f285f 42.9%, #212960 44.4%, #222962 46.0%, #242a64 47.6%, #252b65 49.2%, #262b67 50.8%, #282c69 52.4%, #292d6a 54.0%, #2b2d6c 55.6%, #2c2e6e 57.1%, #2d2f6f 58.7%, #2f2f71 60.3%, #303072 61.9%, #323074 63.5%, #333176 65.1%, #353277 66.7%, #363279 68.3%, #38337a 69.8%, #39337c 71.4%, #3a347d 73.0%, #3c347e 74.6%, #3d3580 76.2%, #3e3581 77.8%, #403682 79.4%, #413684 81.0%, #423785 82.5%, #433786 84.1%, #453887 85.7%, #463888 87.3%, #473889 88.9%, #48398a 90.5%, #49398b 92.1%, #4a398c 93.7%, #4b3a8d 95.2%, #4b3a8d 96.8%, #4c3a8e 98.4%, #4d3b8f 100.0%);
background: linear-gradient(120deg in oklch, oklch(22.44% 0.0717 260.86) 0.0%, oklch(22.60% 0.0722 261.10) 1.6%, oklch(22.78% 0.0727 261.35) 3.2%, oklch(22.96% 0.0733 261.63) 4.8%, oklch(23.17% 0.0740 261.93) 6.3%, oklch(23.38% 0.0747 262.25) 7.9%, oklch(23.61% 0.0754 262.58) 9.5%, oklch(23.84% 0.0762 262.93) 11.1%, oklch(24.09% 0.0770 263.30) 12.7%, oklch(24.35% 0.0778 263.69) 14.3%, oklch(24.62% 0.0787 264.09) 15.9%, oklch(24.90% 0.0796 264.50) 17.5%, oklch(25.19% 0.0805 264.93) 19.0%, oklch(25.49% 0.0815 265.37) 20.6%, oklch(25.80% 0.0825 265.83) 22.2%, oklch(26.12% 0.0835 266.30) 23.8%, oklch(26.44% 0.0845 266.78) 25.4%, oklch(26.77% 0.0856 267.26) 27.0%, oklch(27.11% 0.0867 267.76) 28.6%, oklch(27.45% 0.0878 268.27) 30.2%, oklch(27.80% 0.0889 268.79) 31.7%, oklch(28.16% 0.0900 269.31) 33.3%, oklch(28.52% 0.0912 269.85) 34.9%, oklch(28.88% 0.0924 270.38) 36.5%, oklch(29.25% 0.0935 270.93) 38.1%, oklch(29.62% 0.0947 271.48) 39.7%, oklch(29.99% 0.0959 272.03) 41.3%, oklch(30.37% 0.0971 272.59) 42.9%, oklch(30.75% 0.0984 273.15) 44.4%, oklch(31.13% 0.0996 273.71) 46.0%, oklch(31.51% 0.1008 274.28) 47.6%, oklch(31.90% 0.1020 274.84) 49.2%, oklch(32.28% 0.1033 275.41) 50.8%, oklch(32.66% 0.1045 275.97) 52.4%, oklch(33.04% 0.1057 276.54) 54.0%, oklch(33.42% 0.1070 277.10) 55.6%, oklch(33.80% 0.1082 277.66) 57.1%, oklch(34.18% 0.1094 278.22) 58.7%, oklch(34.55% 0.1106 278.77) 60.3%, oklch(34.92% 0.1118 279.32) 61.9%, oklch(35.29% 0.1130 279.87) 63.5%, oklch(35.66% 0.1141 280.41) 65.1%, oklch(36.02% 0.1153 280.94) 66.7%, oklch(36.37% 0.1164 281.46) 68.3%, oklch(36.72% 0.1176 281.98) 69.8%, oklch(37.06% 0.1187 282.49) 71.4%, oklch(37.40% 0.1197 282.99) 73.0%, oklch(37.73% 0.1208 283.48) 74.6%, oklch(38.06% 0.1218 283.95) 76.2%, oklch(38.37% 0.1229 284.42) 77.8%, oklch(38.68% 0.1238 284.88) 79.4%, oklch(38.98% 0.1248 285.32) 81.0%, oklch(39.27% 0.1257 285.75) 82.5%, oklch(39.55% 0.1266 286.16) 84.1%, oklch(39.82% 0.1275 286.56) 85.7%, oklch(40.08% 0.1284 286.95) 87.3%, oklch(40.33% 0.1292 287.32) 88.9%, oklch(40.57% 0.1299 287.67) 90.5%, oklch(40.79% 0.1306 288.00) 92.1%, oklch(41.01% 0.1313 288.32) 93.7%, oklch(41.21% 0.1320 288.62) 95.2%, oklch(41.40% 0.1326 288.90) 96.8%, oklch(41.57% 0.1331 289.15) 98.4%, oklch(41.73% 0.1337 289.39) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.224 | 0.072 | 260.9 |
| 2 | 0.417 | 0.134 | 289.4 |

## In these collections

- [Two color gradients](https://grabient.com/two-color-gradients)

## Other forms

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