# Midnight into Gold The Near-black and tan color palette brings together black, dark gray, gray, orange, gold, and light yellow. The colors span a very broad lightness range, combining moderate color with high contrast. Its balanced and composed character suits brand mood boards and editorial graphics. Its darkest tone is black, and its lightest tone is light yellow. - Also called: Monochrome black to tan linear gradient - Seed: `kYHA22HoXAi8DrDCmj7XCzAHCswO` - Page: https://grabient.com/kYHA22HoXAi8DrDCmj7XCzAHCswO?steps=32 - Drawn as: linear gradient, 32 steps, 90 degrees - Kinds: dark to light, muted, monochrome - Hues: monochromatic - Contrast of its darkest and lightest colors: 14.5 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 | `#02050a` | `oklch(11.02% 0.0179 255.94)` | Eight Ball | white, 20.4 to 1 | | 2 | `#03060d` | `oklch(12.38% 0.0177 258.37)` | Eight Ball | white, 20.2 to 1 | | 3 | `#060a11` | `oklch(14.25% 0.0173 263.32)` | Dark Rift | white, 19.8 to 1 | | 4 | `#0b0e16` | `oklch(16.47% 0.0169 268.56)` | Midnight Oil | white, 19.2 to 1 | | 5 | `#11131b` | `oklch(18.88% 0.0165 271.85)` | Kuroi Black | white, 18.5 to 1 | | 6 | `#161920` | `oklch(21.30% 0.0159 270.96)` | River Styx | white, 17.6 to 1 | | 7 | `#1b1e26` | `oklch(23.59% 0.0153 263.65)` | Satin Deep Black | white, 16.6 to 1 | | 8 | `#1e242a` | `oklch(25.68% 0.0141 246.97)` | Dark Gunmetal | white, 15.6 to 1 | | 9 | `#222a2c` | `oklch(27.72% 0.0117 220.63)` | Charleston Green | white, 14.6 to 1 | | 10 | `#282f2e` | `oklch(29.75% 0.0091 188.71)` | Swamp Mosquito | white, 13.7 to 1 | | 11 | `#303331` | `oklch(31.81% 0.0070 155.35)` | Oil | white, 12.7 to 1 | | 12 | `#373835` | `oklch(33.91% 0.0064 124.70)` | Pirate Black | white, 11.7 to 1 | | 13 | `#3e3e39` | `oklch(36.10% 0.0081 100.92)` | Knights of the Desert | white, 10.8 to 1 | | 14 | `#46433c` | `oklch(38.38% 0.0130 87.07)` | Volcanic Stone Green | white, 9.8 to 1 | | 15 | `#50483d` | `oklch(40.69% 0.0211 80.36)` | Wet Suit | white, 8.9 to 1 | | 16 | `#594e3c` | `oklch(43.04% 0.0314 78.60)` | Beggar | white, 8.1 to 1 | | 17 | `#63543b` | `oklch(45.47% 0.0430 79.95)` | Oliva Oscuro | white, 7.3 to 1 | | 18 | `#6d5b39` | `oklch(48.01% 0.0548 82.56)` | Bali Batik | white, 6.5 to 1 | | 19 | `#776237` | `oklch(50.68% 0.0658 84.58)` | Twig Basket | white, 5.8 to 1 | | 20 | `#826a37` | `oklch(53.53% 0.0754 84.50)` | By Gum | white, 5.1 to 1 | | 21 | `#8e7237` | `oklch(56.65% 0.0849 84.12)` | Marshy Green | black, 4.6 to 1 | | 22 | `#9b7b37` | `oklch(59.97% 0.0945 84.04)` | Metallic Sunburst | black, 5.2 to 1 | | 23 | `#a88538` | `oklch(63.38% 0.1037 84.23)` | Garden Sprout | black, 6 to 1 | | 24 | `#b48e39` | `oklch(66.76% 0.1119 84.64)` | Mayan Gold | black, 6.8 to 1 | | 25 | `#c0983c` | `oklch(70.01% 0.1186 85.23)` | Leisure | black, 7.8 to 1 | | 26 | `#caa240` | `oklch(73.03% 0.1234 85.97)` | Golden Touch | black, 8.7 to 1 | | 27 | `#d4ac47` | `oklch(76.06% 0.1258 87.10)` | Haystack | black, 9.7 to 1 | | 28 | `#dcb651` | `oklch(79.12% 0.1264 88.60)` | High Honey | black, 10.8 to 1 | | 29 | `#e4c15c` | `oklch(82.05% 0.1257 90.26)` | Candelabra | black, 12 to 1 | | 30 | `#eaca66` | `oklch(84.71% 0.1244 91.89)` | Sulphur Pit | black, 13.1 to 1 | | 31 | `#efd26f` | `oklch(86.94% 0.1232 93.29)` | Funky Yellow | black, 14.1 to 1 | | 32 | `#f4d876` | `oklch(88.58% 0.1226 94.25)` | Sandy | black, 14.9 to 1 | ## CSS ```css background: linear-gradient(90deg, #02050a 0.0%, #03060d 3.2%, #060a11 6.5%, #0b0e16 9.7%, #11131b 12.9%, #161920 16.1%, #1b1e26 19.4%, #1e242a 22.6%, #222a2c 25.8%, #282f2e 29.0%, #303331 32.3%, #373835 35.5%, #3e3e39 38.7%, #46433c 41.9%, #50483d 45.2%, #594e3c 48.4%, #63543b 51.6%, #6d5b39 54.8%, #776237 58.1%, #826a37 61.3%, #8e7237 64.5%, #9b7b37 67.7%, #a88538 71.0%, #b48e39 74.2%, #c0983c 77.4%, #caa240 80.6%, #d4ac47 83.9%, #dcb651 87.1%, #e4c15c 90.3%, #eaca66 93.5%, #efd26f 96.8%, #f4d876 100.0%); background: linear-gradient(90deg in oklch, oklch(11.02% 0.0179 255.94) 0.0%, oklch(12.38% 0.0177 258.37) 3.2%, oklch(14.25% 0.0173 263.32) 6.5%, oklch(16.47% 0.0169 268.56) 9.7%, oklch(18.88% 0.0165 271.85) 12.9%, oklch(21.30% 0.0159 270.96) 16.1%, oklch(23.59% 0.0153 263.65) 19.4%, oklch(25.68% 0.0141 246.97) 22.6%, oklch(27.72% 0.0117 220.63) 25.8%, oklch(29.75% 0.0091 188.71) 29.0%, oklch(31.81% 0.0070 155.35) 32.3%, oklch(33.91% 0.0064 124.70) 35.5%, oklch(36.10% 0.0081 100.92) 38.7%, oklch(38.38% 0.0130 87.07) 41.9%, oklch(40.69% 0.0211 80.36) 45.2%, oklch(43.04% 0.0314 78.60) 48.4%, oklch(45.47% 0.0430 79.95) 51.6%, oklch(48.01% 0.0548 82.56) 54.8%, oklch(50.68% 0.0658 84.58) 58.1%, oklch(53.53% 0.0754 84.50) 61.3%, oklch(56.65% 0.0849 84.12) 64.5%, oklch(59.97% 0.0945 84.04) 67.7%, oklch(63.38% 0.1037 84.23) 71.0%, oklch(66.76% 0.1119 84.64) 74.2%, oklch(70.01% 0.1186 85.23) 77.4%, oklch(73.03% 0.1234 85.97) 80.6%, oklch(76.06% 0.1258 87.10) 83.9%, oklch(79.12% 0.1264 88.60) 87.1%, oklch(82.05% 0.1257 90.26) 90.3%, oklch(84.71% 0.1244 91.89) 93.5%, oklch(86.94% 0.1232 93.29) 96.8%, oklch(88.58% 0.1226 94.25) 100.0%); ``` ## Keyframes 6 OKLCH keyframes joined by a Catmull-Rom spline. Hue is unwrapped degrees. | Keyframe | Lightness | Chroma | Hue | | --- | --- | --- | --- | | 1 | 0.11 | 0.018 | 255.9 | | 2 | 0.24 | 0.015 | 261.2 | | 3 | 0.37 | 0.01 | 94.3 | | 4 | 0.524 | 0.072 | 84.7 | | 5 | 0.724 | 0.123 | 85.8 | | 6 | 0.886 | 0.123 | 94.3 | ## In these collections - [Black and gold gradients](https://grabient.com/black-and-gold-gradients) - [Yellow gradients](https://grabient.com/yellow-gradients) ## Other forms - [JSON](https://grabient.com/kYHA22HoXAi8DrDCmj7XCzAHCswO.json?steps=32) - [PNG](https://grabient.com/kYHA22HoXAi8DrDCmj7XCzAHCswO.png?steps=32) - [SVG](https://grabient.com/kYHA22HoXAi8DrDCmj7XCzAHCswO.svg?steps=32) - [CSS](https://grabient.com/kYHA22HoXAi8DrDCmj7XCzAHCswO.css?steps=32) - [ASE](https://grabient.com/kYHA22HoXAi8DrDCmj7XCzAHCswO.ase?steps=32) - [GPL](https://grabient.com/kYHA22HoXAi8DrDCmj7XCzAHCswO.gpl?steps=32) - [GRD](https://grabient.com/kYHA22HoXAi8DrDCmj7XCzAHCswO.grd?steps=32) - [Design tokens](https://grabient.com/kYHA22HoXAi8DrDCmj7XCzAHCswO.tokens.json?steps=32) - [Social card](https://grabient.com/api/og?seed=kYHA22HoXAi8DrDCmj7XCzAHCswO&steps=32) - [Palettes like this one](https://grabient.com/palettes?q=kYHA22HoXAi8DrDCmj7XCzAHCswO) - [Guide for agents](https://grabient.com/llms.txt)