# Copper and Electric Aqua

These vertical bands move through vivid teal, deep red, teal, and deep orange. The complete visible route keeps the collection’s named color relationship clear while providing distinct light and dark areas for type, marks, and framing. Use these vertical bands for posters, presentation covers, packaging, or interface backgrounds that need coordinated color roles and a strong focal transition.

- Also called: Cyan, teal and brown linear swatches
- Seed: `kU2mSPHxusj-dUyup6zg`
- Page: https://grabient.com/kU2mSPHxusj-dUyup6zg?style=linearSwatches&steps=4
- Drawn as: linear swatches, 4 steps, 90 degrees
- Kinds: dark center, vivid
- Hues: wide
- Contrast of its darkest and lightest colors: 11.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 | `#33ebf5` | `oklch(85.83% 0.1378 201.09)` | Sparky Blue | black, 14.3 to 1 |
| 2 | `#3d0f02` | `oklch(24.41% 0.0758 37.30)` | Red Bean | white, 16.6 to 1 |
| 3 | `#147175` | `oklch(50.00% 0.0799 200.04)` | Scaly Green | white, 5.7 to 1 |
| 4 | `#6c2407` | `oklch(36.61% 0.1089 39.41)` | Centipede Brown | white, 11.1 to 1 |

## CSS

```css
background: linear-gradient(90deg, #33ebf5 0.000% 25.000%, #3d0f02 25.000% 50.000%, #147175 50.000% 75.000%, #6c2407 75.000% 100.000%);
background: linear-gradient(90deg, oklch(85.83% 0.1378 201.09) 0.000% 25.000%, oklch(24.41% 0.0758 37.30) 25.000% 50.000%, oklch(50.00% 0.0799 200.04) 50.000% 75.000%, oklch(36.61% 0.1089 39.41) 75.000% 100.000%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.858 | 0.138 | 201.1 |
| 2 | 0.244 | 0.076 | 37.3 |
| 3 | 0.5 | 0.08 | 200 |
| 4 | 0.366 | 0.109 | 39.4 |

## In these collections

- [Complementary swatches](https://grabient.com/complementary-swatches)

## Other forms

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