# Deep Teal Harbor Fan

These four angular wedges move from deep blue teal through pale aqua, muted green teal, and near-black green. The light second wedge sharpens the darker coastal colors while every segment remains clearly separate. Use them for teal dashboards, marine branding, map legends, or interface accents that need a bright highlight, two midtone water colors, and a firm dark anchor.

- Also called: Navy, light blue, teal and black angular swatches
- Seed: `kUUiul5SC58aSP2hDsKA`
- Page: https://grabient.com/kUUiul5SC58aSP2hDsKA?style=angularSwatches&steps=4&angle=255
- Drawn as: angular swatches, 4 steps, 255 degrees
- Kinds: light center, cool
- Hues: analogous
- Contrast of its darkest and lightest colors: 8.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 | `#0b384d` | `oklch(32.28% 0.0593 232.73)` | Gibraltar Sea | white, 12.4 to 1 |
| 2 | `#76cfc0` | `oklch(79.53% 0.0896 182.01)` | Jolly Jade | black, 11.4 to 1 |
| 3 | `#537d73` | `oklch(55.51% 0.0496 177.78)` | Dull Turquoise | white, 4.6 to 1 |
| 4 | `#052a2c` | `oklch(25.98% 0.0400 199.98)` | Black Box | white, 15.3 to 1 |

## CSS

```css
background: conic-gradient(from 255deg, #0b384d 0.000% 25.000%, #76cfc0 25.000% 50.000%, #537d73 50.000% 75.000%, #052a2c 75.000% 100.000%);
background: conic-gradient(from 255deg, oklch(32.28% 0.0593 232.73) 0.000% 25.000%, oklch(79.53% 0.0896 182.01) 25.000% 50.000%, oklch(55.51% 0.0496 177.78) 50.000% 75.000%, oklch(25.98% 0.0400 199.98) 75.000% 100.000%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.323 | 0.059 | 232.7 |
| 2 | 0.795 | 0.09 | 182 |
| 3 | 0.555 | 0.05 | 177.8 |
| 4 | 0.26 | 0.04 | 200 |

## In these collections

- [Teal swatches](https://grabient.com/teal-swatches)

## Other forms

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