# Near-black, cobalt blue and moss heatmap palette The Near-black, cobalt blue and moss heatmap palette brings together dark gray, purple, blue, teal, and green. The colors span a broad lightness range, combining moderate color with clear contrast. Its balanced and composed character suits information graphics and map mood boards. Its darkest tone is dark gray, and its lightest tone is green. - Also called: Black, blue, teal and green linear gradient - Seed: `kWKQ-9J5rDr2wuy9m7k4DI2w` - Page: https://grabient.com/kWKQ-9J5rDr2wuy9m7k4DI2w?steps=32 - Drawn as: linear gradient, 32 steps, 90 degrees - Kinds: dark to light, cool - Hues: wide - Contrast of its darkest and lightest colors: 9.1 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 | `#090d17` | `oklch(16.14% 0.0207 265.78)` | Midnight Oil | white, 19.3 to 1 | | 2 | `#0c101b` | `oklch(17.32% 0.0248 268.84)` | Nyctophobia | white, 19 to 1 | | 3 | `#0f1221` | `oklch(18.88% 0.0303 273.49)` | Corbeau | white, 18.5 to 1 | | 4 | `#141628` | `oklch(20.74% 0.0368 279.05)` | Sambucus | white, 17.8 to 1 | | 5 | `#1a1930` | `oklch(22.81% 0.0440 284.86)` | Dark Knight | white, 17.1 to 1 | | 6 | `#221d38` | `oklch(25.01% 0.0517 290.25)` | Throat | white, 16.1 to 1 | | 7 | `#292041` | `oklch(27.27% 0.0596 294.56)` | Throat | white, 15.1 to 1 | | 8 | `#30244a` | `oklch(29.50% 0.0674 297.12)` | Elderberry | white, 14.1 to 1 | | 9 | `#362853` | `oklch(31.63% 0.0749 297.28)` | Parachute Purple | white, 13.1 to 1 | | 10 | `#3c2d5e` | `oklch(33.95% 0.0836 295.27)` | Jakarta Skyline | white, 12.1 to 1 | | 11 | `#40336b` | `oklch(36.48% 0.0936 291.58)` | Minsk | white, 11 to 1 | | 12 | `#423a79` | `oklch(39.08% 0.1039 286.59)` | Sage Violet | white, 9.9 to 1 | | 13 | `#424288` | `oklch(41.65% 0.1139 280.63)` | Spectrum Blue | white, 8.8 to 1 | | 14 | `#3f4a95` | `oklch(44.04% 0.1226 274.07)` | Deep Ultramarine | white, 7.9 to 1 | | 15 | `#3852a0` | `oklch(46.13% 0.1293 267.25)` | Dazzling Blue | white, 7.2 to 1 | | 16 | `#2e5aa7` | `oklch(47.79% 0.1331 260.54)` | Miracle at Wrigley | white, 6.7 to 1 | | 17 | `#1f60a9` | `oklch(48.86% 0.1330 254.16)` | Directoire Blue | white, 6.3 to 1 | | 18 | `#0764a5` | `oklch(49.11% 0.1281 247.65)` | Prime Blue | white, 6.2 to 1 | | 19 | `#006699` | `oklch(48.75% 0.1134 240.91)` | Impulse Blue | white, 6.2 to 1 | | 20 | `#00668d` | `oklch(48.09% 0.1004 233.85)` | Pulsating Blue | white, 6.3 to 1 | | 21 | `#006683` | `oklch(47.39% 0.0911 226.50)` | Journey Into Night | white, 6.5 to 1 | | 22 | `#00657b` | `oklch(46.96% 0.0848 218.83)` | Striking | white, 6.6 to 1 | | 23 | `#086774` | `oklch(47.07% 0.0796 210.79)` | Bankson Lake | white, 6.5 to 1 | | 24 | `#156a70` | `oklch(48.02% 0.0759 202.42)` | Deep Lake | white, 6.3 to 1 | | 25 | `#1c7170` | `oklch(50.10% 0.0773 193.26)` | Marine Wonder | white, 5.7 to 1 | | 26 | `#257c71` | `oklch(53.26% 0.0829 182.68)` | Ivy | white, 4.9 to 1 | | 27 | `#328971` | `oklch(57.16% 0.0915 171.24)` | Ionian | black, 4.9 to 1 | | 28 | `#46976f` | `oklch(61.46% 0.1018 159.57)` | Ocean Green | black, 5.9 to 1 | | 29 | `#5da56a` | `oklch(65.80% 0.1128 148.29)` | Endo | black, 7 to 1 | | 30 | `#76b063` | `oklch(69.84% 0.1232 138.04)` | Arugula | black, 8.1 to 1 | | 31 | `#8eb85b` | `oklch(73.22% 0.1320 129.44)` | Fresh Mown | black, 9.1 to 1 | | 32 | `#9fbe54` | `oklch(75.59% 0.1378 123.12)` | Sapling | black, 9.9 to 1 | ## CSS ```css background: linear-gradient(90deg, #090d17 0.0%, #0c101b 3.2%, #0f1221 6.5%, #141628 9.7%, #1a1930 12.9%, #221d38 16.1%, #292041 19.4%, #30244a 22.6%, #362853 25.8%, #3c2d5e 29.0%, #40336b 32.3%, #423a79 35.5%, #424288 38.7%, #3f4a95 41.9%, #3852a0 45.2%, #2e5aa7 48.4%, #1f60a9 51.6%, #0764a5 54.8%, #006699 58.1%, #00668d 61.3%, #006683 64.5%, #00657b 67.7%, #086774 71.0%, #156a70 74.2%, #1c7170 77.4%, #257c71 80.6%, #328971 83.9%, #46976f 87.1%, #5da56a 90.3%, #76b063 93.5%, #8eb85b 96.8%, #9fbe54 100.0%); background: linear-gradient(90deg in oklch, oklch(16.14% 0.0207 265.78) 0.0%, oklch(17.32% 0.0248 268.84) 3.2%, oklch(18.88% 0.0303 273.49) 6.5%, oklch(20.74% 0.0368 279.05) 9.7%, oklch(22.81% 0.0440 284.86) 12.9%, oklch(25.01% 0.0517 290.25) 16.1%, oklch(27.27% 0.0596 294.56) 19.4%, oklch(29.50% 0.0674 297.12) 22.6%, oklch(31.63% 0.0749 297.28) 25.8%, oklch(33.95% 0.0836 295.27) 29.0%, oklch(36.48% 0.0936 291.58) 32.3%, oklch(39.08% 0.1039 286.59) 35.5%, oklch(41.65% 0.1139 280.63) 38.7%, oklch(44.04% 0.1226 274.07) 41.9%, oklch(46.13% 0.1293 267.25) 45.2%, oklch(47.79% 0.1331 260.54) 48.4%, oklch(48.86% 0.1330 254.16) 51.6%, oklch(49.11% 0.1281 247.65) 54.8%, oklch(48.75% 0.1134 240.91) 58.1%, oklch(48.09% 0.1004 233.85) 61.3%, oklch(47.39% 0.0911 226.50) 64.5%, oklch(46.96% 0.0848 218.83) 67.7%, oklch(47.07% 0.0796 210.79) 71.0%, oklch(48.02% 0.0759 202.42) 74.2%, oklch(50.10% 0.0773 193.26) 77.4%, oklch(53.26% 0.0829 182.68) 80.6%, oklch(57.16% 0.0915 171.24) 83.9%, oklch(61.46% 0.1018 159.57) 87.1%, oklch(65.80% 0.1128 148.29) 90.3%, oklch(69.84% 0.1232 138.04) 93.5%, oklch(73.22% 0.1320 129.44) 96.8%, oklch(75.59% 0.1378 123.12) 100.0%); ``` ## Keyframes 5 OKLCH keyframes joined by a Catmull-Rom spline. Hue is unwrapped degrees. | Keyframe | Lightness | Chroma | Hue | | --- | --- | --- | --- | | 1 | 0.161 | 0.021 | 265.8 | | 2 | 0.311 | 0.073 | 297.5 | | 3 | 0.484 | 0.134 | 257.3 | | 4 | 0.484 | 0.076 | 200.3 | | 5 | 0.756 | 0.138 | 123.1 | ## In these collections - [Heatmap gradients](https://grabient.com/heatmap-gradients) ## Other forms - [JSON](https://grabient.com/kWKQ-9J5rDr2wuy9m7k4DI2w.json?steps=32) - [PNG](https://grabient.com/kWKQ-9J5rDr2wuy9m7k4DI2w.png?steps=32) - [SVG](https://grabient.com/kWKQ-9J5rDr2wuy9m7k4DI2w.svg?steps=32) - [CSS](https://grabient.com/kWKQ-9J5rDr2wuy9m7k4DI2w.css?steps=32) - [ASE](https://grabient.com/kWKQ-9J5rDr2wuy9m7k4DI2w.ase?steps=32) - [GPL](https://grabient.com/kWKQ-9J5rDr2wuy9m7k4DI2w.gpl?steps=32) - [GRD](https://grabient.com/kWKQ-9J5rDr2wuy9m7k4DI2w.grd?steps=32) - [Design tokens](https://grabient.com/kWKQ-9J5rDr2wuy9m7k4DI2w.tokens.json?steps=32) - [Social card](https://grabient.com/api/og?seed=kWKQ-9J5rDr2wuy9m7k4DI2w&steps=32) - [Palettes like this one](https://grabient.com/palettes?q=kWKQ-9J5rDr2wuy9m7k4DI2w) - [Guide for agents](https://grabient.com/llms.txt)