# Tritone navy, lavender and light blue linear gradient

Tritone navy, lavender and light blue linear gradient with 32 colors: #15294b, #192e51, #1d345a, #233c66, #294472, #304e80, #38588e, #41629d, #4a6baa, #5474b6, #5f7ac1, #6a7fc8, #7883cd, #8784d0, #9686d0, #a387cd, #af88c9, #b98ac5, #c08dc3, #c590c2, #c894c4, #c89aca, #c6a0d4, #c0a8de, #b7b1e7, #acbbed, #a2c4ee, #9bcceb, #99d3e4, #9cd8dd, #a2dbd6, #a7ddd2. Edit it and copy or download CSS, SVG, PNG or shader code.

- Seed: `kUSDG5TClA14fxvtFS6A`
- Page: https://grabient.com/kUSDG5TClA14fxvtFS6A?steps=32&angle=45
- Drawn as: linear gradient, 32 steps, 45 degrees
- Kinds: dark to light, cool
- Hues: analogous
- Contrast of its darkest and lightest colors: 9.6 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 | `#15294b` | `oklch(28.35% 0.0675 260.16)` | Rurikon Blue | white, 14.4 to 1 |
| 2 | `#192e51` | `oklch(30.22% 0.0704 260.36)` | Elite Blue | white, 13.5 to 1 |
| 3 | `#1d345a` | `oklch(32.72% 0.0745 260.34)` | Boatswain | white, 12.4 to 1 |
| 4 | `#233c66` | `oklch(35.71% 0.0795 260.21)` | Blue Depths | white, 11 to 1 |
| 5 | `#294472` | `oklch(39.04% 0.0851 260.10)` | Blue Funk | white, 9.6 to 1 |
| 6 | `#304e80` | `oklch(42.60% 0.0909 260.13)` | Assassin | white, 8.3 to 1 |
| 7 | `#38588e` | `oklch(46.25% 0.0967 260.41)` | Dark Cobalt Blue | white, 7.1 to 1 |
| 8 | `#41629d` | `oklch(49.85% 0.1020 261.07)` | Mariner | white, 6 to 1 |
| 9 | `#4a6baa` | `oklch(53.28% 0.1067 262.23)` | New Age Blue | white, 5.2 to 1 |
| 10 | `#5474b6` | `oklch(56.40% 0.1103 264.01)` | Diva Violet | white, 4.6 to 1 |
| 11 | `#5f7ac1` | `oklch(59.07% 0.1126 266.53)` | Ultramarine Blue | black, 5 to 1 |
| 12 | `#6a7fc8` | `oklch(61.25% 0.1133 270.31)` | Persian Jewel | black, 5.5 to 1 |
| 13 | `#7883cd` | `oklch(63.14% 0.1129 276.41)` | Twilight Twinkle | black, 5.9 to 1 |
| 14 | `#8784d0` | `oklch(64.79% 0.1114 284.24)` | Indigo Bloom | black, 6.2 to 1 |
| 15 | `#9686d0` | `oklch(66.25% 0.1091 293.10)` | Amethyst Grey | black, 6.5 to 1 |
| 16 | `#a387cd` | `oklch(67.55% 0.1062 302.29)` | Lilac Purple | black, 6.8 to 1 |
| 17 | `#af88c9` | `oklch(68.74% 0.1028 311.10)` | Creeping Bellflower | black, 7.1 to 1 |
| 18 | `#b98ac5` | `oklch(69.86% 0.0992 318.85)` | Creeping Bellflower | black, 7.4 to 1 |
| 19 | `#c08dc3` | `oklch(70.95% 0.0955 324.82)` | Violaceous | black, 7.8 to 1 |
| 20 | `#c590c2` | `oklch(72.05% 0.0920 328.31)` | Rose Souvenir | black, 8.1 to 1 |
| 21 | `#c894c4` | `oklch(73.20% 0.0887 328.63)` | Pomtini | black, 8.5 to 1 |
| 22 | `#c89aca` | `oklch(74.44% 0.0859 325.03)` | Pastel Violet | black, 8.9 to 1 |
| 23 | `#c6a0d4` | `oklch(75.74% 0.0830 316.80)` | Lilac Lace | black, 9.3 to 1 |
| 24 | `#c0a8de` | `oklch(77.08% 0.0799 304.61)` | Perfume | black, 9.8 to 1 |
| 25 | `#b7b1e7` | `oklch(78.42% 0.0767 289.42)` | Beloved | black, 10.4 to 1 |
| 26 | `#acbbed` | `oklch(79.74% 0.0734 272.20)` | Perano | black, 11 to 1 |
| 27 | `#a2c4ee` | `oklch(81.02% 0.0702 253.90)` | Sky High | black, 11.6 to 1 |
| 28 | `#9bcceb` | `oklch(82.22% 0.0671 235.49)` | Fail Whale | black, 12.2 to 1 |
| 29 | `#99d3e4` | `oklch(83.33% 0.0642 217.91)` | Infinity Pool | black, 12.8 to 1 |
| 30 | `#9cd8dd` | `oklch(84.32% 0.0617 202.14)` | Lake Reflection | black, 13.2 to 1 |
| 31 | `#a2dbd6` | `oklch(85.16% 0.0595 189.13)` | Brilliante | black, 13.6 to 1 |
| 32 | `#a7ddd2` | `oklch(85.83% 0.0579 179.84)` | Sparkling Mint | black, 13.9 to 1 |

