# Cobalt Tangerine Rings

The Blue blue and orange palette brings together blue 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 orange.

- Also called: Vivid blue, light blue and orange radial swatches
- Seed: `kWWXG9REK_NuuvxmNdRVUS9Y`
- Page: https://grabient.com/kWWXG9REK_NuuvxmNdRVUS9Y?style=radialSwatches&steps=5&angle=0
- Drawn as: radial swatches, 5 steps, 0 degrees
- Kinds: light center, vivid
- 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 | `#142e8a` | `oklch(35.04% 0.1557 265.78)` | US Air Force Blue | white, 11.7 to 1 |
| 2 | `#2067d5` | `oklch(53.54% 0.1833 259.44)` | Flickr Blue | white, 5.3 to 1 |
| 3 | `#66a9f2` | `oklch(72.05% 0.1281 252.04)` | Cerulean | black, 8.5 to 1 |
| 4 | `#ffa94e` | `oklch(80.31% 0.1458 64.30)` | Five Star | black, 11 to 1 |
| 5 | `#ef6418` | `oklch(66.93% 0.1888 43.16)` | Fuego Nuevo | black, 6.4 to 1 |

## CSS

```css
background: radial-gradient(circle at 50% 50%, #142e8a 0.000% 20.000%, #2067d5 20.000% 40.000%, #66a9f2 40.000% 60.000%, #ffa94e 60.000% 80.000%, #ef6418 80.000% 100.000%);
background: radial-gradient(circle at 50% 50%, oklch(35.04% 0.1557 265.78) 0.000% 20.000%, oklch(53.54% 0.1833 259.44) 20.000% 40.000%, oklch(72.05% 0.1281 252.04) 40.000% 60.000%, oklch(80.31% 0.1458 64.30) 60.000% 80.000%, oklch(66.93% 0.1888 43.16) 80.000% 100.000%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.35 | 0.156 | 265.8 |
| 2 | 0.535 | 0.183 | 259.4 |
| 3 | 0.72 | 0.128 | 252 |
| 4 | 0.803 | 0.147 | 424.3 |
| 5 | 0.669 | 0.189 | 403.2 |

## In these collections

- [Blue and orange swatches](https://grabient.com/blue-and-orange-swatches)

## Other forms

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