# Notebook Ink Color Drift

A diagonal gradient begins in warm paper white, passes through pale mint and cool cyan, then folds into mauve, berry, violet, and deep blue ink. The long continuous route feels like mixed marker strokes bleeding across notebook stock, with enough pale space for text and a dark corner for grounded layouts.

- Also called: Off-white, gray, purple and navy linear gradient
- Seed: `kW7hI9ZBpO1uFRJJOs9rRwxI`
- Page: https://grabient.com/kW7hI9ZBpO1uFRJJOs9rRwxI?steps=32&angle=225
- Drawn as: linear gradient, 32 steps, 225 degrees
- Kinds: light to dark, pastel
- Hues: two-hue
- Contrast of its darkest and lightest colors: 9.2 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 | `#f2e9d8` | `oklch(93.70% 0.0248 85.78)` | Seaside Sand | black, 17.4 to 1 |
| 2 | `#ebe6d1` | `oklch(92.44% 0.0293 96.48)` | Xiàng Yá Bái Ivory | black, 16.8 to 1 |
| 3 | `#e1e3c8` | `oklch(90.70% 0.0362 111.44)` | More Melon | black, 16 to 1 |
| 4 | `#d0e0c1` | `oklch(88.62% 0.0443 129.30)` | Soft Moss | black, 15.1 to 1 |
| 5 | `#bbdcbf` | `oklch(86.35% 0.0529 148.67)` | Sprite Twist | black, 14.1 to 1 |
| 6 | `#a4d8c3` | `oklch(84.05% 0.0609 168.20)` | Southern Belle | black, 13.2 to 1 |
| 7 | `#91d2ca` | `oklch(81.85% 0.0672 186.52)` | Electro Chill | black, 12.3 to 1 |
| 8 | `#85ccd1` | `oklch(79.92% 0.0711 202.25)` | White Ultramarine | black, 11.5 to 1 |
| 9 | `#82c5d5` | `oklch(78.40% 0.0713 214.06)` | Water Flow | black, 10.8 to 1 |
| 10 | `#86bfd3` | `oklch(77.28% 0.0660 221.75)` | Sky Babe | black, 10.4 to 1 |
| 11 | `#8cbace` | `oklch(76.43% 0.0564 226.47)` | Juvie | black, 10 to 1 |
| 12 | `#94b6c7` | `oklch(75.75% 0.0443 229.36)` | Respite | black, 9.7 to 1 |
| 13 | `#9bb3bf` | `oklch(75.14% 0.0318 231.58)` | Blue Shell | black, 9.5 to 1 |
| 14 | `#a0afb8` | `oklch(74.50% 0.0209 234.27)` | How Handsome | black, 9.3 to 1 |
| 15 | `#a2abb2` | `oklch(73.71% 0.0136 238.59)` | Chateau de Chillon | black, 9 to 1 |
| 16 | `#a1a8ae` | `oklch(72.69% 0.0119 245.69)` | Seryi Grey | black, 8.6 to 1 |
| 17 | `#9ca3ae` | `oklch(71.34% 0.0179 256.99)` | Rough Stone | black, 8.2 to 1 |
| 18 | `#979db3` | `oklch(69.84% 0.0329 274.07)` | Skyline | black, 7.7 to 1 |
| 19 | `#9b93b7` | `oklch(68.19% 0.0543 295.11)` | Indifferent | black, 7.2 to 1 |
| 20 | `#a884b3` | `oklch(66.42% 0.0794 317.87)` | Purple Statice | black, 6.6 to 1 |
| 21 | `#b874a2` | `oklch(64.52% 0.1053 340.11)` | Eccentric Magenta | black, 6 to 1 |
| 22 | `#c56385` | `oklch(62.49% 0.1292 359.58)` | Old Geranium | black, 5.4 to 1 |
| 23 | `#ca5566` | `oklch(60.34% 0.1483 14.04)` | Cherry Hill | black, 5 to 1 |
| 24 | `#c74a4f` | `oklch(58.07% 0.1599 21.26)` | Rusty Chainmail | white, 4.6 to 1 |
| 25 | `#bf414c` | `oklch(55.55% 0.1619 19.17)` | Precious Peony | white, 5.1 to 1 |
| 26 | `#b13959` | `oklch(52.57% 0.1562 8.36)` | Cry of a Rose | white, 5.8 to 1 |
| 27 | `#9b366b` | `oklch(49.31% 0.1451 351.25)` | Scarlet Flame | white, 6.7 to 1 |
| 28 | `#7f387a` | `oklch(45.96% 0.1304 330.28)` | Sparkling Grape | white, 7.6 to 1 |
| 29 | `#603b7e` | `oklch(42.71% 0.1142 307.92)` | Tillandsia Purple | white, 8.6 to 1 |
| 30 | `#443d79` | `oklch(39.74% 0.0986 286.62)` | Sage Violet | white, 9.6 to 1 |
| 31 | `#2e3d6d` | `oklch(37.25% 0.0856 268.82)` | Newport Indigo | white, 10.4 to 1 |
| 32 | `#1f3c63` | `oklch(35.43% 0.0772 256.97)` | Navy Peony | white, 11.1 to 1 |

