# Blue Christmas gradient

Monochrome navy to light blue linear gradient with 32 colors: #143c62, #164066, #18446b, #1b4a71, #1d5078, #21567f, #245d86, #29648d, #2e6b93, #337298, #3a799e, #4180a3, #4988a9, #5290ae, #5b97b3, #639eb8, #6ca6bc, #75adc1, #7fb4c6, #89bbcb, #93c2cf, #9cc9d4, #a6cfd8, #afd4dc, #b7d9df, #c0dee3, #c8e2e6, #d0e6e8, #d7e9eb, #ddeced, #e3eeef, #e7f0f1. Edit it and copy or download CSS, SVG, PNG or shader code.

- Also called: Monochrome navy to light blue linear gradient
- Seed: `kWWTqyP6C-1aZvjsDr4-IO-w`
- Page: https://grabient.com/kWWTqyP6C-1aZvjsDr4-IO-w?steps=32&angle=180
- Drawn as: linear gradient, 32 steps, 180 degrees
- Kinds: dark to light, cool, monochrome
- Hues: analogous
- Contrast of its darkest and lightest colors: 9.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 | `#143c62` | `oklch(35.04% 0.0799 250.31)` | Poseidon | white, 11.2 to 1 |
| 2 | `#164066` | `oklch(36.21% 0.0809 249.59)` | Blue Opal | white, 10.7 to 1 |
| 3 | `#18446b` | `oklch(37.76% 0.0824 248.66)` | Lucidity | white, 10 to 1 |
| 4 | `#1b4a71` | `oklch(39.60% 0.0843 247.57)` | Hopi Blue Corn | white, 9.3 to 1 |
| 5 | `#1d5078` | `oklch(41.65% 0.0862 246.32)` | Silk Jewel | white, 8.5 to 1 |
| 6 | `#21567f` | `oklch(43.85% 0.0879 244.95)` | Blueberry Twist | white, 7.7 to 1 |
| 7 | `#245d86` | `oklch(46.11% 0.0892 243.49)` | Oceanic Motion | white, 7 to 1 |
| 8 | `#29648d` | `oklch(48.36% 0.0897 241.97)` | Traditional Blue | white, 6.3 to 1 |
| 9 | `#2e6b93` | `oklch(50.54% 0.0894 240.40)` | Blue Oasis | white, 5.7 to 1 |
| 10 | `#337298` | `oklch(52.76% 0.0882 238.72)` | Windsurfing | white, 5.2 to 1 |
| 11 | `#3a799e` | `oklch(55.06% 0.0864 236.89)` | Peninsula | white, 4.7 to 1 |
| 12 | `#4180a3` | `oklch(57.43% 0.0841 234.97)` | Lake Henry | black, 4.8 to 1 |
| 13 | `#4988a9` | `oklch(59.84% 0.0814 232.98)` | Underwater Moonlight | black, 5.3 to 1 |
| 14 | `#5290ae` | `oklch(62.24% 0.0783 230.97)` | Jet Ski | black, 5.9 to 1 |
| 15 | `#5b97b3` | `oklch(64.63% 0.0751 228.95)` | Pass Time Blue | black, 6.5 to 1 |
| 16 | `#639eb8` | `oklch(66.97% 0.0719 226.97)` | Lake Lucerne | black, 7.1 to 1 |
| 17 | `#6ca6bc` | `oklch(69.25% 0.0686 225.04)` | Blue Chiffon | black, 7.7 to 1 |
| 18 | `#75adc1` | `oklch(71.57% 0.0651 223.06)` | Blue Eye Samurai | black, 8.4 to 1 |
| 19 | `#7fb4c6` | `oklch(73.91% 0.0613 221.05)` | Tennis Blue | black, 9.2 to 1 |
| 20 | `#89bbcb` | `oklch(76.23% 0.0573 219.03)` | Blue Echo | black, 10 to 1 |
| 21 | `#93c2cf` | `oklch(78.50% 0.0532 217.04)` | Blue Chalk | black, 10.8 to 1 |
| 22 | `#9cc9d4` | `oklch(80.68% 0.0491 215.12)` | Soothing Blue | black, 11.6 to 1 |
| 23 | `#a6cfd8` | `oklch(82.72% 0.0450 213.30)` | Cay | black, 12.5 to 1 |
| 24 | `#afd4dc` | `oklch(84.60% 0.0409 211.61)` | Balboa | black, 13.2 to 1 |
| 25 | `#b7d9df` | `oklch(86.31% 0.0369 210.04)` | Tear | black, 14 to 1 |
| 26 | `#c0dee3` | `oklch(87.94% 0.0325 208.52)` | Ice Shard Soft Blue | black, 14.7 to 1 |
| 27 | `#c8e2e6` | `oklch(89.45% 0.0280 207.06)` | Aviary Blue | black, 15.4 to 1 |
| 28 | `#d0e6e8` | `oklch(90.85% 0.0235 205.70)` | Blue Phlox | black, 16.1 to 1 |
| 29 | `#d7e9eb` | `oklch(92.11% 0.0192 204.45)` | Boiling Point | black, 16.7 to 1 |
| 30 | `#ddeced` | `oklch(93.22% 0.0153 203.35)` | Winter’s Breath | black, 17.2 to 1 |
| 31 | `#e3eeef` | `oklch(94.14% 0.0121 202.43)` | Faraway Blue | black, 17.7 to 1 |
| 32 | `#e7f0f1` | `oklch(94.88% 0.0096 201.70)` | Ethereal White | black, 18.1 to 1 |

