# Teal and cobalt blue color palette

The Teal and cobalt blue color palette brings together blue and teal. The colors span a broad lightness range, combining strong color with clear contrast. Its bold and dramatic character suits seasonal campaigns and event graphics. Its darkest tone is blue, and its lightest tone is teal.

- Also called: Analogous blue and cyan angular swatches
- Seed: `kUYS-nyUXCl-3PT1NLqg`
- Page: https://grabient.com/kUYS-nyUXCl-3PT1NLqg?style=angularSwatches&steps=13&angle=45
- Drawn as: angular swatches, 13 steps, 45 degrees
- Kinds: dark to light, vivid, cool
- Hues: analogous
- Contrast of its darkest and lightest colors: 8.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 | `#1a4861` | `oklch(38.19% 0.0648 235.55)` | Swallow Blue | white, 9.8 to 1 |
| 2 | `#0b5179` | `oklch(41.69% 0.0915 240.60)` | Silk Jewel | white, 8.4 to 1 |
| 3 | `#005d9c` | `oklch(46.73% 0.1262 248.13)` | Jetski Race | white, 6.8 to 1 |
| 4 | `#0668c7` | `oklch(52.32% 0.1686 254.87)` | Royal Navy Blue | white, 5.5 to 1 |
| 5 | `#1d74e7` | `oklch(57.48% 0.1915 257.74)` | Níu Zǎi Sè Denim | black, 4.6 to 1 |
| 6 | `#1f84f6` | `oklch(62.04% 0.1925 255.62)` | Bubble Bobble P2 | black, 5.6 to 1 |
| 7 | `#1d97fc` | `oklch(66.49% 0.1799 250.28)` | Blue Nebula | black, 6.8 to 1 |
| 8 | `#1faafd` | `oklch(70.86% 0.1631 242.85)` | Krishna Blue | black, 8.2 to 1 |
| 9 | `#25bcff` | `oklch(75.20% 0.1506 234.49)` | Cherenkov Radiation | black, 9.7 to 1 |
| 10 | `#33d0ff` | `oklch(79.88% 0.1391 223.83)` | Thor’s Thunder | black, 11.5 to 1 |
| 11 | `#39e4ff` | `oklch(84.77% 0.1363 210.84)` | Shimmering Expanse Cyan | black, 13.7 to 1 |
| 12 | `#2ef8fe` | `oklch(89.10% 0.1451 198.58)` | Frozen State | black, 15.9 to 1 |
| 13 | `#75fff7` | `oklch(92.12% 0.1214 190.11)` | Aggressive Baby Blue | black, 17.3 to 1 |

## CSS

```css
background: conic-gradient(from 45deg, #1a4861 0.000% 7.692%, #0b5179 7.692% 15.385%, #005d9c 15.385% 23.077%, #0668c7 23.077% 30.769%, #1d74e7 30.769% 38.462%, #1f84f6 38.462% 46.154%, #1d97fc 46.154% 53.846%, #1faafd 53.846% 61.538%, #25bcff 61.538% 69.231%, #33d0ff 69.231% 76.923%, #39e4ff 76.923% 84.615%, #2ef8fe 84.615% 92.308%, #75fff7 92.308% 100.000%);
background: conic-gradient(from 45deg, oklch(38.19% 0.0648 235.55) 0.000% 7.692%, oklch(41.69% 0.0915 240.60) 7.692% 15.385%, oklch(46.73% 0.1262 248.13) 15.385% 23.077%, oklch(52.32% 0.1686 254.87) 23.077% 30.769%, oklch(57.48% 0.1915 257.74) 30.769% 38.462%, oklch(62.04% 0.1925 255.62) 38.462% 46.154%, oklch(66.49% 0.1799 250.28) 46.154% 53.846%, oklch(70.86% 0.1631 242.85) 53.846% 61.538%, oklch(75.20% 0.1506 234.49) 61.538% 69.231%, oklch(79.88% 0.1391 223.83) 69.231% 76.923%, oklch(84.77% 0.1363 210.84) 76.923% 84.615%, oklch(89.10% 0.1451 198.58) 84.615% 92.308%, oklch(92.12% 0.1214 190.11) 92.308% 100.000%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.382 | 0.065 | 235.5 |
| 2 | 0.575 | 0.192 | 257.7 |
| 3 | 0.752 | 0.152 | 234.5 |
| 4 | 0.921 | 0.145 | 190.1 |

## In these collections

- [Teal gradients](https://grabient.com/teal-gradients)
- [Blue and teal swatches](https://grabient.com/blue-and-teal-swatches)
- [Cool swatches](https://grabient.com/cool-swatches)
- [Summer swatches](https://grabient.com/summer-swatches)

## Other forms

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