# Ochre and teal happy palette

The Ochre and teal happy palette brings together gold, pale yellow, and blue. The colors span a moderate lightness range, combining moderate color with clear contrast. Its light and open character suits brand mood boards and editorial graphics. Its darkest tone is blue, and its lightest tone is pale yellow.

- Also called: Yellow, beige and blue angular swatches
- Seed: `kUzXBFdZC_z2vUvamDug`
- Page: https://grabient.com/kUzXBFdZC_z2vUvamDug?style=angularSwatches&steps=4&angle=315
- Drawn as: angular swatches, 4 steps, 315 degrees
- Hues: complementary
- 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 | `#dcbf2e` | `oklch(80.71% 0.1543 97.03)` | Durian Yellow | black, 11.5 to 1 |
| 2 | `#efe7c5` | `oklch(92.52% 0.0455 95.97)` | Ethereal Green | black, 16.8 to 1 |
| 3 | `#275ea6` | `oklch(48.43% 0.1295 256.60)` | Miracle at Wrigley | white, 6.4 to 1 |
| 4 | `#73acbf` | `oklch(71.26% 0.0661 220.67)` | Blue Eye Samurai | black, 8.4 to 1 |

## CSS

```css
background: conic-gradient(from 315deg, #dcbf2e 0.000% 25.000%, #efe7c5 25.000% 50.000%, #275ea6 50.000% 75.000%, #73acbf 75.000% 100.000%);
background: conic-gradient(from 315deg, oklch(80.71% 0.1543 97.03) 0.000% 25.000%, oklch(92.52% 0.0455 95.97) 25.000% 50.000%, oklch(48.43% 0.1295 256.60) 50.000% 75.000%, oklch(71.26% 0.0661 220.67) 75.000% 100.000%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.807 | 0.154 | 97 |
| 2 | 0.925 | 0.045 | 96 |
| 3 | 0.484 | 0.13 | 256.6 |
| 4 | 0.713 | 0.066 | 220.7 |

## In these collections

- [Happy swatches](https://grabient.com/happy-swatches)

## Other forms

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