# Tritone navy, teal and tan linear swatches

Tritone navy, teal and tan linear swatches with 32 colors: #21315d, #243461, #293866, #2f3d6c, #364273, #3e497a, #444f82, #4b578a, #4f5e92, #526699, #526fa0, #4f78a4, #4982a6, #468ca3, #4a959c, #589d92, #6ca288, #82a580, #97a87c, #a8a97c, #b6ab7e, #c0ad80, #c9af82, #d0b182, #d6b280, #dab47d, #deb679, #e1b974, #e3bb6f, #e4bd6a, #e5be66, #e7c063. Edit it and copy or download CSS, SVG, PNG or shader code.

- Seed: `kUUju-RZ6-18XLBoq7-A`
- Page: https://grabient.com/kUUju-RZ6-18XLBoq7-A?style=linearSwatches&steps=32&angle=45
- Drawn as: linear swatches, 32 steps, 45 degrees
- Kinds: dark to light, muted
- Hues: complementary
- Contrast of its darkest and lightest colors: 7.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 | `#21315d` | `oklch(32.28% 0.0813 267.19)` | Ending Navy Blue | white, 12.7 to 1 |
| 2 | `#243461` | `oklch(33.58% 0.0816 267.31)` | Navy Trim | white, 12 to 1 |
| 3 | `#293866` | `oklch(35.25% 0.0820 268.34)` | Blue Depths | white, 11.3 to 1 |
| 4 | `#2f3d6c` | `oklch(37.23% 0.0826 269.86)` | Newport Indigo | white, 10.4 to 1 |
| 5 | `#364273` | `oklch(39.45% 0.0832 271.48)` | Lviv Blue | white, 9.5 to 1 |
| 6 | `#3e497a` | `oklch(41.84% 0.0839 272.78)` | Expressionism | white, 8.6 to 1 |
| 7 | `#444f82` | `oklch(44.33% 0.0844 273.36)` | Blue Jewel | white, 7.7 to 1 |
| 8 | `#4b578a` | `oklch(46.87% 0.0848 272.81)` | Baby Whale | white, 6.9 to 1 |
| 9 | `#4f5e92` | `oklch(49.37% 0.0850 270.74)` | Fresh Take | white, 6.2 to 1 |
| 10 | `#526699` | `oklch(51.78% 0.0848 266.73)` | UCLA Blue | white, 5.6 to 1 |
| 11 | `#526fa0` | `oklch(54.02% 0.0843 260.38)` | Chesty Bond | white, 5 to 1 |
| 12 | `#4f78a4` | `oklch(56.11% 0.0832 250.99)` | Pacifica | white, 4.6 to 1 |
| 13 | `#4982a6` | `oklch(58.23% 0.0812 237.77)` | Lake Henry | black, 5 to 1 |
| 14 | `#468ca3` | `oklch(60.39% 0.0785 221.50)` | Cossack Dancer | black, 5.5 to 1 |
| 15 | `#4a959c` | `oklch(62.54% 0.0753 203.07)` | Sea Current | black, 6 to 1 |
| 16 | `#589d92` | `oklch(64.66% 0.0720 183.34)` | Aqua Revival | black, 6.6 to 1 |
| 17 | `#6ca288` | `oklch(66.72% 0.0688 163.20)` | Quilotoa Green | black, 7.1 to 1 |
| 18 | `#82a580` | `oklch(68.70% 0.0660 143.54)` | Greyish Green | black, 7.6 to 1 |
| 19 | `#97a87c` | `oklch(70.57% 0.0638 125.22)` | Forester | black, 8.1 to 1 |
| 20 | `#a8a97c` | `oklch(72.31% 0.0626 109.13)` | Brisk Olive | black, 8.6 to 1 |
| 21 | `#b6ab7e` | `oklch(73.87% 0.0626 96.15)` | Fresh Brew | black, 9 to 1 |
| 22 | `#c0ad80` | `oklch(75.24% 0.0641 87.06)` | Cobbler | black, 9.5 to 1 |
| 23 | `#c9af82` | `oklch(76.44% 0.0673 81.15)` | Gold Perennial | black, 9.8 to 1 |
| 24 | `#d0b182` | `oklch(77.49% 0.0720 77.72)` | Warm Butterscotch | black, 10.2 to 1 |
| 25 | `#d6b280` | `oklch(78.41% 0.0779 76.32)` | Jacob’s Ladder | black, 10.5 to 1 |
| 26 | `#dab47d` | `oklch(79.21% 0.0845 76.51)` | Boudin | black, 10.8 to 1 |
| 27 | `#deb679` | `oklch(79.91% 0.0915 77.85)` | Soft Chamois | black, 11.1 to 1 |
| 28 | `#e1b974` | `oklch(80.51% 0.0986 79.91)` | Veranda Yellow | black, 11.3 to 1 |
| 29 | `#e3bb6f` | `oklch(81.04% 0.1053 82.24)` | Cloudy Honey | black, 11.5 to 1 |
| 30 | `#e4bd6a` | `oklch(81.50% 0.1113 84.41)` | Crisps | black, 11.7 to 1 |
| 31 | `#e5be66` | `oklch(81.91% 0.1163 85.97)` | Crisps | black, 11.9 to 1 |
| 32 | `#e7c063` | `oklch(82.28% 0.1199 86.48)` | Crop Circle | black, 12 to 1 |

