# Diner Window in the Rain

Navy to tan linear gradient with 32 colors: #1b2630, #1c2933, #1e2c37, #20313c, #223542, #253a48, #28404e, #2c4554, #314a5a, #374e60, #3e5365, #46586a, #4e5d70, #566375, #5e687b, #676d82, #70718a, #7c7592, #8a7797, #9b7999, #ad7b97, #bd7e90, #ca8387, #d48a7f, #dc937b, #e19e7b, #e6aa80, #eab687, #eec190, #f1cb99, #f4d3a2, #f6d9a8. Edit it and copy or download CSS, SVG, PNG or shader code.

- Also called: Navy to tan linear gradient
- Seed: `kWQxKtsY8_MWNRLaok18hpFo`
- Page: https://grabient.com/kWQxKtsY8_MWNRLaok18hpFo?steps=32&angle=225
- Drawn as: linear gradient, 32 steps, 225 degrees
- Kinds: dark to light, muted, multicolor
- Hues: triadic
- Contrast of its darkest and lightest colors: 11.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 | `#1b2630` | `oklch(26.38% 0.0248 243.98)` | Abyssal Anchorfish Blue | white, 15.3 to 1 |
| 2 | `#1c2933` | `oklch(27.36% 0.0263 243.14)` | Oceanic Noir | white, 14.8 to 1 |
| 3 | `#1e2c37` | `oklch(28.66% 0.0284 241.65)` | Oceanic Noir | white, 14.2 to 1 |
| 4 | `#20313c` | `oklch(30.19% 0.0310 239.86)` | Elderberry Black | white, 13.4 to 1 |
| 5 | `#223542` | `oklch(31.92% 0.0338 238.10)` | Into the Night | white, 12.6 to 1 |
| 6 | `#253a48` | `oklch(33.76% 0.0364 236.72)` | Adept | white, 11.7 to 1 |
| 7 | `#28404e` | `oklch(35.67% 0.0388 236.05)` | Depths of the Nile | white, 10.9 to 1 |
| 8 | `#2c4554` | `oklch(37.58% 0.0405 236.45)` | Blue Wing Teal | white, 10.1 to 1 |
| 9 | `#314a5a` | `oklch(39.44% 0.0415 238.20)` | Dilly Blue | white, 9.3 to 1 |
| 10 | `#374e60` | `oklch(41.33% 0.0410 240.68)` | Blue Hue | white, 8.6 to 1 |
| 11 | `#3e5365` | `oklch(43.29% 0.0395 243.69)` | Twilight Chimes | white, 7.9 to 1 |
| 12 | `#46586a` | `oklch(45.32% 0.0373 247.42)` | Rainmaker | white, 7.3 to 1 |
| 13 | `#4e5d70` | `oklch(47.38% 0.0352 252.04)` | Vintage Indigo | white, 6.6 to 1 |
| 14 | `#566375` | `oklch(49.48% 0.0337 257.73)` | Midnight Shadow | white, 6.1 to 1 |
| 15 | `#5e687b` | `oklch(51.58% 0.0332 264.67)` | Folkstone Grey | white, 5.6 to 1 |
| 16 | `#676d82` | `oklch(53.68% 0.0344 273.03)` | Nostalgic | white, 5.1 to 1 |
| 17 | `#70718a` | `oklch(55.77% 0.0379 283.20)` | Stormy Mauve | white, 4.7 to 1 |
| 18 | `#7c7592` | `oklch(57.85% 0.0442 296.22)` | Kinlock | black, 4.8 to 1 |
| 19 | `#8a7797` | `oklch(59.93% 0.0526 311.45)` | Black Diamond Apple | black, 5.1 to 1 |
| 20 | `#9b7999` | `oklch(62.03% 0.0621 327.98)` | Screen Gem | black, 5.6 to 1 |
| 21 | `#ad7b97` | `oklch(64.15% 0.0718 344.92)` | Wonder Wish | black, 6 to 1 |
| 22 | `#bd7e90` | `oklch(66.29% 0.0808 1.37)` | Polignac | black, 6.5 to 1 |
| 23 | `#ca8387` | `oklch(68.47% 0.0882 16.43)` | Fake Crush | black, 7.1 to 1 |
| 24 | `#d48a7f` | `oklch(70.70% 0.0930 29.20)` | My Pink | black, 7.7 to 1 |
| 25 | `#dc937b` | `oklch(73.05% 0.0946 39.43)` | Buffed Copper | black, 8.5 to 1 |
| 26 | `#e19e7b` | `oklch(75.67% 0.0937 48.30)` | Pecan Veneer | black, 9.3 to 1 |
| 27 | `#e6aa80` | `oklch(78.43% 0.0909 55.99)` | Melting Sunset | black, 10.4 to 1 |
| 28 | `#eab687` | `oklch(81.20% 0.0869 62.61)` | Tanaris Beige | black, 11.5 to 1 |
| 29 | `#eec190` | `oklch(83.86% 0.0823 68.27)` | Harvester | black, 12.6 to 1 |
| 30 | `#f1cb99` | `oklch(86.25% 0.0778 73.07)` | Ambitious Amber | black, 13.7 to 1 |
| 31 | `#f4d3a2` | `oklch(88.27% 0.0740 77.12)` | Antique Wicker Basket | black, 14.6 to 1 |
| 32 | `#f6d9a8` | `oklch(89.76% 0.0717 80.54)` | Midsummer | black, 15.4 to 1 |

