# Cobalt blue, champagne and orange bright palette

The Cobalt blue, champagne and orange bright palette brings together blue, teal, pale orange, gold, and orange. The colors span a broad lightness range, combining strong color with clear contrast. Its bold and dramatic character suits brand mood boards and editorial graphics. Its darkest tone is blue, and its lightest tone is pale orange.

- Also called: Blue, beige, yellow and orange linear swatches
- Seed: `kWeKG70yi4viOsfnPMFVUS6I`
- Page: https://grabient.com/kWeKG70yi4viOsfnPMFVUS6I?style=linearSwatches&steps=5
- Drawn as: linear swatches, 5 steps, 90 degrees
- Kinds: light center, vivid, multicolor
- Hues: complementary
- Contrast of its darkest and lightest colors: 6.1 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 | `#1248d5` | `oklch(47.24% 0.2219 263.67)` | Flying Fish Blue | white, 7.1 to 1 |
| 2 | `#00a4ae` | `oklch(65.36% 0.1112 202.38)` | Aare River Brienz | black, 6.8 to 1 |
| 3 | `#fbedd0` | `oklch(94.88% 0.0400 84.02)` | Summer Moon | black, 18 to 1 |
| 4 | `#e2bf00` | `oklch(81.10% 0.1667 95.65)` | Lilikoi | black, 11.6 to 1 |
| 5 | `#ec6800` | `oklch(66.93% 0.1851 47.02)` | Epicurean Orange | black, 6.5 to 1 |

## CSS

```css
background: linear-gradient(90deg, #1248d5 0.000% 20.000%, #00a4ae 20.000% 40.000%, #fbedd0 40.000% 60.000%, #e2bf00 60.000% 80.000%, #ec6800 80.000% 100.000%);
background: linear-gradient(90deg, oklch(47.24% 0.2219 263.67) 0.000% 20.000%, oklch(65.36% 0.1112 202.38) 20.000% 40.000%, oklch(94.88% 0.0400 84.02) 40.000% 60.000%, oklch(81.10% 0.1667 95.65) 60.000% 80.000%, oklch(66.93% 0.1851 47.02) 80.000% 100.000%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.472 | 0.222 | 263.7 |
| 2 | 0.654 | 0.112 | 202.4 |
| 3 | 0.949 | 0.04 | 84 |
| 4 | 0.811 | 0.167 | 95.6 |
| 5 | 0.669 | 0.189 | 47 |

## In these collections

- [Bright swatches](https://grabient.com/bright-swatches)

## Other forms

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