# Black, teal, light blue and orange linear gradient

Black, teal, light blue and orange linear gradient with 7 colors: #001616, #164949, #649593, #93cfc3, #9cd598, #cca900, #e07b00. Edit it and copy or download CSS, SVG, PNG or shader code.

- Seed: `kSLiiK5xe-NbFMY`
- Page: https://grabient.com/kSLiiK5xe-NbFMY
- Drawn as: linear gradient, 7 steps, 90 degrees
- Kinds: light center, multicolor
- Hues: wide
- Contrast of its darkest and lightest colors: 11 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 | `#001616` | `oklch(18.14% 0.0310 194.80)` | Black Glaze | white, 18.6 to 1 |
| 2 | `#164949` | `oklch(37.26% 0.0533 194.88)` | Prestige Green | white, 10 to 1 |
| 3 | `#649593` | `oklch(63.40% 0.0526 193.36)` | Green Turquoise | black, 6.2 to 1 |
| 4 | `#93cfc3` | `oklch(81.10% 0.0648 179.97)` | Opal Turquoise | black, 11.9 to 1 |
| 5 | `#9cd598` | `oklch(81.92% 0.1026 142.87)` | Young Greens | black, 12.4 to 1 |
| 6 | `#cca900` | `oklch(74.29% 0.1523 93.90)` | Catkin Yellow | black, 9.2 to 1 |
| 7 | `#e07b00` | `oklch(68.11% 0.1623 58.43)` | First of Fall | black, 6.9 to 1 |

## CSS

```css
background: linear-gradient(90deg, #001616 0.0%, #164949 16.7%, #649593 33.3%, #93cfc3 50.0%, #9cd598 66.7%, #cca900 83.3%, #e07b00 100.0%);
background: linear-gradient(90deg in oklch, oklch(18.14% 0.0310 194.80) 0.0%, oklch(37.26% 0.0533 194.88) 16.7%, oklch(63.40% 0.0526 193.36) 33.3%, oklch(81.10% 0.0648 179.97) 50.0%, oklch(81.92% 0.1026 142.87) 66.7%, oklch(74.29% 0.1523 93.90) 83.3%, oklch(68.11% 0.1623 58.43) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.181 | 0.055 | 194.8 |
| 2 | 0.811 | 0.065 | 180 |
| 3 | 0.681 | 0.19 | 58.4 |

## In these collections

- [Teal and orange swatches](https://grabient.com/teal-and-orange-swatches)

## Other forms

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