# Beach Ball Notebook

The Ochre and orange color palette brings together yellow, blue, orange, teal, and pale yellow. The colors span a moderate lightness range, combining strong color with gentle contrast. Its light and open character suits game interface concepts and stream graphics. Its darkest tone is blue, and its lightest tone is pale yellow.

- Also called: Rainbow from yellow to beige linear swatches
- Seed: `kW5YNHTtrTd_MUbjPc_-I60Q`
- Page: https://grabient.com/kW5YNHTtrTd_MUbjPc_-I60Q?style=linearSwatches&steps=5
- Drawn as: linear swatches, 5 steps, 90 degrees
- Kinds: dark center, vivid, rainbow
- Hues: multi-hue
- Contrast of its darkest and lightest colors: 3.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 | `#fbe026` | `oklch(90.16% 0.1805 99.84)` | Sun Yellow | black, 15.7 to 1 |
| 2 | `#467aff` | `oklch(61.81% 0.2054 264.70)` | Lightish Blue | black, 5.5 to 1 |
| 3 | `#ff8c2b` | `oklch(75.20% 0.1715 54.76)` | Instant Orange | black, 9 to 1 |
| 4 | `#00d2ca` | `oklch(77.95% 0.1346 190.02)` | Blue Martina | black, 11 to 1 |
| 5 | `#f8eed0` | `oklch(94.88% 0.0400 91.74)` | Yellow Beam | black, 18.1 to 1 |

## CSS

```css
background: linear-gradient(90deg, #fbe026 0.000% 20.000%, #467aff 20.000% 40.000%, #ff8c2b 40.000% 60.000%, #00d2ca 60.000% 80.000%, #f8eed0 80.000% 100.000%);
background: linear-gradient(90deg, oklch(90.16% 0.1805 99.84) 0.000% 20.000%, oklch(61.81% 0.2054 264.70) 20.000% 40.000%, oklch(75.20% 0.1715 54.76) 40.000% 60.000%, oklch(77.95% 0.1346 190.02) 60.000% 80.000%, oklch(94.88% 0.0400 91.74) 80.000% 100.000%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.902 | 0.181 | 99.8 |
| 2 | 0.618 | 0.249 | 264.7 |
| 3 | 0.752 | 0.209 | 414.8 |
| 4 | 0.78 | 0.169 | 550 |
| 5 | 0.949 | 0.04 | 451.7 |

## In these collections

- [Primary color swatches](https://grabient.com/primary-color-swatches)
- [Back to school swatches](https://grabient.com/back-to-school-swatches)
- [Neon swatches](https://grabient.com/neon-swatches)
- [Bright swatches](https://grabient.com/bright-swatches)

## Other forms

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