# Tritone navy, teal and purple linear gradient

Tritone navy, teal and purple linear gradient with 32 colors: #0d2548, #0c2647, #0b2744, #0a2842, #092a41, #062f41, #043542, #043c43, #094344, #104a46, #135249, #135b4e, #136353, #166b58, #1e715c, #28765f, #307b63, #367e69, #388072, #407f7c, #4c7c84, #587887, #5f7589, #62728f, #686c96, #74649b, #825b9c, #90539c, #9e4b9d, #aa43a1, #b53ba5, #bd34a7. Edit it and copy or download CSS, SVG, PNG or shader code.

- Seed: `kcRDS3o5Q9q8VOe9Hr4xZxAMYPSJEq8gSMzCA`
- Page: https://grabient.com/kcRDS3o5Q9q8VOe9Hr4xZxAMYPSJEq8gSMzCA?steps=32
- Drawn as: linear gradient, 32 steps, 90 degrees
- Kinds: dark to light, vivid, cool
- Hues: two-hue
- Contrast of its darkest and lightest colors: 3.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 | `#0d2548` | `oklch(26.77% 0.0717 258.05)` | Dark Eclipse | white, 15.2 to 1 |
| 2 | `#0c2647` | `oklch(26.80% 0.0687 255.66)` | Dark Eclipse | white, 15.2 to 1 |
| 3 | `#0b2744` | `oklch(26.78% 0.0642 252.52)` | Dark Eclipse | white, 15.1 to 1 |
| 4 | `#0a2842` | `oklch(26.95% 0.0596 248.18)` | Murky Depths | white, 15 to 1 |
| 5 | `#092a41` | `oklch(27.52% 0.0560 242.20)` | Murky Depths | white, 14.7 to 1 |
| 6 | `#062f41` | `oklch(28.72% 0.0544 233.77)` | Nordic Noir | white, 14.1 to 1 |
| 7 | `#043542` | `oklch(30.50% 0.0537 221.91)` | Natural Indigo | white, 13.2 to 1 |
| 8 | `#043c43` | `oklch(32.67% 0.0541 208.65)` | Ghostlands Coal | white, 12.1 to 1 |
| 9 | `#094344` | `oklch(35.01% 0.0556 196.34)` | Dark Side | white, 11 to 1 |
| 10 | `#104a46` | `oklch(37.34% 0.0584 187.27)` | Country Squire | white, 9.9 to 1 |
| 11 | `#135249` | `oklch(39.82% 0.0638 181.51)` | Green Oblivion | white, 8.9 to 1 |
| 12 | `#135b4e` | `oklch(42.48% 0.0710 177.81)` | Country Meadow | white, 7.9 to 1 |
| 13 | `#136353` | `oklch(45.09% 0.0782 175.49)` | Philodendron | white, 7.1 to 1 |
| 14 | `#166b58` | `oklch(47.44% 0.0833 173.91)` | Chrysocolla Medium Green | white, 6.4 to 1 |
| 15 | `#1e715c` | `oklch(49.43% 0.0851 172.12)` | Tropical Rainforest | white, 5.8 to 1 |
| 16 | `#28765f` | `oklch(51.23% 0.0851 169.84)` | Nordic Forest | white, 5.4 to 1 |
| 17 | `#307b63` | `oklch(52.79% 0.0835 168.88)` | Pinehurst | white, 5 to 1 |
| 18 | `#367e69` | `oklch(54.05% 0.0803 171.08)` | Trans Tasman | white, 4.8 to 1 |
| 19 | `#388072` | `oklch(54.93% 0.0754 178.33)` | Copper Mineral Green | white, 4.6 to 1 |
| 20 | `#407f7c` | `oklch(55.35% 0.0655 191.74)` | Bubble Turquoise | white, 4.6 to 1 |
| 21 | `#4c7c84` | `oklch(55.41% 0.0531 209.25)` | Submerged | white, 4.6 to 1 |
| 22 | `#587887` | `oklch(55.28% 0.0432 228.27)` | Ocean Shadow | white, 4.7 to 1 |
| 23 | `#5f7589` | `oklch(55.13% 0.0408 246.21)` | Lost Atlantis | white, 4.7 to 1 |
| 24 | `#62728f` | `oklch(54.92% 0.0492 262.86)` | Columbus | white, 4.8 to 1 |
| 25 | `#686c96` | `oklch(54.51% 0.0656 280.23)` | Wild Wisteria | white, 5 to 1 |
| 26 | `#74649b` | `oklch(54.10% 0.0865 296.77)` | Reign Over Me | white, 5.1 to 1 |
| 27 | `#825b9c` | `oklch(53.89% 0.1083 310.88)` | Sonic Plum | white, 5.3 to 1 |
| 28 | `#90539c` | `oklch(54.08% 0.1286 321.04)` | Vicious Violet | white, 5.3 to 1 |
| 29 | `#9e4b9d` | `oklch(54.74% 0.1515 327.41)` | Hyacinth Violet | white, 5.3 to 1 |
| 30 | `#aa43a1` | `oklch(55.64% 0.1752 331.13)` | Aged Purple | white, 5.1 to 1 |
| 31 | `#b53ba5` | `oklch(56.50% 0.1962 333.35)` | Vivid Fuchsia | white, 5 to 1 |
| 32 | `#bd34a7` | `oklch(57.09% 0.2108 335.19)` | Byzantine | white, 4.9 to 1 |