## CSS

```css
background: linear-gradient(45deg, #21315d 0.000% 3.125%, #243461 3.125% 6.250%, #293866 6.250% 9.375%, #2f3d6c 9.375% 12.500%, #364273 12.500% 15.625%, #3e497a 15.625% 18.750%, #444f82 18.750% 21.875%, #4b578a 21.875% 25.000%, #4f5e92 25.000% 28.125%, #526699 28.125% 31.250%, #526fa0 31.250% 34.375%, #4f78a4 34.375% 37.500%, #4982a6 37.500% 40.625%, #468ca3 40.625% 43.750%, #4a959c 43.750% 46.875%, #589d92 46.875% 50.000%, #6ca288 50.000% 53.125%, #82a580 53.125% 56.250%, #97a87c 56.250% 59.375%, #a8a97c 59.375% 62.500%, #b6ab7e 62.500% 65.625%, #c0ad80 65.625% 68.750%, #c9af82 68.750% 71.875%, #d0b182 71.875% 75.000%, #d6b280 75.000% 78.125%, #dab47d 78.125% 81.250%, #deb679 81.250% 84.375%, #e1b974 84.375% 87.500%, #e3bb6f 87.500% 90.625%, #e4bd6a 90.625% 93.750%, #e5be66 93.750% 96.875%, #e7c063 96.875% 100.000%);
background: linear-gradient(45deg, oklch(32.28% 0.0813 267.19) 0.000% 3.125%, oklch(33.58% 0.0816 267.31) 3.125% 6.250%, oklch(35.25% 0.0820 268.34) 6.250% 9.375%, oklch(37.23% 0.0826 269.86) 9.375% 12.500%, oklch(39.45% 0.0832 271.48) 12.500% 15.625%, oklch(41.84% 0.0839 272.78) 15.625% 18.750%, oklch(44.33% 0.0844 273.36) 18.750% 21.875%, oklch(46.87% 0.0848 272.81) 21.875% 25.000%, oklch(49.37% 0.0850 270.74) 25.000% 28.125%, oklch(51.78% 0.0848 266.73) 28.125% 31.250%, oklch(54.02% 0.0843 260.38) 31.250% 34.375%, oklch(56.11% 0.0832 250.99) 34.375% 37.500%, oklch(58.23% 0.0812 237.77) 37.500% 40.625%, oklch(60.39% 0.0785 221.50) 40.625% 43.750%, oklch(62.54% 0.0753 203.07) 43.750% 46.875%, oklch(64.66% 0.0720 183.34) 46.875% 50.000%, oklch(66.72% 0.0688 163.20) 50.000% 53.125%, oklch(68.70% 0.0660 143.54) 53.125% 56.250%, oklch(70.57% 0.0638 125.22) 56.250% 59.375%, oklch(72.31% 0.0626 109.13) 59.375% 62.500%, oklch(73.87% 0.0626 96.15) 62.500% 65.625%, oklch(75.24% 0.0641 87.06) 65.625% 68.750%, oklch(76.44% 0.0673 81.15) 68.750% 71.875%, oklch(77.49% 0.0720 77.72) 71.875% 75.000%, oklch(78.41% 0.0779 76.32) 75.000% 78.125%, oklch(79.21% 0.0845 76.51) 78.125% 81.250%, oklch(79.91% 0.0915 77.85) 81.250% 84.375%, oklch(80.51% 0.0986 79.91) 84.375% 87.500%, oklch(81.04% 0.1053 82.24) 87.500% 90.625%, oklch(81.50% 0.1113 84.41) 90.625% 93.750%, oklch(81.91% 0.1163 85.97) 93.750% 96.875%, oklch(82.28% 0.1199 86.48) 96.875% 100.000%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.323 | 0.081 | 267.2 |
| 2 | 0.547 | 0.084 | 257.7 |
| 3 | 0.748 | 0.063 | 89.7 |
| 4 | 0.823 | 0.12 | 86.5 |

## In these collections

- [Retro gradients](https://grabient.com/retro-gradients)

## Other forms

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