# Cobalt blue, yellow and turquoise color palette

The Cobalt blue, yellow and turquoise color palette brings together blue, pale green, gold, and teal. The colors span a moderate 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 green.

- Also called: Blue, gray, yellow and teal angular swatches
- Seed: `kUfWy0dguyWq-u1TpkvA`
- Page: https://grabient.com/kUfWy0dguyWq-u1TpkvA?style=angularSwatches&steps=4&angle=135
- Drawn as: angular swatches, 4 steps, 135 degrees
- Kinds: light center, vivid, light, multicolor
- Hues: wide
- Contrast of its darkest and lightest colors: 5.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 | `#0761b2` | `oklch(49.21% 0.1488 253.12)` | Les Cavaliers Beach | white, 6.2 to 1 |
| 2 | `#deedd9` | `oklch(92.91% 0.0317 137.94)` | Ghost Lichen | black, 17.2 to 1 |
| 3 | `#e7ca0c` | `oklch(83.86% 0.1722 98.84)` | Golden Crescent | black, 12.8 to 1 |
| 4 | `#23a4aa` | `oklch(65.75% 0.1047 199.23)` | Aare River Brienz | black, 6.9 to 1 |

## CSS

```css
background: conic-gradient(from 135deg, #0761b2 0.000% 25.000%, #deedd9 25.000% 50.000%, #e7ca0c 50.000% 75.000%, #23a4aa 75.000% 100.000%);
background: conic-gradient(from 135deg, oklch(49.21% 0.1488 253.12) 0.000% 25.000%, oklch(92.91% 0.0317 137.94) 25.000% 50.000%, oklch(83.86% 0.1722 98.84) 50.000% 75.000%, oklch(65.75% 0.1047 199.23) 75.000% 100.000%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.492 | 0.149 | 253.1 |
| 2 | 0.929 | 0.032 | 137.9 |
| 3 | 0.839 | 0.172 | 98.8 |
| 4 | 0.657 | 0.105 | 199.2 |

## In these collections

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

## Other forms

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