# Vivid duotone teal to blue linear gradient

Vivid duotone teal to blue linear gradient with 6 colors: #00faba, #2dffd4, #0fefef, #00c5fb, #1186ff, #053cfe. Edit it and copy or download CSS, SVG, PNG or shader code.

- Seed: `kW3oV2cbxBWizQ7Uw0TP2bBg`
- Page: https://grabient.com/kW3oV2cbxBWizQ7Uw0TP2bBg?steps=6
- Drawn as: linear gradient, 6 steps, 90 degrees
- Kinds: light to dark, vivid, light, cool
- Hues: wide
- Contrast of its darkest and lightest colors: 5.2 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 | `#00faba` | `oklch(87.40% 0.1815 165.93)` | Minty Paradise | black, 15.4 to 1 |
| 2 | `#2dffd4` | `oklch(89.52% 0.1640 173.77)` | Aurichalcite | black, 16.3 to 1 |
| 3 | `#0fefef` | `oklch(86.18% 0.1458 194.93)` | Phosphorescent Blue | black, 14.5 to 1 |
| 4 | `#00c5fb` | `oklch(76.67% 0.1471 226.39)` | Shovel Knight | black, 10.3 to 1 |
| 5 | `#1186ff` | `oklch(62.95% 0.2023 255.20)` | Too Blue to Be True | black, 5.8 to 1 |
| 6 | `#053cfe` | `oklch(49.61% 0.2825 264.22)` | C64 Blue | white, 6.7 to 1 |

## CSS

```css
background: linear-gradient(90deg, #00faba 0.0%, #2dffd4 20.0%, #0fefef 40.0%, #00c5fb 60.0%, #1186ff 80.0%, #053cfe 100.0%);
background: linear-gradient(90deg in oklch, oklch(87.40% 0.1815 165.93) 0.0%, oklch(89.52% 0.1640 173.77) 20.0%, oklch(86.18% 0.1458 194.93) 40.0%, oklch(76.67% 0.1471 226.39) 60.0%, oklch(62.95% 0.2023 255.20) 80.0%, oklch(49.61% 0.2825 264.22) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.874 | 0.183 | 165.9 |
| 2 | 0.894 | 0.165 | 177.6 |
| 3 | 0.823 | 0.141 | 209.3 |
| 4 | 0.665 | 0.185 | 250.5 |
| 5 | 0.496 | 0.282 | 264.2 |

## Other forms

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