# Blue and gray composition notebook doodles palette

The Blue and gray composition notebook doodles palette brings together dark blue, blue, and gray. The colors span a moderate lightness range, combining moderate color with gentle contrast. Its balanced and composed character suits stationery systems and print layouts. Its darkest tone is dark blue, and its lightest tone is blue.

- Also called: Monochrome navy and gray angular swatches
- Seed: `kWQz6_siq_UOoP5MFb_SAFCY`
- Page: https://grabient.com/kWQz6_siq_UOoP5MFb_SAFCY?style=angularSwatches&steps=6&angle=135
- Drawn as: angular swatches, 6 steps, 135 degrees
- Kinds: dark to light, cool, monochrome
- Hues: monochromatic
- Contrast of its darkest and lightest colors: 3.9 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 | `#15204e` | `oklch(26.38% 0.0854 269.30)` | Fly-by-Night | white, 15.5 to 1 |
| 2 | `#203a79` | `oklch(36.51% 0.1127 265.02)` | Surf the Web | white, 10.8 to 1 |
| 3 | `#375ca0` | `oklch(48.11% 0.1180 261.86)` | Neptune Blue | white, 6.5 to 1 |
| 4 | `#5577ae` | `oklch(56.81% 0.0933 259.20)` | Sapphire Shimmer Blue | black, 4.6 to 1 |
| 5 | `#71809d` | `oklch(59.79% 0.0474 262.93)` | Country Blue | black, 5.2 to 1 |
| 6 | `#767678` | `oklch(56.69% 0.0028 280.92)` | Astrogranite | black, 4.6 to 1 |

## CSS

```css
background: conic-gradient(from 135deg, #15204e 0.000% 16.667%, #203a79 16.667% 33.333%, #375ca0 33.333% 50.000%, #5577ae 50.000% 66.667%, #71809d 66.667% 83.333%, #767678 83.333% 100.000%);
background: conic-gradient(from 135deg, oklch(26.38% 0.0854 269.30) 0.000% 16.667%, oklch(36.51% 0.1127 265.02) 16.667% 33.333%, oklch(48.11% 0.1180 261.86) 33.333% 50.000%, oklch(56.81% 0.0933 259.20) 50.000% 66.667%, oklch(59.79% 0.0474 262.93) 66.667% 83.333%, oklch(56.69% 0.0028 280.92) 83.333% 100.000%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.264 | 0.085 | 269.3 |
| 2 | 0.394 | 0.117 | 264 |
| 3 | 0.531 | 0.11 | 260.8 |
| 4 | 0.598 | 0.059 | 259.8 |
| 5 | 0.567 | 0.003 | 280.9 |

## In these collections

- [Composition notebook doodles](https://grabient.com/composition-notebook-doodles)

## Other forms

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