# Champagne and blue beach palette

The Champagne and blue beach palette brings together pale orange, off-white, light blue, and blue. The colors span a narrow lightness range, combining moderate color with gentle contrast. Its light and open character suits travel posters and environmental mood boards. Its darkest tone is blue, and its lightest tone is pale orange.

- Also called: Pastel duotone beige to blue linear gradient
- Seed: `kW8DU9dAhDG8NTZrIEFZyg_Y`
- Page: https://grabient.com/kW8DU9dAhDG8NTZrIEFZyg_Y?steps=5&angle=0
- Drawn as: linear gradient, 5 steps, 0 degrees
- Kinds: pastel, light
- Hues: complementary
- Contrast of its darkest and lightest colors: 1.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 | `#ffebc0` | `oklch(94.49% 0.0601 85.79)` | Urnebes Beige | black, 17.8 to 1 |
| 2 | `#e2e4d4` | `oklch(91.34% 0.0220 112.20)` | Yoga Daze | black, 16.3 to 1 |
| 3 | `#bedbe8` | `oklch(87.40% 0.0358 227.39)` | Pacific Breeze | black, 14.4 to 1 |
| 4 | `#95d4ff` | `oklch(84.25% 0.0882 239.01)` | Long Island Sound | black, 13.1 to 1 |
| 5 | `#74cdfe` | `oklch(81.10% 0.1102 234.78)` | Bubbly Barracuda | black, 11.8 to 1 |

## CSS

```css
background: linear-gradient(0deg, #ffebc0 0.0%, #e2e4d4 25.0%, #bedbe8 50.0%, #95d4ff 75.0%, #74cdfe 100.0%);
background: linear-gradient(0deg in oklch, oklch(94.49% 0.0601 85.79) 0.0%, oklch(91.34% 0.0220 112.20) 25.0%, oklch(87.40% 0.0358 227.39) 50.0%, oklch(84.25% 0.0882 239.01) 75.0%, oklch(81.10% 0.1102 234.78) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.945 | 0.073 | 85.8 |
| 2 | 0.913 | 0.022 | 112.2 |
| 3 | 0.874 | 0.036 | 227.4 |
| 4 | 0.843 | 0.088 | 239 |
| 5 | 0.811 | 0.11 | 234.8 |

## In these collections

- [Beach gradients](https://grabient.com/beach-gradients)

## Other forms

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