# Navy, teal and near-black turquoise palette

The Navy, teal and near-black turquoise palette brings together dark blue, blue, teal, light teal, and dark teal. The colors span a broad lightness range, combining moderate color with clear contrast. Its balanced and composed character suits brand mood boards and editorial graphics. Its darkest tone is dark teal, and its lightest tone is light teal.

- Also called: Navy, teal, light blue and black angular swatches
- Seed: `kYPi3EMZg6EWgPBqlj8uxy-5sMwM`
- Page: https://grabient.com/kYPi3EMZg6EWgPBqlj8uxy-5sMwM?style=angularSwatches&steps=6
- Drawn as: angular swatches, 6 steps, 90 degrees
- Kinds: light center, vivid, cool
- Hues: wide
- Contrast of its darkest and lightest colors: 10.8 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 | `#181c3d` | `oklch(24.41% 0.0620 275.63)` | Nightwalker | white, 16.4 to 1 |
| 2 | `#124c60` | `oklch(38.98% 0.0661 225.96)` | Lazurite Blue | white, 9.4 to 1 |
| 3 | `#18817f` | `oklch(54.72% 0.0882 193.20)` | Windows 95 Desktop | white, 4.6 to 1 |
| 4 | `#9dd7d0` | `oklch(83.86% 0.0606 186.86)` | In the Shallows | black, 13.1 to 1 |
| 5 | `#15675a` | `oklch(46.46% 0.0785 178.40)` | Eucalyptus Green | white, 6.6 to 1 |
| 6 | `#021e1b` | `oklch(21.26% 0.0344 185.80)` | Stellar Explorer | white, 17.4 to 1 |

## CSS

```css
background: conic-gradient(from 90deg, #181c3d 0.000% 16.667%, #124c60 16.667% 33.333%, #18817f 33.333% 50.000%, #9dd7d0 50.000% 66.667%, #15675a 66.667% 83.333%, #021e1b 83.333% 100.000%);
background: conic-gradient(from 90deg, oklch(24.41% 0.0620 275.63) 0.000% 16.667%, oklch(38.98% 0.0661 225.96) 16.667% 33.333%, oklch(54.72% 0.0882 193.20) 33.333% 50.000%, oklch(83.86% 0.0606 186.86) 50.000% 66.667%, oklch(46.46% 0.0785 178.40) 66.667% 83.333%, oklch(21.26% 0.0344 185.80) 83.333% 100.000%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.244 | 0.062 | 275.6 |
| 2 | 0.39 | 0.066 | 226 |
| 3 | 0.547 | 0.088 | 193.2 |
| 4 | 0.839 | 0.061 | 186.9 |
| 5 | 0.465 | 0.079 | 178.4 |
| 6 | 0.213 | 0.034 | 185.8 |

## In these collections

- [Turquoise](https://grabient.com/turquoise)

## Other forms

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