# Champagne and teal summer palette

The Champagne and teal summer palette brings together pale yellow, gold, light teal, teal, and blue. The colors span a moderate 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 yellow.

- Also called: Beige and blue angular swatches
- Seed: `kW9C9Ebyk-2igTDYKMIw6NCg`
- Page: https://grabient.com/kW9C9Ebyk-2igTDYKMIw6NCg?style=angularSwatches&steps=5&angle=135
- Drawn as: angular swatches, 5 steps, 135 degrees
- Kinds: light to dark, pastel, light
- Hues: split-complementary
- Contrast of its darkest and lightest colors: 4.5 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 | `#fff3c1` | `oklch(96.06% 0.0648 95.62)` | Lazy Summer Day | black, 18.7 to 1 |
| 2 | `#f7d17b` | `oklch(87.40% 0.1130 86.11)` | Popcorn | black, 14.3 to 1 |
| 3 | `#7dd8d1` | `oklch(82.28% 0.0882 189.68)` | Isle Royale | black, 12.5 to 1 |
| 4 | `#27afc1` | `oklch(69.29% 0.1116 208.70)` | Antigua Blue | black, 7.9 to 1 |
| 5 | `#1e769a` | `oklch(53.15% 0.0965 230.89)` | Bateau | white, 5.1 to 1 |

## CSS

```css
background: conic-gradient(from 135deg, #fff3c1 0.000% 20.000%, #f7d17b 20.000% 40.000%, #7dd8d1 40.000% 60.000%, #27afc1 60.000% 80.000%, #1e769a 80.000% 100.000%);
background: conic-gradient(from 135deg, oklch(96.06% 0.0648 95.62) 0.000% 20.000%, oklch(87.40% 0.1130 86.11) 20.000% 40.000%, oklch(82.28% 0.0882 189.68) 40.000% 60.000%, oklch(69.29% 0.1116 208.70) 60.000% 80.000%, oklch(53.15% 0.0965 230.89) 80.000% 100.000%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.961 | 0.065 | 95.6 |
| 2 | 0.874 | 0.113 | 86.1 |
| 3 | 0.823 | 0.088 | 189.7 |
| 4 | 0.693 | 0.112 | 208.7 |
| 5 | 0.531 | 0.096 | 230.9 |

## In these collections

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

## Other forms

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