# Near-Black Blue Pale Gold Passage

These 4 diagonal bands move through near-black blue, blue, bright magenta, and pale gold. 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, pink and yellow linear swatches
- Seed: `kULCjCPdq_VhjyD4QM7g`
- Page: https://grabient.com/kULCjCPdq_VhjyD4QM7g?style=linearSwatches&steps=4&angle=20
- Drawn as: linear swatches, 4 steps, 20 degrees
- Kinds: dark to light, vivid
- Hues: analogous
- Contrast of its darkest and lightest colors: 16.4 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 | `#090d28` | `oklch(17.32% 0.0551 272.81)` | Void | white, 19.1 to 1 |
| 2 | `#2740e8` | `oklch(48.43% 0.2494 267.53)` | Palatinate Blue | white, 7 to 1 |
| 3 | `#fc35d7` | `oklch(69.29% 0.2742 337.27)` | Razzle Dazzle Rose | black, 6.6 to 1 |
| 4 | `#fff261` | `oklch(94.49% 0.1624 104.09)` | Kihada Yellow | black, 18 to 1 |

## CSS

```css
background: linear-gradient(20deg, #090d28 0.000% 25.000%, #2740e8 25.000% 50.000%, #fc35d7 50.000% 75.000%, #fff261 75.000% 100.000%);
background: linear-gradient(20deg, oklch(17.32% 0.0551 272.81) 0.000% 25.000%, oklch(48.43% 0.2494 267.53) 25.000% 50.000%, oklch(69.29% 0.2742 337.27) 50.000% 75.000%, oklch(94.49% 0.1624 104.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.173 | 0.055 | 272.8 |
| 2 | 0.484 | 0.249 | 267.5 |
| 3 | 0.693 | 0.274 | 337.3 |
| 4 | 0.945 | 0.178 | 464.1 |

## In these collections

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

## Other forms

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