# Deep cyan, rose and orange color palette

The Deep cyan, rose and orange color palette brings together dark blue, teal, magenta, red, and orange. The colors span a broad lightness range, combining strong color with clear contrast. Its bold and dramatic character suits travel posters and environmental mood boards. Its darkest tone is dark blue, and its lightest tone is orange.

- Also called: Navy, teal, magenta and peach radial swatches
- Seed: `kWRhyfshU9sRCUbVw8F6C9GY`
- Page: https://grabient.com/kWRhyfshU9sRCUbVw8F6C9GY?style=radialSwatches&steps=5&angle=0
- Drawn as: radial swatches, 5 steps, 0 degrees
- Kinds: dark to light, vivid, multicolor
- Hues: complementary
- Contrast of its darkest and lightest colors: 8.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 | `#0f2c36` | `oklch(27.56% 0.0386 224.30)` | Black Chasm | white, 14.6 to 1 |
| 2 | `#164f55` | `oklch(39.37% 0.0579 205.28)` | Iron Teal | white, 9.2 to 1 |
| 3 | `#b82f72` | `oklch(53.54% 0.1819 355.33)` | Pink Shadow | white, 5.7 to 1 |
| 4 | `#f05a80` | `oklch(67.32% 0.1860 8.02)` | Watermelon Juice | black, 6.4 to 1 |
| 5 | `#ffb065` | `oklch(81.89% 0.1295 62.97)` | Mango Salsa | black, 11.6 to 1 |

## CSS

```css
background: radial-gradient(circle at 50% 50%, #0f2c36 0.000% 20.000%, #164f55 20.000% 40.000%, #b82f72 40.000% 60.000%, #f05a80 60.000% 80.000%, #ffb065 80.000% 100.000%);
background: radial-gradient(circle at 50% 50%, oklch(27.56% 0.0386 224.30) 0.000% 20.000%, oklch(39.37% 0.0579 205.28) 20.000% 40.000%, oklch(53.54% 0.1819 355.33) 40.000% 60.000%, oklch(67.32% 0.1860 8.02) 60.000% 80.000%, oklch(81.89% 0.1295 62.97) 80.000% 100.000%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.276 | 0.039 | 224.3 |
| 2 | 0.394 | 0.058 | 205.3 |
| 3 | 0.535 | 0.182 | 355.3 |
| 4 | 0.673 | 0.186 | 368 |
| 5 | 0.819 | 0.13 | 423 |

## In these collections

- [Bold swatches](https://grabient.com/bold-swatches)
- [Tropical swatches](https://grabient.com/tropical-swatches)
- [Summer swatches](https://grabient.com/summer-swatches)
- [Split complementary swatches](https://grabient.com/split-complementary-swatches)

## Other forms

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