# Blue and Scarlet Flash

The Near-black, magenta and blush color palette brings together dark blue, blue, red, and pale red. 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 blue, and its lightest tone is pale red.

- Also called: Black, blue, red and light pink angular swatches
- Seed: `kUJhK8ydc_9BQTn2Cz_g`
- Page: https://grabient.com/kUJhK8ydc_9BQTn2Cz_g?style=angularSwatches&steps=4&angle=225
- Drawn as: angular swatches, 4 steps, 225 degrees
- Kinds: dark to light, vivid
- Hues: wide
- Contrast of its darkest and lightest colors: 15.8 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 | `#060b16` | `oklch(14.96% 0.0248 265.08)` | Dark Rift | white, 19.6 to 1 |
| 2 | `#3569ff` | `oklch(57.87% 0.2299 265.08)` | Gentian Flower | black, 4.6 to 1 |
| 3 | `#f13933` | `oklch(62.99% 0.2205 27.66)` | Trial by Fire | black, 5.3 to 1 |
| 4 | `#fbe1dd` | `oklch(92.91% 0.0303 27.66)` | Peachy Ethereal | black, 16.8 to 1 |

## CSS

```css
background: conic-gradient(from 225deg, #060b16 0.000% 25.000%, #3569ff 25.000% 50.000%, #f13933 50.000% 75.000%, #fbe1dd 75.000% 100.000%);
background: conic-gradient(from 225deg, oklch(14.96% 0.0248 265.08) 0.000% 25.000%, oklch(57.87% 0.2299 265.08) 25.000% 50.000%, oklch(62.99% 0.2205 27.66) 50.000% 75.000%, oklch(92.91% 0.0303 27.66) 75.000% 100.000%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.15 | 0.025 | 265.1 |
| 2 | 0.579 | 0.24 | 265.1 |
| 3 | 0.63 | 0.22 | 387.7 |
| 4 | 0.929 | 0.03 | 387.7 |

## In these collections

- [Bold swatches](https://grabient.com/bold-swatches)
- [Primary color swatches](https://grabient.com/primary-color-swatches)
- [Energetic swatches](https://grabient.com/energetic-swatches)

## Other forms

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