# Navy teal aqua periwinkle bands

Vivid navy, teal and blue linear swatches with 13 colors: #0d1649, #101d4c, #122a53, #0e425c, #1b5b65, #207673, #28907e, #35a489, #3db29a, #55b5ab, #65b0ba, #6da2d2, #8c8dd8. Edit it and copy or download CSS, SVG, PNG or shader code.

- Also called: Vivid navy, teal and blue linear swatches
- Seed: `kaO0W_pR0-zeXuhLIzw2Cg_tqbw5Vp8jA`
- Page: https://grabient.com/kaO0W_pR0-zeXuhLIzw2Cg_tqbw5Vp8jA?style=linearSwatches&steps=13
- Drawn as: linear swatches, 13 steps, 90 degrees
- Kinds: dark to light, vivid, cool
- Hues: wide
- Contrast of its darkest and lightest colors: 6.9 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 | `#0d1649` | `oklch(23.23% 0.0951 269.30)` | Deadly Depths | white, 17 to 1 |
| 2 | `#101d4c` | `oklch(25.27% 0.0884 267.65)` | Tetsu-Kon Blue | white, 16.1 to 1 |
| 3 | `#122a53` | `oklch(29.13% 0.0799 259.79)` | Dark Tyrian Blue | white, 14.1 to 1 |
| 4 | `#0e425c` | `oklch(35.83% 0.0694 236.34)` | Neptune’s Wrath | white, 10.8 to 1 |
| 5 | `#1b5b65` | `oklch(43.70% 0.0648 210.12)` | Tropical Skies | white, 7.6 to 1 |
| 6 | `#207673` | `oklch(51.65% 0.0788 191.30)` | Prismarine | white, 5.3 to 1 |
| 7 | `#28907e` | `oklch(59.06% 0.0965 178.42)` | Miami Jade | black, 5.3 to 1 |
| 8 | `#35a489` | `oklch(65.01% 0.1075 173.46)` | Klimt Green | black, 6.8 to 1 |
| 9 | `#3db29a` | `oklch(69.29% 0.1102 176.30)` | Green Blue | black, 8 to 1 |
| 10 | `#55b5ab` | `oklch(71.16% 0.0918 186.80)` | Emerald Wave | black, 8.5 to 1 |
| 11 | `#65b0ba` | `oklch(71.26% 0.0758 206.95)` | Montana Sky | black, 8.4 to 1 |
| 12 | `#6da2d2` | `oklch(69.41% 0.0902 246.38)` | Kindred | black, 7.7 to 1 |
| 13 | `#8c8dd8` | `oklch(67.32% 0.1089 281.98)` | Adora | black, 6.9 to 1 |

## CSS

```css
background: linear-gradient(90deg, #0d1649 0.000% 7.692%, #101d4c 7.692% 15.385%, #122a53 15.385% 23.077%, #0e425c 23.077% 30.769%, #1b5b65 30.769% 38.462%, #207673 38.462% 46.154%, #28907e 46.154% 53.846%, #35a489 53.846% 61.538%, #3db29a 61.538% 69.231%, #55b5ab 69.231% 76.923%, #65b0ba 76.923% 84.615%, #6da2d2 84.615% 92.308%, #8c8dd8 92.308% 100.000%);
background: linear-gradient(90deg, oklch(23.23% 0.0951 269.30) 0.000% 7.692%, oklch(25.27% 0.0884 267.65) 7.692% 15.385%, oklch(29.13% 0.0799 259.79) 15.385% 23.077%, oklch(35.83% 0.0694 236.34) 23.077% 30.769%, oklch(43.70% 0.0648 210.12) 30.769% 38.462%, oklch(51.65% 0.0788 191.30) 38.462% 46.154%, oklch(59.06% 0.0965 178.42) 46.154% 53.846%, oklch(65.01% 0.1075 173.46) 53.846% 61.538%, oklch(69.29% 0.1102 176.30) 61.538% 69.231%, oklch(71.16% 0.0918 186.80) 69.231% 76.923%, oklch(71.26% 0.0758 206.95) 76.923% 84.615%, oklch(69.41% 0.0902 246.38) 84.615% 92.308%, oklch(67.32% 0.1089 281.98) 92.308% 100.000%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.232 | 0.095 | 269.3 |
| 2 | 0.291 | 0.08 | 259.8 |
| 3 | 0.437 | 0.065 | 210.1 |
| 4 | 0.591 | 0.096 | 178.4 |
| 5 | 0.693 | 0.11 | 176.3 |
| 6 | 0.713 | 0.076 | 206.9 |
| 7 | 0.673 | 0.109 | 282 |

## In these collections

- [Cool swatches](https://grabient.com/cool-swatches)

## Other forms

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