# Teal and gold summer palette

The Teal and gold summer palette brings together pale green, teal, blue, and gold. The colors span a broad lightness range, combining moderate color with clear contrast. Its light and open character suits seasonal campaigns and event graphics. Its darkest tone is blue, and its lightest tone is pale green.

- Also called: Light blue, teal, blue and orange linear swatches
- Seed: `kW9h996S-_terQ9AqMObjKtg`
- Page: https://grabient.com/kW9h996S-_terQ9AqMObjKtg?style=linearSwatches&steps=5&angle=180
- Drawn as: linear swatches, 5 steps, 180 degrees
- Kinds: dark center, pastel, cool
- Hues: analogous
- 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 | `#d8fff4` | `oklch(96.85% 0.0427 176.48)` | Candied Snow | black, 19.4 to 1 |
| 2 | `#54e2c0` | `oklch(82.68% 0.1309 174.37)` | Ocean in a Bowl | black, 12.9 to 1 |
| 3 | `#00afc0` | `oklch(68.90% 0.1182 207.13)` | Deep Turquoise | black, 7.8 to 1 |
| 4 | `#026d9d` | `oklch(50.79% 0.1116 237.78)` | Disarm | white, 5.7 to 1 |
| 5 | `#ffca60` | `oklch(86.61% 0.1364 82.44)` | Smiley Face | black, 13.8 to 1 |

## CSS

```css
background: linear-gradient(180deg, #d8fff4 0.000% 20.000%, #54e2c0 20.000% 40.000%, #00afc0 40.000% 60.000%, #026d9d 60.000% 80.000%, #ffca60 80.000% 100.000%);
background: linear-gradient(180deg, oklch(96.85% 0.0427 176.48) 0.000% 20.000%, oklch(82.68% 0.1309 174.37) 20.000% 40.000%, oklch(68.90% 0.1182 207.13) 40.000% 60.000%, oklch(50.79% 0.1116 237.78) 60.000% 80.000%, oklch(86.61% 0.1364 82.44) 80.000% 100.000%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.969 | 0.043 | 176.5 |
| 2 | 0.827 | 0.131 | 174.4 |
| 3 | 0.689 | 0.119 | 207.1 |
| 4 | 0.508 | 0.112 | 237.8 |
| 5 | 0.866 | 0.139 | 82.4 |

## In these collections

- [Summer swatches](https://grabient.com/summer-swatches)

## Other forms

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