# Deep Cyan Blue Pale Wedges

These 4 angular wedges move through deep cyan blue, bright cyan blue, bright teal, 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, teal and yellow angular swatches
- Seed: `kUOju3Uka_Ws6tr2STgg`
- Page: https://grabient.com/kUOju3Uka_Ws6tr2STgg?style=angularSwatches&steps=4&angle=315
- Drawn as: angular swatches, 4 steps, 315 degrees
- Kinds: dark to light, vivid, cool
- Hues: wide
- Contrast of its darkest and lightest colors: 14.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 | `#001b41` | `oklch(22.83% 0.0813 257.34)` | Maastricht Blue | white, 17 to 1 |
| 2 | `#008ffe` | `oklch(64.57% 0.1936 252.07)` | Clear Chill | black, 6.3 to 1 |
| 3 | `#00ecc3` | `oklch(84.25% 0.1605 173.86)` | Fake Jade | black, 13.8 to 1 |
| 4 | `#f5f000` | `oklch(92.91% 0.2007 108.34)` | Triforce | black, 17.3 to 1 |

## CSS

```css
background: conic-gradient(from 315deg, #001b41 0.000% 25.000%, #008ffe 25.000% 50.000%, #00ecc3 50.000% 75.000%, #f5f000 75.000% 100.000%);
background: conic-gradient(from 315deg, oklch(22.83% 0.0813 257.34) 0.000% 25.000%, oklch(64.57% 0.1936 252.07) 25.000% 50.000%, oklch(84.25% 0.1605 173.86) 50.000% 75.000%, oklch(92.91% 0.2007 108.34) 75.000% 100.000%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.228 | 0.081 | 257.3 |
| 2 | 0.646 | 0.194 | 252.1 |
| 3 | 0.843 | 0.161 | 173.9 |
| 4 | 0.929 | 0.201 | 108.3 |

## In these collections

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

## Other forms

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