# Midnight blue and marigold candles

Midnight navy and a clear medium blue lead into marigold orange and candle yellow across four diagonal bands. The two dark cool swatches give the warm pair a strong sense of light. This Day of the Dead palette works for evening celebration posters, ofrenda illustrations, and invitations inspired by glowing candles.

- Also called: Navy, blue, orange and yellow linear swatches
- Seed: `kUOibCtiW9to31DsN0Kg`
- Page: https://grabient.com/kUOibCtiW9to31DsN0Kg?style=linearSwatches&steps=4&angle=45
- Drawn as: linear swatches, 4 steps, 45 degrees
- Kinds: dark to light, vivid
- Hues: complementary
- Contrast of its darkest and lightest colors: 10.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 | `#151a35` | `oklch(22.83% 0.0524 273.52)` | Dark Knight | white, 17 to 1 |
| 2 | `#214f85` | `oklch(42.52% 0.1033 254.49)` | Clear Night Sky | white, 8.3 to 1 |
| 3 | `#e08a16` | `oklch(70.87% 0.1530 65.69)` | Sumac Dyed | black, 7.8 to 1 |
| 4 | `#f6c844` | `oklch(85.04% 0.1516 88.94)` | Sunny Mood | black, 13.2 to 1 |

## CSS

```css
background: linear-gradient(45deg, #151a35 0.000% 25.000%, #214f85 25.000% 50.000%, #e08a16 50.000% 75.000%, #f6c844 75.000% 100.000%);
background: linear-gradient(45deg, oklch(22.83% 0.0524 273.52) 0.000% 25.000%, oklch(42.52% 0.1033 254.49) 25.000% 50.000%, oklch(70.87% 0.1530 65.69) 50.000% 75.000%, oklch(85.04% 0.1516 88.94) 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.052 | 273.5 |
| 2 | 0.425 | 0.103 | 254.5 |
| 3 | 0.709 | 0.153 | 425.7 |
| 4 | 0.85 | 0.152 | 448.9 |

## In these collections

- [Day of the Dead swatches](https://grabient.com/day-of-the-dead-swatches)

## Other forms

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