# Cobalt teal hop diagonal

Vivid tritone navy, teal and tan linear gradient with 40 colors: #073064, #083065, #0a3166, #0c3167, #0f3169, #12316a, #15316c, #18326e, #1b326f, #1d3271, #203373, #223475, #243578, #25367a, #26387d, #263a7f, #263d82, #244085, #204489, #1b498c, #104e8f, #00548f, #005c8b, #006389, #006a88, #007286, #007a85, #008383, #008b80, #009479, #2e9b71, #4ea068, #68a461, #7fa75a, #93a955, #a4ab53, #b4ad54, #c1ae56, #ccaf59, #d4b05d. Edit it and copy or download CSS, SVG, PNG or shader code.

- Also called: Vivid tritone navy, teal and tan linear gradient
- Seed: `kSUEq3NSy_2IoK8`
- Page: https://grabient.com/kSUEq3NSy_2IoK8?steps=40&angle=225
- Drawn as: linear gradient, 40 steps, 225 degrees
- Kinds: dark to light, vivid, cool
- Hues: complementary
- Contrast of its darkest and lightest colors: 6.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 | `#073064` | `oklch(31.50% 0.1020 257.34)` | Cool Black | white, 13 to 1 |
| 2 | `#083065` | `oklch(31.75% 0.1026 257.52)` | Prussian Blue | white, 12.9 to 1 |
| 3 | `#0a3166` | `oklch(32.00% 0.1034 258.08)` | Prussian Blue | white, 12.8 to 1 |
| 4 | `#0c3167` | `oklch(32.25% 0.1043 258.93)` | Funnel Cloud | white, 12.7 to 1 |
| 5 | `#0f3169` | `oklch(32.51% 0.1054 260.02)` | Funnel Cloud | white, 12.6 to 1 |
| 6 | `#12316a` | `oklch(32.78% 0.1066 261.28)` | Funnel Cloud | white, 12.5 to 1 |
| 7 | `#15316c` | `oklch(33.07% 0.1079 262.64)` | Atlantic Navy | white, 12.3 to 1 |
| 8 | `#18326e` | `oklch(33.37% 0.1092 264.03)` | Atlantic Navy | white, 12.2 to 1 |
| 9 | `#1b326f` | `oklch(33.71% 0.1106 265.38)` | Atlantic Navy | white, 12.1 to 1 |
| 10 | `#1d3271` | `oklch(34.09% 0.1120 266.62)` | Atlantic Navy | white, 11.9 to 1 |
| 11 | `#203373` | `oklch(34.51% 0.1134 267.70)` | Twilight Express | white, 11.7 to 1 |
| 12 | `#223475` | `oklch(34.97% 0.1148 268.53)` | Twilight Express | white, 11.5 to 1 |
| 13 | `#243578` | `oklch(35.49% 0.1162 269.06)` | Twilight Express | white, 11.3 to 1 |
| 14 | `#25367a` | `oklch(36.07% 0.1174 269.20)` | Surf the Web | white, 11.1 to 1 |
| 15 | `#26387d` | `oklch(36.72% 0.1186 268.91)` | Surf the Web | white, 10.8 to 1 |
| 16 | `#263a7f` | `oklch(37.44% 0.1197 268.10)` | Surf the Web | white, 10.5 to 1 |
| 17 | `#263d82` | `oklch(38.24% 0.1207 266.71)` | Mazarine Blue | white, 10.1 to 1 |
| 18 | `#244085` | `oklch(39.12% 0.1215 264.67)` | Blue Oblivion | white, 9.7 to 1 |
| 19 | `#204489` | `oklch(40.09% 0.1221 261.91)` | Blue Oblivion | white, 9.3 to 1 |
| 20 | `#1b498c` | `oklch(41.16% 0.1225 258.37)` | Nuit Blanche | white, 8.8 to 1 |
| 21 | `#104e8f` | `oklch(42.35% 0.1227 253.93)` | Yale Blue | white, 8.3 to 1 |
| 22 | `#00548f` | `oklch(43.73% 0.1186 248.31)` | Ocean | white, 7.8 to 1 |
| 23 | `#005c8b` | `oklch(45.31% 0.1066 241.53)` | Buccaneer Blue | white, 7.2 to 1 |
| 24 | `#006389` | `oklch(47.04% 0.0981 233.75)` | Reservoir | white, 6.6 to 1 |
| 25 | `#006a88` | `oklch(48.92% 0.0928 225.11)` | Techno Blue | white, 6.1 to 1 |
| 26 | `#007286` | `oklch(50.91% 0.0903 215.75)` | Glamour Green | white, 5.5 to 1 |
| 27 | `#007a85` | `oklch(52.99% 0.0906 205.81)` | Mediterranean Cove | white, 5 to 1 |
| 28 | `#008383` | `oklch(55.14% 0.0940 195.42)` | Marine Teal | white, 4.6 to 1 |
| 29 | `#008b80` | `oklch(57.33% 0.1012 184.73)` | Clear Turquoise | black, 5 to 1 |
| 30 | `#009479` | `oklch(59.54% 0.1134 173.87)` | Pool Table | black, 5.5 to 1 |
| 31 | `#2e9b71` | `oklch(61.74% 0.1170 162.99)` | Holly Green | black, 6 to 1 |
| 32 | `#4ea068` | `oklch(63.91% 0.1161 152.20)` | Mosaic Green | black, 6.5 to 1 |
| 33 | `#68a461` | `oklch(66.02% 0.1151 141.66)` | Endo | black, 7 to 1 |
| 34 | `#7fa75a` | `oklch(68.05% 0.1142 131.50)` | Jealousy | black, 7.5 to 1 |
| 35 | `#93a955` | `oklch(69.98% 0.1133 121.85)` | Springtide Melodies | black, 8 to 1 |
| 36 | `#a4ab53` | `oklch(71.77% 0.1125 112.85)` | Sour Apple | black, 8.5 to 1 |
| 37 | `#b4ad54` | `oklch(73.41% 0.1118 104.65)` | Dill Green | black, 9 to 1 |
| 38 | `#c1ae56` | `oklch(74.88% 0.1112 97.37)` | Mack Creek | black, 9.4 to 1 |
| 39 | `#ccaf59` | `oklch(76.13% 0.1106 91.16)` | Hay Wain | black, 9.8 to 1 |
| 40 | `#d4b05d` | `oklch(77.17% 0.1102 86.15)` | Sell Gold | black, 10.1 to 1 |

