# Deep Cyan Blue Bright Passage

These 4 diagonal bands move through deep cyan blue, bright teal, pale yellow-green, and bright orange. The separated colors give backgrounds, type, borders, and accents distinct assignments. Use it for bold Funhaus graphics, playful branding, geometric editorial layouts, or energetic interface backgrounds with clear color roles.

- Also called: Navy, blue, yellow and orange linear swatches
- Seed: `kURB-fWqw93NMNXcRDfg`
- Page: https://grabient.com/kURB-fWqw93NMNXcRDfg?style=linearSwatches&steps=4&angle=210
- Drawn as: linear swatches, 4 steps, 210 degrees
- Kinds: light center, vivid, multicolor
- Hues: wide
- Contrast of its darkest and lightest colors: 11.7 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 | `#092a35` | `oklch(26.77% 0.0427 223.59)` | Black Chasm | white, 15 to 1 |
| 2 | `#05b7c7` | `oklch(71.26% 0.1213 205.63)` | Lago Blue | black, 8.6 to 1 |
| 3 | `#d8f000` | `oklch(90.55% 0.2085 116.86)` | Stadium Grass | black, 16.3 to 1 |
| 4 | `#ff7b19` | `oklch(72.44% 0.1866 49.23)` | Orange Popsicle | black, 8 to 1 |

## CSS

```css
background: linear-gradient(210deg, #092a35 0.000% 25.000%, #05b7c7 25.000% 50.000%, #d8f000 50.000% 75.000%, #ff7b19 75.000% 100.000%);
background: linear-gradient(210deg, oklch(26.77% 0.0427 223.59) 0.000% 25.000%, oklch(71.26% 0.1213 205.63) 25.000% 50.000%, oklch(90.55% 0.2085 116.86) 50.000% 75.000%, oklch(72.44% 0.1866 49.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.268 | 0.043 | 223.6 |
| 2 | 0.713 | 0.121 | 205.6 |
| 3 | 0.906 | 0.209 | 116.9 |
| 4 | 0.724 | 0.187 | 49.2 |

## In these collections

- [Funhaus](https://grabient.com/funhaus)

## Other forms

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