# Blue and stone winter palette

The Blue and stone winter palette brings together blue, light blue, pale orange, and light gray. The colors span a broad lightness range, combining restrained color with clear contrast. Its balanced and composed character suits holiday stationery and seasonal displays. Its darkest tone is blue, and its lightest tone is pale orange.

- Also called: Complementary navy, beige and gray angular gradient
- Seed: `kYWS-6SBg-maJvlzj65bITQM2TQ8`
- Page: https://grabient.com/kYWS-6SBg-maJvlzj65bITQM2TQ8?style=angularGradient&steps=32&angle=225
- Drawn as: angular gradient, 32 steps, 225 degrees
- Kinds: light center, pastel, cool
- Hues: complementary
- Contrast of its darkest and lightest colors: 8.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 | `#273a5c` | `oklch(35.04% 0.0648 261.56)` | Midnight Sleigh | white, 11.3 to 1 |
| 2 | `#2c4063` | `oklch(37.28% 0.0654 260.37)` | Elmer’s Echo | white, 10.3 to 1 |
| 3 | `#32496c` | `oklch(40.34% 0.0666 258.75)` | Midnight Interlude | white, 9.1 to 1 |
| 4 | `#3a5478` | `oklch(43.98% 0.0678 256.81)` | Aerostatics | white, 7.7 to 1 |
| 5 | `#425f84` | `oklch(47.96% 0.0686 254.69)` | Functional Blue | white, 6.5 to 1 |
| 6 | `#4c6b90` | `oklch(52.03% 0.0685 252.50)` | Wickford Bay | white, 5.4 to 1 |
| 7 | `#56779a` | `oklch(55.95% 0.0667 250.35)` | Quiet Harbour | white, 4.6 to 1 |
| 8 | `#6283a4` | `oklch(59.78% 0.0626 249.25)` | Blue Boater | black, 5.3 to 1 |
| 9 | `#728fad` | `oklch(63.90% 0.0559 250.15)` | Distant Sky | black, 6.2 to 1 |
| 10 | `#849bb6` | `oklch(68.15% 0.0477 251.44)` | Office Blue | black, 7.3 to 1 |
| 11 | `#94a8be` | `oklch(72.31% 0.0394 251.45)` | Paris | black, 8.5 to 1 |
| 12 | `#a2b4c6` | `oklch(76.17% 0.0322 248.50)` | Posey Blue | black, 9.8 to 1 |
| 13 | `#adbfcd` | `oklch(79.54% 0.0272 240.91)` | Cerulean Tint | black, 11.1 to 1 |
| 14 | `#b4c9d2` | `oklch(82.31% 0.0257 225.91)` | English Hollyhock | black, 12.2 to 1 |
| 15 | `#b9d3d4` | `oklch(84.72% 0.0276 200.28)` | Relax | black, 13.2 to 1 |
| 16 | `#c0dbd0` | `oklch(86.78% 0.0315 168.66)` | Silverton | black, 14.2 to 1 |
| 17 | `#cedfc8` | `oklch(88.47% 0.0362 136.34)` | Supreme Green | black, 15 to 1 |
| 18 | `#dfe0c1` | `oklch(89.76% 0.0404 108.65)` | Lilylock | black, 15.5 to 1 |
| 19 | `#ebe0c1` | `oklch(90.63% 0.0427 90.89)` | Shell Haven | black, 15.9 to 1 |
| 20 | `#ede1c3` | `oklch(91.07% 0.0419 88.18)` | Sailcloth | black, 16.1 to 1 |
| 21 | `#e7e3c7` | `oklch(91.14% 0.0377 100.90)` | White Cliffs | black, 16.2 to 1 |
| 22 | `#dce5ce` | `oklch(90.82% 0.0312 124.36)` | Misty Hillside | black, 16.1 to 1 |
| 23 | `#d3e3d7` | `oklch(90.09% 0.0239 153.62)` | Light Dry Lichen | black, 15.7 to 1 |
| 24 | `#cededb` | `oklch(88.89% 0.0175 183.78)` | Jade Dust | black, 15.1 to 1 |
| 25 | `#cbd7da` | `oklch(87.18% 0.0132 209.89)` | Clear to See | black, 14.3 to 1 |
| 26 | `#c5cfd4` | `oklch(84.92% 0.0126 227.23)` | Catalyst Grey | black, 13.2 to 1 |
| 27 | `#b9c4cc` | `oklch(81.53% 0.0163 238.00)` | Yorkshire Cloud | black, 11.8 to 1 |
| 28 | `#a9b7c3` | `oklch(77.18% 0.0230 245.26)` | Calming Space | black, 10.2 to 1 |
| 29 | `#97a8b9` | `oklch(72.40% 0.0314 249.92)` | Cool Customer | black, 8.6 to 1 |
| 30 | `#879ab0` | `oklch(67.76% 0.0400 252.88)` | Tsunami | black, 7.2 to 1 |
| 31 | `#788da8` | `oklch(63.78% 0.0474 255.05)` | Gladeye | black, 6.2 to 1 |
| 32 | `#7085a3` | `oklch(61.02% 0.0524 257.34)` | Berwick Berry | black, 5.5 to 1 |

