# Midnight, Fuchsia, Aqua and Acid Yellow

The Midnight, Fuchsia, Aqua and Acid Yellow brings together dark purple, magenta, teal, and yellow. The colors span a very broad lightness range, combining strong color with high contrast. Its bold and dramatic character suits brand mood boards and editorial graphics. Its darkest tone is dark purple, and its lightest tone is yellow.

- Also called: Black, pink, teal and yellow linear swatches
- Seed: `kUMhzT0dZG2Qwq5yQzcA`
- Page: https://grabient.com/kUMhzT0dZG2Qwq5yQzcA?style=linearSwatches&steps=4
- Drawn as: linear swatches, 4 steps, 90 degrees
- Kinds: dark to light, vivid, multicolor
- Hues: complementary
- Contrast of its darkest and lightest colors: 13.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 | `#171124` | `oklch(19.69% 0.0386 297.42)` | Corbeau | white, 18.3 to 1 |
| 2 | `#f12f92` | `oklch(64.17% 0.2370 355.54)` | Prickly Pink | black, 5.5 to 1 |
| 3 | `#28d5c2` | `oklch(78.74% 0.1337 183.29)` | Turquoise Panic | black, 11.3 to 1 |
| 4 | `#e9e52c` | `oklch(89.76% 0.1846 108.26)` | Birdie | black, 15.7 to 1 |

## CSS

```css
background: linear-gradient(90deg, #171124 0.000% 25.000%, #f12f92 25.000% 50.000%, #28d5c2 50.000% 75.000%, #e9e52c 75.000% 100.000%);
background: linear-gradient(90deg, oklch(19.69% 0.0386 297.42) 0.000% 25.000%, oklch(64.17% 0.2370 355.54) 25.000% 50.000%, oklch(78.74% 0.1337 183.29) 50.000% 75.000%, oklch(89.76% 0.1846 108.26) 75.000% 100.000%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.197 | 0.039 | 297.4 |
| 2 | 0.642 | 0.237 | 355.5 |
| 3 | 0.787 | 0.134 | 183.3 |
| 4 | 0.898 | 0.185 | 108.3 |

## In these collections

- [Surreal colors](https://grabient.com/surreal-colors)

## Other forms

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