# Blue and turquoise ocean palette

The Blue and turquoise ocean palette brings together off-white, light teal, teal, and dark blue. The colors span a very broad lightness range, combining moderate color with high contrast. Its balanced and composed character suits travel posters and environmental mood boards. Its darkest tone is dark blue, and its lightest tone is off-white.

- Also called: Analogous light blue, teal and navy angular swatches
- Seed: `kW5Q2bXJC_8ifPYxoL7GZtGo`
- Page: https://grabient.com/kW5Q2bXJC_8ifPYxoL7GZtGo?style=angularSwatches&steps=5&angle=20
- Drawn as: angular swatches, 5 steps, 20 degrees
- Kinds: light to dark, vivid, cool
- Hues: analogous
- Contrast of its darkest and lightest colors: 13.5 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 | `#d2e2e6` | `oklch(90.16% 0.0179 217.97)` | Aloof | black, 15.7 to 1 |
| 2 | `#88afba` | `oklch(72.83% 0.0455 217.97)` | Sebastian Inlet | black, 8.8 to 1 |
| 3 | `#28878a` | `oklch(57.09% 0.0854 197.89)` | Thai Teal | black, 4.9 to 1 |
| 4 | `#00504c` | `oklch(38.98% 0.0677 188.37)` | Action Green | white, 9.2 to 1 |
| 5 | `#00182c` | `oklch(20.10% 0.0515 245.83)` | Oxford by Night | white, 18 to 1 |

## CSS

```css
background: conic-gradient(from 20deg, #d2e2e6 0.000% 20.000%, #88afba 20.000% 40.000%, #28878a 40.000% 60.000%, #00504c 60.000% 80.000%, #00182c 80.000% 100.000%);
background: conic-gradient(from 20deg, oklch(90.16% 0.0179 217.97) 0.000% 20.000%, oklch(72.83% 0.0455 217.97) 20.000% 40.000%, oklch(57.09% 0.0854 197.89) 40.000% 60.000%, oklch(38.98% 0.0677 188.37) 60.000% 80.000%, oklch(20.10% 0.0515 245.83) 80.000% 100.000%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.902 | 0.018 | 218 |
| 2 | 0.728 | 0.045 | 218 |
| 3 | 0.571 | 0.085 | 197.9 |
| 4 | 0.39 | 0.09 | 188.4 |
| 5 | 0.201 | 0.074 | 245.4 |

## In these collections

- [Ocean swatches](https://grabient.com/ocean-swatches)

## Other forms

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