## CSS

```css
background: linear-gradient(180deg, #143c62 0.0%, #164066 3.2%, #18446b 6.5%, #1b4a71 9.7%, #1d5078 12.9%, #21567f 16.1%, #245d86 19.4%, #29648d 22.6%, #2e6b93 25.8%, #337298 29.0%, #3a799e 32.3%, #4180a3 35.5%, #4988a9 38.7%, #5290ae 41.9%, #5b97b3 45.2%, #639eb8 48.4%, #6ca6bc 51.6%, #75adc1 54.8%, #7fb4c6 58.1%, #89bbcb 61.3%, #93c2cf 64.5%, #9cc9d4 67.7%, #a6cfd8 71.0%, #afd4dc 74.2%, #b7d9df 77.4%, #c0dee3 80.6%, #c8e2e6 83.9%, #d0e6e8 87.1%, #d7e9eb 90.3%, #ddeced 93.5%, #e3eeef 96.8%, #e7f0f1 100.0%);
background: linear-gradient(180deg in oklch, oklch(35.04% 0.0799 250.31) 0.0%, oklch(36.21% 0.0809 249.59) 3.2%, oklch(37.76% 0.0824 248.66) 6.5%, oklch(39.60% 0.0843 247.57) 9.7%, oklch(41.65% 0.0862 246.32) 12.9%, oklch(43.85% 0.0879 244.95) 16.1%, oklch(46.11% 0.0892 243.49) 19.4%, oklch(48.36% 0.0897 241.97) 22.6%, oklch(50.54% 0.0894 240.40) 25.8%, oklch(52.76% 0.0882 238.72) 29.0%, oklch(55.06% 0.0864 236.89) 32.3%, oklch(57.43% 0.0841 234.97) 35.5%, oklch(59.84% 0.0814 232.98) 38.7%, oklch(62.24% 0.0783 230.97) 41.9%, oklch(64.63% 0.0751 228.95) 45.2%, oklch(66.97% 0.0719 226.97) 48.4%, oklch(69.25% 0.0686 225.04) 51.6%, oklch(71.57% 0.0651 223.06) 54.8%, oklch(73.91% 0.0613 221.05) 58.1%, oklch(76.23% 0.0573 219.03) 61.3%, oklch(78.50% 0.0532 217.04) 64.5%, oklch(80.68% 0.0491 215.12) 67.7%, oklch(82.72% 0.0450 213.30) 71.0%, oklch(84.60% 0.0409 211.61) 74.2%, oklch(86.31% 0.0369 210.04) 77.4%, oklch(87.94% 0.0325 208.52) 80.6%, oklch(89.45% 0.0280 207.06) 83.9%, oklch(90.85% 0.0235 205.70) 87.1%, oklch(92.11% 0.0192 204.45) 90.3%, oklch(93.22% 0.0153 203.35) 93.5%, oklch(94.14% 0.0121 202.43) 96.8%, oklch(94.88% 0.0096 201.70) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.35 | 0.08 | 250.3 |
| 2 | 0.5 | 0.09 | 240.8 |
| 3 | 0.681 | 0.07 | 226 |
| 4 | 0.85 | 0.04 | 211.2 |
| 5 | 0.949 | 0.01 | 201.7 |

## In these collections

- [Vintage Christmas color palette](https://grabient.com/vintage-christmas-color-palette)

## Other forms

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