# Navy and aubergine color palette The Navy and aubergine color palette brings together dark blue and purple. The colors span a moderate lightness range, combining strong color with clear contrast. Its dark and grounded character suits game interface concepts and stream graphics. Its darkest tone is dark blue, and its lightest tone is purple. - Also called: Analogous navy to purple linear gradient - Seed: `kSKSzDp7NBsdQQu` - Page: https://grabient.com/kSKSzDp7NBsdQQu?steps=32&angle=180 - Drawn as: linear gradient, 32 steps, 180 degrees - Kinds: dark to light, vivid, dark - Hues: analogous - Contrast of its darkest and lightest colors: 3.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 | `#070927` | `oklch(16.14% 0.0606 274.92)` | Mysterious Depths | white, 19.4 to 1 | | 2 | `#080929` | `oklch(16.67% 0.0635 275.44)` | Mysterious Depths | white, 19.3 to 1 | | 3 | `#0a0a2c` | `oklch(17.27% 0.0670 276.03)` | Mysterious Depths | white, 19.2 to 1 | | 4 | `#0b0b30` | `oklch(17.95% 0.0711 276.69)` | Cosmic Void | white, 19 to 1 | | 5 | `#0d0c34` | `oklch(18.70% 0.0756 277.43)` | Infinite Night | white, 18.7 to 1 | | 6 | `#0f0d38` | `oklch(19.51% 0.0805 278.23)` | Grim Reaper | white, 18.5 to 1 | | 7 | `#110e3c` | `oklch(20.39% 0.0858 279.09)` | Grim Reaper | white, 18.2 to 1 | | 8 | `#140f41` | `oklch(21.33% 0.0913 280.01)` | Deadly Depths | white, 17.9 to 1 | | 9 | `#170f46` | `oklch(22.33% 0.0971 280.98)` | Deadly Depths | white, 17.5 to 1 | | 10 | `#1a104c` | `oklch(23.37% 0.1030 282.01)` | Tetsu-Kon Blue | white, 17.1 to 1 | | 11 | `#1d1151` | `oklch(24.46% 0.1089 283.09)` | Praise of Shadow | white, 16.7 to 1 | | 12 | `#211357` | `oklch(25.59% 0.1150 284.21)` | Praise of Shadow | white, 16.2 to 1 | | 13 | `#24145c` | `oklch(26.76% 0.1209 285.37)` | Praise of Shadow | white, 15.7 to 1 | | 14 | `#281562` | `oklch(27.97% 0.1268 286.57)` | Nebula Night | white, 15.2 to 1 | | 15 | `#2d1668` | `oklch(29.20% 0.1325 287.80)` | Night Fog | white, 14.7 to 1 | | 16 | `#31176e` | `oklch(30.46% 0.1379 289.07)` | Candied Blueberry | white, 14.1 to 1 | | 17 | `#361974` | `oklch(31.77% 0.1432 290.39)` | Explorer of the Galaxies | white, 13.5 to 1 | | 18 | `#3b1b7a` | `oklch(33.22% 0.1486 291.86)` | Explorer of the Galaxies | white, 12.9 to 1 | | 19 | `#421d80` | `oklch(34.82% 0.1543 293.48)` | Galactic Civilization | white, 12.2 to 1 | | 20 | `#481f87` | `oklch(36.53% 0.1602 295.23)` | Occult | white, 11.4 to 1 | | 21 | `#50228e` | `oklch(38.33% 0.1661 297.07)` | Eggplant Tint | white, 10.7 to 1 | | 22 | `#582495` | `oklch(40.18% 0.1722 298.97)` | Eine Kleine Nachtmusik | white, 9.9 to 1 | | 23 | `#60279c` | `oklch(42.07% 0.1781 300.90)` | Wild Violet | white, 9.2 to 1 | | 24 | `#682aa3` | `oklch(43.97% 0.1841 302.84)` | Rebecca Purple | white, 8.5 to 1 | | 25 | `#712caa` | `oklch(45.84% 0.1898 304.76)` | Fuchsia Nebula | white, 7.9 to 1 | | 26 | `#792fb0` | `oklch(47.66% 0.1953 306.62)` | Purple Pristine | white, 7.3 to 1 | | 27 | `#8231b6` | `oklch(49.39% 0.2006 308.40)` | Pheromone Purple | white, 6.8 to 1 | | 28 | `#8a33bb` | `oklch(51.02% 0.2055 310.07)` | Pheromone Purple | white, 6.4 to 1 | | 29 | `#9135c0` | `oklch(52.52% 0.2100 311.61)` | Dreamscape Purple | white, 6 to 1 | | 30 | `#9837c4` | `oklch(53.85% 0.2141 312.97)` | Purple Vanity | white, 5.7 to 1 | | 31 | `#9e38c7` | `oklch(54.99% 0.2176 314.14)` | Purple Vanity | white, 5.4 to 1 | | 32 | `#a339ca` | `oklch(55.91% 0.2205 315.08)` | Purple Vanity | white, 5.2 to 1 | ## CSS ```css background: linear-gradient(180deg, #070927 0.0%, #080929 3.2%, #0a0a2c 6.5%, #0b0b30 9.7%, #0d0c34 12.9%, #0f0d38 16.1%, #110e3c 19.4%, #140f41 22.6%, #170f46 25.8%, #1a104c 29.0%, #1d1151 32.3%, #211357 35.5%, #24145c 38.7%, #281562 41.9%, #2d1668 45.2%, #31176e 48.4%, #361974 51.6%, #3b1b7a 54.8%, #421d80 58.1%, #481f87 61.3%, #50228e 64.5%, #582495 67.7%, #60279c 71.0%, #682aa3 74.2%, #712caa 77.4%, #792fb0 80.6%, #8231b6 83.9%, #8a33bb 87.1%, #9135c0 90.3%, #9837c4 93.5%, #9e38c7 96.8%, #a339ca 100.0%); background: linear-gradient(180deg in oklch, oklch(16.14% 0.0606 274.92) 0.0%, oklch(16.67% 0.0635 275.44) 3.2%, oklch(17.27% 0.0670 276.03) 6.5%, oklch(17.95% 0.0711 276.69) 9.7%, oklch(18.70% 0.0756 277.43) 12.9%, oklch(19.51% 0.0805 278.23) 16.1%, oklch(20.39% 0.0858 279.09) 19.4%, oklch(21.33% 0.0913 280.01) 22.6%, oklch(22.33% 0.0971 280.98) 25.8%, oklch(23.37% 0.1030 282.01) 29.0%, oklch(24.46% 0.1089 283.09) 32.3%, oklch(25.59% 0.1150 284.21) 35.5%, oklch(26.76% 0.1209 285.37) 38.7%, oklch(27.97% 0.1268 286.57) 41.9%, oklch(29.20% 0.1325 287.80) 45.2%, oklch(30.46% 0.1379 289.07) 48.4%, oklch(31.77% 0.1432 290.39) 51.6%, oklch(33.22% 0.1486 291.86) 54.8%, oklch(34.82% 0.1543 293.48) 58.1%, oklch(36.53% 0.1602 295.23) 61.3%, oklch(38.33% 0.1661 297.07) 64.5%, oklch(40.18% 0.1722 298.97) 67.7%, oklch(42.07% 0.1781 300.90) 71.0%, oklch(43.97% 0.1841 302.84) 74.2%, oklch(45.84% 0.1898 304.76) 77.4%, oklch(47.66% 0.1953 306.62) 80.6%, oklch(49.39% 0.2006 308.40) 83.9%, oklch(51.02% 0.2055 310.07) 87.1%, oklch(52.52% 0.2100 311.61) 90.3%, oklch(53.85% 0.2141 312.97) 93.5%, oklch(54.99% 0.2176 314.14) 96.8%, oklch(55.91% 0.2205 315.08) 100.0%); ``` ## Keyframes 3 OKLCH keyframes joined by a Catmull-Rom spline. Hue is unwrapped degrees. | Keyframe | Lightness | Chroma | Hue | | --- | --- | --- | --- | | 1 | 0.161 | 0.061 | 274.9 | | 2 | 0.311 | 0.141 | 289.7 | | 3 | 0.559 | 0.22 | 315.1 | ## In these collections - [Cyberpunk gradients](https://grabient.com/cyberpunk-gradients) - [Retro gradients](https://grabient.com/retro-gradients) - [Synthwave gradients](https://grabient.com/synthwave-gradients) ## Other forms - [JSON](https://grabient.com/kSKSzDp7NBsdQQu.json?steps=32&angle=180) - [PNG](https://grabient.com/kSKSzDp7NBsdQQu.png?steps=32&angle=180) - [SVG](https://grabient.com/kSKSzDp7NBsdQQu.svg?steps=32&angle=180) - [CSS](https://grabient.com/kSKSzDp7NBsdQQu.css?steps=32&angle=180) - [ASE](https://grabient.com/kSKSzDp7NBsdQQu.ase?steps=32&angle=180) - [GPL](https://grabient.com/kSKSzDp7NBsdQQu.gpl?steps=32&angle=180) - [GRD](https://grabient.com/kSKSzDp7NBsdQQu.grd?steps=32&angle=180) - [Design tokens](https://grabient.com/kSKSzDp7NBsdQQu.tokens.json?steps=32&angle=180) - [Social card](https://grabient.com/api/og?seed=kSKSzDp7NBsdQQu&steps=32&angle=180) - [Palettes like this one](https://grabient.com/palettes?q=kSKSzDp7NBsdQQu) - [Guide for agents](https://grabient.com/llms.txt)