## CSS

```css
background: linear-gradient(90deg, #0d2548 0.0%, #0c2647 3.2%, #0b2744 6.5%, #0a2842 9.7%, #092a41 12.9%, #062f41 16.1%, #043542 19.4%, #043c43 22.6%, #094344 25.8%, #104a46 29.0%, #135249 32.3%, #135b4e 35.5%, #136353 38.7%, #166b58 41.9%, #1e715c 45.2%, #28765f 48.4%, #307b63 51.6%, #367e69 54.8%, #388072 58.1%, #407f7c 61.3%, #4c7c84 64.5%, #587887 67.7%, #5f7589 71.0%, #62728f 74.2%, #686c96 77.4%, #74649b 80.6%, #825b9c 83.9%, #90539c 87.1%, #9e4b9d 90.3%, #aa43a1 93.5%, #b53ba5 96.8%, #bd34a7 100.0%);
background: linear-gradient(90deg in oklch, oklch(26.77% 0.0717 258.05) 0.0%, oklch(26.80% 0.0687 255.66) 3.2%, oklch(26.78% 0.0642 252.52) 6.5%, oklch(26.95% 0.0596 248.18) 9.7%, oklch(27.52% 0.0560 242.20) 12.9%, oklch(28.72% 0.0544 233.77) 16.1%, oklch(30.50% 0.0537 221.91) 19.4%, oklch(32.67% 0.0541 208.65) 22.6%, oklch(35.01% 0.0556 196.34) 25.8%, oklch(37.34% 0.0584 187.27) 29.0%, oklch(39.82% 0.0638 181.51) 32.3%, oklch(42.48% 0.0710 177.81) 35.5%, oklch(45.09% 0.0782 175.49) 38.7%, oklch(47.44% 0.0833 173.91) 41.9%, oklch(49.43% 0.0851 172.12) 45.2%, oklch(51.23% 0.0851 169.84) 48.4%, oklch(52.79% 0.0835 168.88) 51.6%, oklch(54.05% 0.0803 171.08) 54.8%, oklch(54.93% 0.0754 178.33) 58.1%, oklch(55.35% 0.0655 191.74) 61.3%, oklch(55.41% 0.0531 209.25) 64.5%, oklch(55.28% 0.0432 228.27) 67.7%, oklch(55.13% 0.0408 246.21) 71.0%, oklch(54.92% 0.0492 262.86) 74.2%, oklch(54.51% 0.0656 280.23) 77.4%, oklch(54.10% 0.0865 296.77) 80.6%, oklch(53.89% 0.1083 310.88) 83.9%, oklch(54.08% 0.1286 321.04) 87.1%, oklch(54.74% 0.1515 327.41) 90.3%, oklch(55.64% 0.1752 331.13) 93.5%, oklch(56.50% 0.1962 333.35) 96.8%, oklch(57.09% 0.2108 335.19) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.268 | 0.072 | 258 |
| 2 | 0.28 | 0.055 | 239 |
| 3 | 0.37 | 0.058 | 188.3 |
| 4 | 0.48 | 0.084 | 173.5 |
| 5 | 0.547 | 0.077 | 175.6 |
| 6 | 0.551 | 0.041 | 248.5 |
| 7 | 0.539 | 0.12 | 317.2 |
| 8 | 0.571 | 0.211 | 335.2 |

## In these collections

- [Oil slick colors](https://grabient.com/oil-slick-colors)
- [Vivid multicolor gradients](https://grabient.com/vivid-multicolor-gradients)

## Other forms

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