# Harbor Blue Teal Fan

These angular wedges move from deep marine blue through misty blue, bright cyan blue, royal blue, and dark teal. The varied depths give the fan both clarity and momentum. Use them for ocean data graphics, transportation branding, technology presentations, or bold navigational systems that need a broad but controlled blue and teal palette.

- Also called: Cool blue, light blue and dark green angular swatches
- Seed: `kWXUGv15Q--GnPK4KERI5E4Y`
- Page: https://grabient.com/kWXUGv15Q--GnPK4KERI5E4Y?style=angularSwatches&steps=5&angle=210
- Drawn as: angular swatches, 5 steps, 210 degrees
- Kinds: light center, vivid, cool
- Hues: analogous
- Contrast of its darkest and lightest colors: 7.1 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 | `#09416b` | `oklch(36.61% 0.0896 246.80)` | Indigo Dye | white, 10.5 to 1 |
| 2 | `#7ba0ba` | `oklch(68.90% 0.0551 238.34)` | Blue Nile | black, 7.6 to 1 |
| 3 | `#51c6da` | `oklch(76.77% 0.1075 210.87)` | Naxos Sky | black, 10.4 to 1 |
| 4 | `#0f568c` | `oklch(44.09% 0.1102 247.85)` | Bandana | white, 7.7 to 1 |
| 5 | `#04302b` | `oklch(27.95% 0.0469 184.45)` | Fence Green | white, 14.3 to 1 |

## CSS

```css
background: conic-gradient(from 210deg, #09416b 0.000% 20.000%, #7ba0ba 20.000% 40.000%, #51c6da 40.000% 60.000%, #0f568c 60.000% 80.000%, #04302b 80.000% 100.000%);
background: conic-gradient(from 210deg, oklch(36.61% 0.0896 246.80) 0.000% 20.000%, oklch(68.90% 0.0551 238.34) 20.000% 40.000%, oklch(76.77% 0.1075 210.87) 40.000% 60.000%, oklch(44.09% 0.1102 247.85) 60.000% 80.000%, oklch(27.95% 0.0469 184.45) 80.000% 100.000%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.366 | 0.09 | 246.8 |
| 2 | 0.689 | 0.055 | 238.3 |
| 3 | 0.768 | 0.107 | 210.9 |
| 4 | 0.441 | 0.11 | 247.9 |
| 5 | 0.28 | 0.047 | 184.4 |

## In these collections

- [Blue and teal swatches](https://grabient.com/blue-and-teal-swatches)

## Other forms

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