# Near-Black Cyan Blue Pale Wedges

These 4 angular wedges move through near-black cyan blue, bright cyan blue, violet, and pale gold. The separated colors give backgrounds, type, borders, and accents distinct assignments. Use it for digital fashion graphics, music artwork, event posters, or bold interface backgrounds with a glossy electronic mood.

- Also called: Navy, blue, purple and yellow angular swatches
- Seed: `kULCOxWT4_UjkxnuwNIA`
- Page: https://grabient.com/kULCOxWT4_UjkxnuwNIA?style=angularSwatches&steps=4&angle=315
- Drawn as: angular swatches, 4 steps, 315 degrees
- Kinds: vivid
- Hues: two-hue
- Contrast of its darkest and lightest colors: 12.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 | `#001124` | `oklch(17.34% 0.0481 249.19)` | Kuretake Black Manga | white, 19 to 1 |
| 2 | `#09a7ff` | `oklch(70.08% 0.1699 243.62)` | Protoss Pylon | black, 7.9 to 1 |
| 3 | `#932eff` | `oklch(57.09% 0.2760 298.58)` | Sugar Grape | white, 5.1 to 1 |
| 4 | `#ffcf02` | `oklch(87.01% 0.1778 91.80)` | Fluorescent Orange | black, 14.1 to 1 |

## CSS

```css
background: conic-gradient(from 315deg, #001124 0.000% 25.000%, #09a7ff 25.000% 50.000%, #932eff 50.000% 75.000%, #ffcf02 75.000% 100.000%);
background: conic-gradient(from 315deg, oklch(17.34% 0.0481 249.19) 0.000% 25.000%, oklch(70.08% 0.1699 243.62) 25.000% 50.000%, oklch(57.09% 0.2760 298.58) 50.000% 75.000%, oklch(87.01% 0.1778 91.80) 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.048 | 248.9 |
| 2 | 0.701 | 0.171 | 243.6 |
| 3 | 0.571 | 0.277 | 298.6 |
| 4 | 0.87 | 0.178 | 451.8 |

## In these collections

- [Glitchy glam](https://grabient.com/glitchy-glam)

## Other forms

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