# Blue Pencil, Red Ink

The Cobalt blue and mauve back to school brings together blue, red, and pale red. The colors span a broad lightness range, combining strong color with clear contrast. Its bold and dramatic character suits stationery systems and print layouts. Its darkest tone is red, and its lightest tone is pale red.

- Also called: Blue, red and gray angular swatches
- Seed: `kUjIO1zcHPPYJP-1iT_g`
- Page: https://grabient.com/kUjIO1zcHPPYJP-1iT_g?style=angularSwatches&steps=4&angle=225
- Drawn as: angular swatches, 4 steps, 225 degrees
- Kinds: light center, vivid, warm
- Hues: wide
- Contrast of its darkest and lightest colors: 6.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 | `#066fd8` | `oklch(55.12% 0.1805 255.23)` | Flickr Blue | white, 4.9 to 1 |
| 2 | `#da4a4a` | `oklch(61.02% 0.1805 24.16)` | Re-Entry | black, 5 to 1 |
| 3 | `#f8e2e0` | `oklch(92.91% 0.0248 24.16)` | Delicacy | black, 16.8 to 1 |
| 4 | `#5a4847` | `oklch(42.13% 0.0248 24.16)` | Wild Boysenberry | white, 8.5 to 1 |

## CSS

```css
background: conic-gradient(from 225deg, #066fd8 0.000% 25.000%, #da4a4a 25.000% 50.000%, #f8e2e0 50.000% 75.000%, #5a4847 75.000% 100.000%);
background: conic-gradient(from 225deg, oklch(55.12% 0.1805 255.23) 0.000% 25.000%, oklch(61.02% 0.1805 24.16) 25.000% 50.000%, oklch(92.91% 0.0248 24.16) 50.000% 75.000%, oklch(42.13% 0.0248 24.16) 75.000% 100.000%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.551 | 0.181 | 255.2 |
| 2 | 0.61 | 0.181 | 384.2 |
| 3 | 0.929 | 0.025 | 384.2 |
| 4 | 0.421 | 0.025 | 384.2 |

## In these collections

- [Back to school swatches](https://grabient.com/back-to-school-swatches)

## Other forms

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