## CSS

```css
background: conic-gradient(from 225deg, #273a5c 0.0%, #2c4063 3.2%, #32496c 6.5%, #3a5478 9.7%, #425f84 12.9%, #4c6b90 16.1%, #56779a 19.4%, #6283a4 22.6%, #728fad 25.8%, #849bb6 29.0%, #94a8be 32.3%, #a2b4c6 35.5%, #adbfcd 38.7%, #b4c9d2 41.9%, #b9d3d4 45.2%, #c0dbd0 48.4%, #cedfc8 51.6%, #dfe0c1 54.8%, #ebe0c1 58.1%, #ede1c3 61.3%, #e7e3c7 64.5%, #dce5ce 67.7%, #d3e3d7 71.0%, #cededb 74.2%, #cbd7da 77.4%, #c5cfd4 80.6%, #b9c4cc 83.9%, #a9b7c3 87.1%, #97a8b9 90.3%, #879ab0 93.5%, #788da8 96.8%, #7085a3 100.0%);
background: conic-gradient(from 225deg in oklch, oklch(35.04% 0.0648 261.56) 0.0%, oklch(37.28% 0.0654 260.37) 3.2%, oklch(40.34% 0.0666 258.75) 6.5%, oklch(43.98% 0.0678 256.81) 9.7%, oklch(47.96% 0.0686 254.69) 12.9%, oklch(52.03% 0.0685 252.50) 16.1%, oklch(55.95% 0.0667 250.35) 19.4%, oklch(59.78% 0.0626 249.25) 22.6%, oklch(63.90% 0.0559 250.15) 25.8%, oklch(68.15% 0.0477 251.44) 29.0%, oklch(72.31% 0.0394 251.45) 32.3%, oklch(76.17% 0.0322 248.50) 35.5%, oklch(79.54% 0.0272 240.91) 38.7%, oklch(82.31% 0.0257 225.91) 41.9%, oklch(84.72% 0.0276 200.28) 45.2%, oklch(86.78% 0.0315 168.66) 48.4%, oklch(88.47% 0.0362 136.34) 51.6%, oklch(89.76% 0.0404 108.65) 54.8%, oklch(90.63% 0.0427 90.89) 58.1%, oklch(91.07% 0.0419 88.18) 61.3%, oklch(91.14% 0.0377 100.90) 64.5%, oklch(90.82% 0.0312 124.36) 67.7%, oklch(90.09% 0.0239 153.62) 71.0%, oklch(88.89% 0.0175 183.78) 74.2%, oklch(87.18% 0.0132 209.89) 77.4%, oklch(84.92% 0.0126 227.23) 80.6%, oklch(81.53% 0.0163 238.00) 83.9%, oklch(77.18% 0.0230 245.26) 87.1%, oklch(72.40% 0.0314 249.92) 90.3%, oklch(67.76% 0.0400 252.88) 93.5%, oklch(63.78% 0.0474 255.05) 96.8%, oklch(61.02% 0.0524 257.34) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.35 | 0.065 | 261.6 |
| 2 | 0.567 | 0.066 | 249.9 |
| 3 | 0.807 | 0.026 | 236.2 |
| 4 | 0.909 | 0.043 | 87.2 |
| 5 | 0.854 | 0.012 | 224.6 |
| 6 | 0.61 | 0.052 | 257.3 |

## In these collections

- [Winter](https://grabient.com/winter)

## Other forms

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