# Champagne, cobalt blue and near-black weather map

The Champagne, cobalt blue and near-black weather map brings together off-white, pale teal, blue, dark blue, and dark gray. The colors span a very broad lightness range, combining moderate color with high contrast. Its balanced and composed character suits information graphics and map mood boards. Its darkest tone is dark gray, and its lightest tone is off-white.

- Also called: Monochrome white, blue and black linear gradient
- Seed: `kW8Q1Cd4nLL2wyCmHUCFIfAI`
- Page: https://grabient.com/kW8Q1Cd4nLL2wyCmHUCFIfAI?steps=32&angle=135
- Drawn as: linear gradient, 32 steps, 135 degrees
- Kinds: light to dark, muted, cool
- Hues: analogous
- Contrast of its darkest and lightest colors: 18.2 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 | `#f2eee1` | `oklch(94.88% 0.0179 92.81)` | Whipped White | black, 18 to 1 |
| 2 | `#f1f0e2` | `oklch(95.14% 0.0179 100.61)` | Coconut Butter | black, 18.2 to 1 |
| 3 | `#f1f3e6` | `oklch(95.84% 0.0170 111.23)` | Cumulus | black, 18.6 to 1 |
| 4 | `#f2f6eb` | `oklch(96.70% 0.0160 123.88)` | Applemint Soda | black, 19.1 to 1 |
| 5 | `#f2f9ef` | `oklch(97.42% 0.0153 137.79)` | Unwind | black, 19.5 to 1 |
| 6 | `#f0fbf2` | `oklch(97.72% 0.0156 152.18)` | Peaceful Rain | black, 19.7 to 1 |
| 7 | `#ecfaf3` | `oklch(97.33% 0.0174 166.28)` | Placebo Turquoise | black, 19.5 to 1 |
| 8 | `#e3f7f2` | `oklch(95.95% 0.0214 179.31)` | Frosty Mint | black, 18.8 to 1 |
| 9 | `#d4efed` | `oklch(93.29% 0.0282 190.59)` | Icy Wind | black, 17.4 to 1 |
| 10 | `#bde3e6` | `oklch(88.98% 0.0396 201.31)` | Icy Water | black, 15.3 to 1 |
| 11 | `#9fd2dd` | `oklch(83.30% 0.0550 211.95)` | Ocean Cruise | black, 12.7 to 1 |
| 12 | `#7fbed5` | `oklch(76.73% 0.0725 222.25)` | Ocean Horizon | black, 10.2 to 1 |
| 13 | `#5fa8cc` | `oklch(69.72% 0.0905 231.96)` | Ethereal Blue | black, 7.9 to 1 |
| 14 | `#4490c3` | `oklch(62.73% 0.1074 240.83)` | Azure Blue | black, 6 to 1 |
| 15 | `#3279b9` | `oklch(56.23% 0.1215 248.61)` | Haddock’s Sweater | white, 4.5 to 1 |
| 16 | `#2965ae` | `oklch(50.69% 0.1311 255.04)` | Shukra Blue | white, 5.8 to 1 |
| 17 | `#2756a3` | `oklch(46.46% 0.1348 259.83)` | Cyan Cobalt Blue | white, 7.1 to 1 |
| 18 | `#264b98` | `oklch(43.06% 0.1335 262.79)` | Le Grand Bleu | white, 8.2 to 1 |
| 19 | `#24438d` | `oklch(40.28% 0.1285 264.25)` | Blue Oblivion | white, 9.3 to 1 |
| 20 | `#213d81` | `oklch(37.96% 0.1206 264.61)` | Mazarine Blue | white, 10.2 to 1 |
| 21 | `#1e3876` | `oklch(35.96% 0.1111 264.25)` | Twilight Express | white, 11 to 1 |
| 22 | `#1c356c` | `oklch(34.14% 0.1007 263.58)` | Passionate Blue | white, 11.8 to 1 |
| 23 | `#1a3161` | `oklch(32.34% 0.0907 262.98)` | Ending Navy Blue | white, 12.6 to 1 |
| 24 | `#182d58` | `oklch(30.43% 0.0818 262.86)` | Ultramarine Violet | white, 13.5 to 1 |
| 25 | `#16284e` | `oklch(28.34% 0.0742 263.29)` | Rurikon Blue | white, 14.5 to 1 |
| 26 | `#132344` | `oklch(26.22% 0.0657 263.68)` | Dark Eclipse | white, 15.5 to 1 |
| 27 | `#111e3a` | `oklch(24.12% 0.0569 264.02)` | Nightwalker | white, 16.4 to 1 |
| 28 | `#0f1a31` | `oklch(22.12% 0.0480 264.30)` | Dark Knight | white, 17.3 to 1 |
| 29 | `#0d1629` | `oklch(20.26% 0.0396 264.54)` | Liberty Blue | white, 18 to 1 |
| 30 | `#0c1221` | `oklch(18.60% 0.0319 264.75)` | Corbeau | white, 18.6 to 1 |
| 31 | `#0a101b` | `oklch(17.21% 0.0255 264.92)` | Nyctophobia | white, 19 to 1 |
| 32 | `#090d17` | `oklch(16.14% 0.0207 265.06)` | Midnight Oil | white, 19.3 to 1 |

