# Sapphire crystal and aged gold

Complementary navy, gray and brown linear gradient with 32 colors: #182e3e, #1a3343, #1c384a, #1f3f53, #22475c, #264f66, #2a5870, #2e617a, #346982, #3a718a, #427992, #4a8099, #5288a0, #5b91a7, #6499ad, #6da1b3, #77aab7, #85b4bc, #96bec1, #a8c8c7, #bad1cd, #c8d9d3, #d2ded8, #d6e0d9, #d4dfd4, #ccd8c7, #c4ceb3, #bcc19b, #b7b281, #b5a368, #b39554, #b38b47. Edit it and copy or download CSS, SVG, PNG or shader code.

- Also called: Complementary navy, gray and brown linear gradient
- Seed: `kWSh2qvhk-9gVvnyBbg1CQ3I`
- Page: https://grabient.com/kWSh2qvhk-9gVvnyBbg1CQ3I?steps=32&angle=135
- Drawn as: linear gradient, 32 steps, 135 degrees
- Kinds: light center, cool
- Hues: split-complementary
- Contrast of its darkest and lightest colors: 10.3 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 | `#182e3e` | `oklch(29.13% 0.0400 239.77)` | Tangaroa | white, 13.9 to 1 |
| 2 | `#1a3343` | `oklch(30.70% 0.0426 239.12)` | Blue Whale | white, 13.2 to 1 |
| 3 | `#1c384a` | `oklch(32.80% 0.0463 238.29)` | Subterranean River | white, 12.2 to 1 |
| 4 | `#1f3f53` | `oklch(35.29% 0.0508 237.30)` | Capital Blue | white, 11 to 1 |
| 5 | `#22475c` | `oklch(38.05% 0.0556 236.19)` | One Year of Rain | white, 9.8 to 1 |
| 6 | `#264f66` | `oklch(40.98% 0.0603 234.97)` | Shadow of Night | white, 8.7 to 1 |
| 7 | `#2a5870` | `oklch(43.93% 0.0644 233.67)` | Chathams Blue | white, 7.6 to 1 |
| 8 | `#2e617a` | `oklch(46.80% 0.0675 232.33)` | Berry Blue | white, 6.7 to 1 |
| 9 | `#346982` | `oklch(49.47% 0.0692 230.99)` | Naval Passage | white, 6 to 1 |
| 10 | `#3a718a` | `oklch(52.08% 0.0699 230.08)` | Calypso | white, 5.3 to 1 |
| 11 | `#427992` | `oklch(54.70% 0.0699 229.52)` | Jelly Bean | white, 4.8 to 1 |
| 12 | `#4a8099` | `oklch(57.35% 0.0693 228.99)` | Dirty Blue | black, 4.8 to 1 |
| 13 | `#5288a0` | `oklch(60.00% 0.0681 228.18)` | Raging Tide | black, 5.4 to 1 |
| 14 | `#5b91a7` | `oklch(62.66% 0.0663 226.78)` | Blue Persia | black, 6 to 1 |
| 15 | `#6499ad` | `oklch(65.32% 0.0639 224.47)` | Cloudy Sea | black, 6.6 to 1 |
| 16 | `#6da1b3` | `oklch(67.97% 0.0609 220.95)` | Crystal Blue | black, 7.4 to 1 |
| 17 | `#77aab7` | `oklch(70.70% 0.0571 215.91)` | Snowboard | black, 8.2 to 1 |
| 18 | `#85b4bc` | `oklch(73.92% 0.0509 209.40)` | Lifeboat Blue | black, 9.2 to 1 |
| 19 | `#96bec1` | `oklch(77.45% 0.0431 201.70)` | Bel Esprit | black, 10.4 to 1 |
| 20 | `#a8c8c7` | `oklch(81.00% 0.0345 193.10)` | Zenith Heights | black, 11.7 to 1 |
| 21 | `#bad1cd` | `oklch(84.30% 0.0263 183.88)` | Breath of Green | black, 13.1 to 1 |
| 22 | `#c8d9d3` | `oklch(87.04% 0.0196 174.33)` | Soft Haze | black, 14.3 to 1 |
| 23 | `#d2ded8` | `oklch(88.96% 0.0154 164.74)` | Periwinkle Tint | black, 15.1 to 1 |
| 24 | `#d6e0d9` | `oklch(89.77% 0.0147 155.38)` | Dewy | black, 15.5 to 1 |
| 25 | `#d4dfd4` | `oklch(89.12% 0.0186 145.97)` | Hornet Nest | black, 15.2 to 1 |
| 26 | `#ccd8c7` | `oklch(86.95% 0.0271 135.52)` | April Mist | black, 14.2 to 1 |
| 27 | `#c4ceb3` | `oklch(83.68% 0.0389 124.48)` | Growing Season | black, 12.8 to 1 |
| 28 | `#bcc19b` | `oklch(79.75% 0.0526 113.39)` | Beige and Sage | black, 11.2 to 1 |
| 29 | `#b7b281` | `oklch(75.59% 0.0669 102.78)` | Leek Powder | black, 9.7 to 1 |
| 30 | `#b5a368` | `oklch(71.65% 0.0803 93.18)` | Frickles | black, 8.3 to 1 |
| 31 | `#b39554` | `oklch(68.35% 0.0916 85.13)` | Antique Honey | black, 7.3 to 1 |
| 32 | `#b38b47` | `oklch(66.14% 0.0992 79.14)` | Honey Mustard | black, 6.7 to 1 |