## CSS

```css
background: linear-gradient(45deg, #15294b 0.0%, #192e51 3.2%, #1d345a 6.5%, #233c66 9.7%, #294472 12.9%, #304e80 16.1%, #38588e 19.4%, #41629d 22.6%, #4a6baa 25.8%, #5474b6 29.0%, #5f7ac1 32.3%, #6a7fc8 35.5%, #7883cd 38.7%, #8784d0 41.9%, #9686d0 45.2%, #a387cd 48.4%, #af88c9 51.6%, #b98ac5 54.8%, #c08dc3 58.1%, #c590c2 61.3%, #c894c4 64.5%, #c89aca 67.7%, #c6a0d4 71.0%, #c0a8de 74.2%, #b7b1e7 77.4%, #acbbed 80.6%, #a2c4ee 83.9%, #9bcceb 87.1%, #99d3e4 90.3%, #9cd8dd 93.5%, #a2dbd6 96.8%, #a7ddd2 100.0%);
background: linear-gradient(45deg in oklch, oklch(28.35% 0.0675 260.16) 0.0%, oklch(30.22% 0.0704 260.36) 3.2%, oklch(32.72% 0.0745 260.34) 6.5%, oklch(35.71% 0.0795 260.21) 9.7%, oklch(39.04% 0.0851 260.10) 12.9%, oklch(42.60% 0.0909 260.13) 16.1%, oklch(46.25% 0.0967 260.41) 19.4%, oklch(49.85% 0.1020 261.07) 22.6%, oklch(53.28% 0.1067 262.23) 25.8%, oklch(56.40% 0.1103 264.01) 29.0%, oklch(59.07% 0.1126 266.53) 32.3%, oklch(61.25% 0.1133 270.31) 35.5%, oklch(63.14% 0.1129 276.41) 38.7%, oklch(64.79% 0.1114 284.24) 41.9%, oklch(66.25% 0.1091 293.10) 45.2%, oklch(67.55% 0.1062 302.29) 48.4%, oklch(68.74% 0.1028 311.10) 51.6%, oklch(69.86% 0.0992 318.85) 54.8%, oklch(70.95% 0.0955 324.82) 58.1%, oklch(72.05% 0.0920 328.31) 61.3%, oklch(73.20% 0.0887 328.63) 64.5%, oklch(74.44% 0.0859 325.03) 67.7%, oklch(75.74% 0.0830 316.80) 71.0%, oklch(77.08% 0.0799 304.61) 74.2%, oklch(78.42% 0.0767 289.42) 77.4%, oklch(79.74% 0.0734 272.20) 80.6%, oklch(81.02% 0.0702 253.90) 83.9%, oklch(82.22% 0.0671 235.49) 87.1%, oklch(83.33% 0.0642 217.91) 90.3%, oklch(84.32% 0.0617 202.14) 93.5%, oklch(85.16% 0.0595 189.13) 96.8%, oklch(85.83% 0.0579 179.84) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.283 | 0.068 | 260.2 |
| 2 | 0.598 | 0.113 | 267.6 |
| 3 | 0.74 | 0.087 | 326.7 |
| 4 | 0.858 | 0.058 | 179.8 |

## In these collections

- [Iridescent glass interface](https://grabient.com/iridescent-glass-interface)

## Other forms

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