# Cobalt blue and teal color palette

The Cobalt blue and teal color palette brings together blue and teal. The colors span a moderate lightness range, combining moderate color with clear contrast. Its balanced and composed character suits travel posters and environmental mood boards. Its lightest and darkest tones both fall within the teal color family.

- Also called: Vivid analogous blue and teal angular swatches
- Seed: `kYkliwu6A_LQXPHAnz1VCi_eQmv2`
- Page: https://grabient.com/kYkliwu6A_LQXPHAnz1VCi_eQmv2?style=angularSwatches&steps=6&angle=315
- Drawn as: angular swatches, 6 steps, 315 degrees
- Kinds: dark center, vivid, cool
- Hues: analogous
- Contrast of its darkest and lightest colors: 4.6 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 | `#357dbd` | `oklch(57.48% 0.1213 248.20)` | Mykonos | black, 4.8 to 1 |
| 2 | `#256087` | `oklch(46.85% 0.0882 241.86)` | Copenhagen Blue | white, 6.7 to 1 |
| 3 | `#14535e` | `oklch(40.94% 0.0634 212.27)` | Recollection Blue | white, 8.6 to 1 |
| 4 | `#0a7570` | `oklch(50.79% 0.0854 190.08)` | Artisan Green | white, 5.5 to 1 |
| 5 | `#1aa89d` | `oklch(66.14% 0.1116 185.85)` | Tropical Hideaway | black, 7.1 to 1 |
| 6 | `#60d0be` | `oklch(78.74% 0.1061 181.63)` | Jamaican Jade | black, 11.2 to 1 |

## CSS

```css
background: conic-gradient(from 315deg, #357dbd 0.000% 16.667%, #256087 16.667% 33.333%, #14535e 33.333% 50.000%, #0a7570 50.000% 66.667%, #1aa89d 66.667% 83.333%, #60d0be 83.333% 100.000%);
background: conic-gradient(from 315deg, oklch(57.48% 0.1213 248.20) 0.000% 16.667%, oklch(46.85% 0.0882 241.86) 16.667% 33.333%, oklch(40.94% 0.0634 212.27) 33.333% 50.000%, oklch(50.79% 0.0854 190.08) 50.000% 66.667%, oklch(66.14% 0.1116 185.85) 66.667% 83.333%, oklch(78.74% 0.1061 181.63) 83.333% 100.000%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.575 | 0.121 | 248.2 |
| 2 | 0.469 | 0.088 | 241.9 |
| 3 | 0.409 | 0.063 | 212.3 |
| 4 | 0.508 | 0.085 | 190.1 |
| 5 | 0.661 | 0.112 | 185.9 |
| 6 | 0.787 | 0.106 | 181.6 |

## In these collections

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

## Other forms

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