## CSS

```css
background: linear-gradient(135deg, #182e3e 0.0%, #1a3343 3.2%, #1c384a 6.5%, #1f3f53 9.7%, #22475c 12.9%, #264f66 16.1%, #2a5870 19.4%, #2e617a 22.6%, #346982 25.8%, #3a718a 29.0%, #427992 32.3%, #4a8099 35.5%, #5288a0 38.7%, #5b91a7 41.9%, #6499ad 45.2%, #6da1b3 48.4%, #77aab7 51.6%, #85b4bc 54.8%, #96bec1 58.1%, #a8c8c7 61.3%, #bad1cd 64.5%, #c8d9d3 67.7%, #d2ded8 71.0%, #d6e0d9 74.2%, #d4dfd4 77.4%, #ccd8c7 80.6%, #c4ceb3 83.9%, #bcc19b 87.1%, #b7b281 90.3%, #b5a368 93.5%, #b39554 96.8%, #b38b47 100.0%);
background: linear-gradient(135deg in oklch, oklch(29.13% 0.0400 239.77) 0.0%, oklch(30.70% 0.0426 239.12) 3.2%, oklch(32.80% 0.0463 238.29) 6.5%, oklch(35.29% 0.0508 237.30) 9.7%, oklch(38.05% 0.0556 236.19) 12.9%, oklch(40.98% 0.0603 234.97) 16.1%, oklch(43.93% 0.0644 233.67) 19.4%, oklch(46.80% 0.0675 232.33) 22.6%, oklch(49.47% 0.0692 230.99) 25.8%, oklch(52.08% 0.0699 230.08) 29.0%, oklch(54.70% 0.0699 229.52) 32.3%, oklch(57.35% 0.0693 228.99) 35.5%, oklch(60.00% 0.0681 228.18) 38.7%, oklch(62.66% 0.0663 226.78) 41.9%, oklch(65.32% 0.0639 224.47) 45.2%, oklch(67.97% 0.0609 220.95) 48.4%, oklch(70.70% 0.0571 215.91) 51.6%, oklch(73.92% 0.0509 209.40) 54.8%, oklch(77.45% 0.0431 201.70) 58.1%, oklch(81.00% 0.0345 193.10) 61.3%, oklch(84.30% 0.0263 183.88) 64.5%, oklch(87.04% 0.0196 174.33) 67.7%, oklch(88.96% 0.0154 164.74) 71.0%, oklch(89.77% 0.0147 155.38) 74.2%, oklch(89.12% 0.0186 145.97) 77.4%, oklch(86.95% 0.0271 135.52) 80.6%, oklch(83.68% 0.0389 124.48) 83.9%, oklch(79.75% 0.0526 113.39) 87.1%, oklch(75.59% 0.0669 102.78) 90.3%, oklch(71.65% 0.0803 93.18) 93.5%, oklch(68.35% 0.0916 85.13) 96.8%, oklch(66.14% 0.0992 79.14) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.291 | 0.04 | 239.8 |
| 2 | 0.488 | 0.069 | 231.3 |
| 3 | 0.693 | 0.059 | 218.6 |
| 4 | 0.898 | 0.015 | 153.1 |
| 5 | 0.661 | 0.099 | 79.1 |

## In these collections

- [Brooched](https://grabient.com/brooched)

## Other forms

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