## CSS

```css
background: linear-gradient(225deg, #1b2630 0.0%, #1c2933 3.2%, #1e2c37 6.5%, #20313c 9.7%, #223542 12.9%, #253a48 16.1%, #28404e 19.4%, #2c4554 22.6%, #314a5a 25.8%, #374e60 29.0%, #3e5365 32.3%, #46586a 35.5%, #4e5d70 38.7%, #566375 41.9%, #5e687b 45.2%, #676d82 48.4%, #70718a 51.6%, #7c7592 54.8%, #8a7797 58.1%, #9b7999 61.3%, #ad7b97 64.5%, #bd7e90 67.7%, #ca8387 71.0%, #d48a7f 74.2%, #dc937b 77.4%, #e19e7b 80.6%, #e6aa80 83.9%, #eab687 87.1%, #eec190 90.3%, #f1cb99 93.5%, #f4d3a2 96.8%, #f6d9a8 100.0%);
background: linear-gradient(225deg in oklch, oklch(26.38% 0.0248 243.98) 0.0%, oklch(27.36% 0.0263 243.14) 3.2%, oklch(28.66% 0.0284 241.65) 6.5%, oklch(30.19% 0.0310 239.86) 9.7%, oklch(31.92% 0.0338 238.10) 12.9%, oklch(33.76% 0.0364 236.72) 16.1%, oklch(35.67% 0.0388 236.05) 19.4%, oklch(37.58% 0.0405 236.45) 22.6%, oklch(39.44% 0.0415 238.20) 25.8%, oklch(41.33% 0.0410 240.68) 29.0%, oklch(43.29% 0.0395 243.69) 32.3%, oklch(45.32% 0.0373 247.42) 35.5%, oklch(47.38% 0.0352 252.04) 38.7%, oklch(49.48% 0.0337 257.73) 41.9%, oklch(51.58% 0.0332 264.67) 45.2%, oklch(53.68% 0.0344 273.03) 48.4%, oklch(55.77% 0.0379 283.20) 51.6%, oklch(57.85% 0.0442 296.22) 54.8%, oklch(59.93% 0.0526 311.45) 58.1%, oklch(62.03% 0.0621 327.98) 61.3%, oklch(64.15% 0.0718 344.92) 64.5%, oklch(66.29% 0.0808 1.37) 67.7%, oklch(68.47% 0.0882 16.43) 71.0%, oklch(70.70% 0.0930 29.20) 74.2%, oklch(73.05% 0.0946 39.43) 77.4%, oklch(75.67% 0.0937 48.30) 80.6%, oklch(78.43% 0.0909 55.99) 83.9%, oklch(81.20% 0.0869 62.61) 87.1%, oklch(83.86% 0.0823 68.27) 90.3%, oklch(86.25% 0.0778 73.07) 93.5%, oklch(88.27% 0.0740 77.12) 96.8%, oklch(89.76% 0.0717 80.54) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.264 | 0.025 | 244 |
| 2 | 0.39 | 0.041 | 237.6 |
| 3 | 0.547 | 0.036 | 277.8 |
| 4 | 0.713 | 0.094 | 391.9 |
| 5 | 0.898 | 0.072 | 440.5 |

## In these collections

- [Liminal Places](https://grabient.com/liminal-places)

## Other forms

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