# Teal and indigo color palette

The Teal and indigo color palette brings together teal and blue. The colors span a moderate lightness range, combining strong color with gentle contrast. Its balanced and composed character suits game interface concepts and stream graphics. Its darkest tone is blue, and its lightest tone is teal.

- Also called: Vivid duotone cyan to blue linear gradient
- Seed: `kY1GiG5ijB9ywwhTukJSsjBUXSwe`
- Page: https://grabient.com/kY1GiG5ijB9ywwhTukJSsjBUXSwe?steps=10&angle=15
- Drawn as: linear gradient, 10 steps, 15 degrees
- Kinds: vivid, cool
- Hues: wide
- Contrast of its darkest and lightest colors: 3.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 | `#0fe6dc` | `oklch(83.46% 0.1433 189.14)` | Bright Turquoise | black, 13.3 to 1 |
| 2 | `#45dde1` | `oklch(82.18% 0.1238 197.53)` | Neon Nazar | black, 12.6 to 1 |
| 3 | `#53d1e2` | `oklch(79.67% 0.1117 207.99)` | Blue Radiance | black, 11.5 to 1 |
| 4 | `#33c2e3` | `oklch(75.46% 0.1240 217.83)` | Caribbean Blue | black, 9.9 to 1 |
| 5 | `#05b2e6` | `oklch(71.23% 0.1389 228.50)` | Blue Atoll | black, 8.4 to 1 |
| 6 | `#09a0ea` | `oklch(67.32% 0.1530 240.16)` | Button Blue | black, 7.2 to 1 |
| 7 | `#008eec` | `oklch(63.27% 0.1720 248.41)` | Bleu de France | black, 6 to 1 |
| 8 | `#007ceb` | `oklch(59.31% 0.1904 254.25)` | Blue Darknut | black, 5.1 to 1 |
| 9 | `#3068f1` | `oklch(56.48% 0.2144 263.80)` | Secret of Mana | white, 4.7 to 1 |
| 10 | `#4b58f2` | `oklch(54.72% 0.2274 272.62)` | Aquarius Mood Indigo | white, 5.2 to 1 |

## CSS

```css
background: linear-gradient(15deg, #0fe6dc 0.0%, #45dde1 11.1%, #53d1e2 22.2%, #33c2e3 33.3%, #05b2e6 44.4%, #09a0ea 55.6%, #008eec 66.7%, #007ceb 77.8%, #3068f1 88.9%, #4b58f2 100.0%);
background: linear-gradient(15deg in oklch, oklch(83.46% 0.1433 189.14) 0.0%, oklch(82.18% 0.1238 197.53) 11.1%, oklch(79.67% 0.1117 207.99) 22.2%, oklch(75.46% 0.1240 217.83) 33.3%, oklch(71.23% 0.1389 228.50) 44.4%, oklch(67.32% 0.1530 240.16) 55.6%, oklch(63.27% 0.1720 248.41) 66.7%, oklch(59.31% 0.1904 254.25) 77.8%, oklch(56.48% 0.2144 263.80) 88.9%, oklch(54.72% 0.2274 272.62) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.835 | 0.143 | 189.1 |
| 2 | 0.803 | 0.112 | 206 |
| 3 | 0.728 | 0.134 | 224 |
| 4 | 0.657 | 0.16 | 244.1 |
| 5 | 0.587 | 0.2 | 255.7 |
| 6 | 0.547 | 0.227 | 272.6 |

## In these collections

- [Electric blue gradients](https://grabient.com/electric-blue-gradients)
- [Neon gradients](https://grabient.com/neon-gradients)

## Other forms

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