## CSS

```css
background: linear-gradient(135deg, #f2eee1 0.0%, #f1f0e2 3.2%, #f1f3e6 6.5%, #f2f6eb 9.7%, #f2f9ef 12.9%, #f0fbf2 16.1%, #ecfaf3 19.4%, #e3f7f2 22.6%, #d4efed 25.8%, #bde3e6 29.0%, #9fd2dd 32.3%, #7fbed5 35.5%, #5fa8cc 38.7%, #4490c3 41.9%, #3279b9 45.2%, #2965ae 48.4%, #2756a3 51.6%, #264b98 54.8%, #24438d 58.1%, #213d81 61.3%, #1e3876 64.5%, #1c356c 67.7%, #1a3161 71.0%, #182d58 74.2%, #16284e 77.4%, #132344 80.6%, #111e3a 83.9%, #0f1a31 87.1%, #0d1629 90.3%, #0c1221 93.5%, #0a101b 96.8%, #090d17 100.0%);
background: linear-gradient(135deg in oklch, oklch(94.88% 0.0179 92.81) 0.0%, oklch(95.14% 0.0179 100.61) 3.2%, oklch(95.84% 0.0170 111.23) 6.5%, oklch(96.70% 0.0160 123.88) 9.7%, oklch(97.42% 0.0153 137.79) 12.9%, oklch(97.72% 0.0156 152.18) 16.1%, oklch(97.33% 0.0174 166.28) 19.4%, oklch(95.95% 0.0214 179.31) 22.6%, oklch(93.29% 0.0282 190.59) 25.8%, oklch(88.98% 0.0396 201.31) 29.0%, oklch(83.30% 0.0550 211.95) 32.3%, oklch(76.73% 0.0725 222.25) 35.5%, oklch(69.72% 0.0905 231.96) 38.7%, oklch(62.73% 0.1074 240.83) 41.9%, oklch(56.23% 0.1215 248.61) 45.2%, oklch(50.69% 0.1311 255.04) 48.4%, oklch(46.46% 0.1348 259.83) 51.6%, oklch(43.06% 0.1335 262.79) 54.8%, oklch(40.28% 0.1285 264.25) 58.1%, oklch(37.96% 0.1206 264.61) 61.3%, oklch(35.96% 0.1111 264.25) 64.5%, oklch(34.14% 0.1007 263.58) 67.7%, oklch(32.34% 0.0907 262.98) 71.0%, oklch(30.43% 0.0818 262.86) 74.2%, oklch(28.34% 0.0742 263.29) 77.4%, oklch(26.22% 0.0657 263.68) 80.6%, oklch(24.12% 0.0569 264.02) 83.9%, oklch(22.12% 0.0480 264.30) 87.1%, oklch(20.26% 0.0396 264.54) 90.3%, oklch(18.60% 0.0319 264.75) 93.5%, oklch(17.21% 0.0255 264.92) 96.8%, oklch(16.14% 0.0207 265.06) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.949 | 0.018 | 92.8 |
| 2 | 0.941 | 0.026 | 187.9 |
| 3 | 0.484 | 0.134 | 257.7 |
| 4 | 0.299 | 0.08 | 262.9 |
| 5 | 0.161 | 0.021 | 265.1 |

## In these collections

- [Weather map gradients](https://grabient.com/weather-map-gradients)

## Other forms

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