## CSS

```css
background: linear-gradient(225deg, #073064 0.0%, #083065 2.6%, #0a3166 5.1%, #0c3167 7.7%, #0f3169 10.3%, #12316a 12.8%, #15316c 15.4%, #18326e 17.9%, #1b326f 20.5%, #1d3271 23.1%, #203373 25.6%, #223475 28.2%, #243578 30.8%, #25367a 33.3%, #26387d 35.9%, #263a7f 38.5%, #263d82 41.0%, #244085 43.6%, #204489 46.2%, #1b498c 48.7%, #104e8f 51.3%, #00548f 53.8%, #005c8b 56.4%, #006389 59.0%, #006a88 61.5%, #007286 64.1%, #007a85 66.7%, #008383 69.2%, #008b80 71.8%, #009479 74.4%, #2e9b71 76.9%, #4ea068 79.5%, #68a461 82.1%, #7fa75a 84.6%, #93a955 87.2%, #a4ab53 89.7%, #b4ad54 92.3%, #c1ae56 94.9%, #ccaf59 97.4%, #d4b05d 100.0%);
background: linear-gradient(225deg in oklch, oklch(31.50% 0.1020 257.34) 0.0%, oklch(31.75% 0.1026 257.52) 2.6%, oklch(32.00% 0.1034 258.08) 5.1%, oklch(32.25% 0.1043 258.93) 7.7%, oklch(32.51% 0.1054 260.02) 10.3%, oklch(32.78% 0.1066 261.28) 12.8%, oklch(33.07% 0.1079 262.64) 15.4%, oklch(33.37% 0.1092 264.03) 17.9%, oklch(33.71% 0.1106 265.38) 20.5%, oklch(34.09% 0.1120 266.62) 23.1%, oklch(34.51% 0.1134 267.70) 25.6%, oklch(34.97% 0.1148 268.53) 28.2%, oklch(35.49% 0.1162 269.06) 30.8%, oklch(36.07% 0.1174 269.20) 33.3%, oklch(36.72% 0.1186 268.91) 35.9%, oklch(37.44% 0.1197 268.10) 38.5%, oklch(38.24% 0.1207 266.71) 41.0%, oklch(39.12% 0.1215 264.67) 43.6%, oklch(40.09% 0.1221 261.91) 46.2%, oklch(41.16% 0.1225 258.37) 48.7%, oklch(42.35% 0.1227 253.93) 51.3%, oklch(43.73% 0.1186 248.31) 53.8%, oklch(45.31% 0.1066 241.53) 56.4%, oklch(47.04% 0.0981 233.75) 59.0%, oklch(48.92% 0.0928 225.11) 61.5%, oklch(50.91% 0.0903 215.75) 64.1%, oklch(52.99% 0.0906 205.81) 66.7%, oklch(55.14% 0.0940 195.42) 69.2%, oklch(57.33% 0.1012 184.73) 71.8%, oklch(59.54% 0.1134 173.87) 74.4%, oklch(61.74% 0.1170 162.99) 76.9%, oklch(63.91% 0.1161 152.20) 79.5%, oklch(66.02% 0.1151 141.66) 82.1%, oklch(68.05% 0.1142 131.50) 84.6%, oklch(69.98% 0.1133 121.85) 87.2%, oklch(71.77% 0.1125 112.85) 89.7%, oklch(73.41% 0.1118 104.65) 92.3%, oklch(74.88% 0.1112 97.37) 94.9%, oklch(76.13% 0.1106 91.16) 97.4%, oklch(77.17% 0.1102 86.15) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.315 | 0.102 | 257.3 |
| 2 | 0.417 | 0.123 | 256.3 |
| 3 | 0.772 | 0.11 | 86.2 |

## In these collections

- [Oktoberfest](https://grabient.com/oktoberfest)

## Other forms

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