# Teal and yellow color palette

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

- Also called: Blue, light blue, orange and yellow angular swatches
- Seed: `kUk5Gnap1C9u6Kv1L0MA`
- Page: https://grabient.com/kUk5Gnap1C9u6Kv1L0MA?style=angularSwatches&steps=4&angle=225
- Drawn as: angular swatches, 4 steps, 225 degrees
- Kinds: vivid
- Hues: complementary
- Contrast of its darkest and lightest colors: 3.3 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 | `#0084b7` | `oklch(57.88% 0.1225 234.86)` | Lucario Blue | black, 4.9 to 1 |
| 2 | `#accbff` | `oklch(83.86% 0.0799 260.21)` | Night Snow | black, 12.7 to 1 |
| 3 | `#d29a00` | `oklch(72.05% 0.1482 82.66)` | Leopard | black, 8.3 to 1 |
| 4 | `#ebec82` | `oklch(92.13% 0.1295 109.09)` | Pineapple Perfume | black, 16.9 to 1 |

## CSS

```css
background: conic-gradient(from 225deg, #0084b7 0.000% 25.000%, #accbff 25.000% 50.000%, #d29a00 50.000% 75.000%, #ebec82 75.000% 100.000%);
background: conic-gradient(from 225deg, oklch(57.88% 0.1225 234.86) 0.000% 25.000%, oklch(83.86% 0.0799 260.21) 25.000% 50.000%, oklch(72.05% 0.1482 82.66) 50.000% 75.000%, oklch(92.13% 0.1295 109.09) 75.000% 100.000%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.579 | 0.2 | 234.8 |
| 2 | 0.839 | 0.08 | 260.2 |
| 3 | 0.72 | 0.16 | 82.7 |
| 4 | 0.921 | 0.13 | 109.1 |

## In these collections

- [Blue and yellow swatches](https://grabient.com/blue-and-yellow-swatches)
- [Primary color swatches](https://grabient.com/primary-color-swatches)

## Other forms

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