## CSS

```css
background: linear-gradient(225deg, #f2e9d8 0.0%, #ebe6d1 3.2%, #e1e3c8 6.5%, #d0e0c1 9.7%, #bbdcbf 12.9%, #a4d8c3 16.1%, #91d2ca 19.4%, #85ccd1 22.6%, #82c5d5 25.8%, #86bfd3 29.0%, #8cbace 32.3%, #94b6c7 35.5%, #9bb3bf 38.7%, #a0afb8 41.9%, #a2abb2 45.2%, #a1a8ae 48.4%, #9ca3ae 51.6%, #979db3 54.8%, #9b93b7 58.1%, #a884b3 61.3%, #b874a2 64.5%, #c56385 67.7%, #ca5566 71.0%, #c74a4f 74.2%, #bf414c 77.4%, #b13959 80.6%, #9b366b 83.9%, #7f387a 87.1%, #603b7e 90.3%, #443d79 93.5%, #2e3d6d 96.8%, #1f3c63 100.0%);
background: linear-gradient(225deg in oklch, oklch(93.70% 0.0248 85.78) 0.0%, oklch(92.44% 0.0293 96.48) 3.2%, oklch(90.70% 0.0362 111.44) 6.5%, oklch(88.62% 0.0443 129.30) 9.7%, oklch(86.35% 0.0529 148.67) 12.9%, oklch(84.05% 0.0609 168.20) 16.1%, oklch(81.85% 0.0672 186.52) 19.4%, oklch(79.92% 0.0711 202.25) 22.6%, oklch(78.40% 0.0713 214.06) 25.8%, oklch(77.28% 0.0660 221.75) 29.0%, oklch(76.43% 0.0564 226.47) 32.3%, oklch(75.75% 0.0443 229.36) 35.5%, oklch(75.14% 0.0318 231.58) 38.7%, oklch(74.50% 0.0209 234.27) 41.9%, oklch(73.71% 0.0136 238.59) 45.2%, oklch(72.69% 0.0119 245.69) 48.4%, oklch(71.34% 0.0179 256.99) 51.6%, oklch(69.84% 0.0329 274.07) 54.8%, oklch(68.19% 0.0543 295.11) 58.1%, oklch(66.42% 0.0794 317.87) 61.3%, oklch(64.52% 0.1053 340.11) 64.5%, oklch(62.49% 0.1292 359.58) 67.7%, oklch(60.34% 0.1483 14.04) 71.0%, oklch(58.07% 0.1599 21.26) 74.2%, oklch(55.55% 0.1619 19.17) 77.4%, oklch(52.57% 0.1562 8.36) 80.6%, oklch(49.31% 0.1451 351.25) 83.9%, oklch(45.96% 0.1304 330.28) 87.1%, oklch(42.71% 0.1142 307.92) 90.3%, oklch(39.74% 0.0986 286.62) 93.5%, oklch(37.25% 0.0856 268.82) 96.8%, oklch(35.43% 0.0772 256.97) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.937 | 0.025 | 85.8 |
| 2 | 0.787 | 0.072 | 211.5 |
| 3 | 0.72 | 0.014 | 250.6 |
| 4 | 0.575 | 0.161 | 381.7 |
| 5 | 0.354 | 0.077 | 257 |

## In these collections

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

## Other forms

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