# Cream, sage and gray library card nostalgia

The Cream, sage and gray library card nostalgia brings together pale yellow, light green, green, and gray. The colors span a moderate lightness range, combining moderate color with clear contrast. Its light and open character suits stationery systems and print layouts. Its darkest tone is gray, and its lightest tone is pale yellow.

- Also called: Analogous beige, green and gray linear swatches
- Seed: `kU7itKap1ClQXwpBCEWA`
- Page: https://grabient.com/kU7itKap1ClQXwpBCEWA?style=linearSwatches&steps=6&angle=135
- Drawn as: linear swatches, 6 steps, 135 degrees
- Kinds: light to dark, pastel
- Hues: analogous
- Contrast of its darkest and lightest colors: 4.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 | `#f0edbf` | `oklch(93.70% 0.0593 104.06)` | Skeleton Bone | black, 17.5 to 1 |
| 2 | `#d7e1aa` | `oklch(88.83% 0.0732 116.31)` | Cocktail Onion | black, 15.2 to 1 |
| 3 | `#afcb95` | `oklch(80.77% 0.0796 130.29)` | Garden Spot | black, 11.8 to 1 |
| 4 | `#84a981` | `oklch(69.63% 0.0701 142.38)` | Verdant Haven | black, 7.9 to 1 |
| 5 | `#628778` | `oklch(59.24% 0.0476 167.92)` | Aloe Vera | black, 5.2 to 1 |
| 6 | `#586b6b` | `oklch(51.18% 0.0220 196.00)` | Blue Ballet | white, 5.6 to 1 |

## CSS

```css
background: linear-gradient(135deg, #f0edbf 0.000% 16.667%, #d7e1aa 16.667% 33.333%, #afcb95 33.333% 50.000%, #84a981 50.000% 66.667%, #628778 66.667% 83.333%, #586b6b 83.333% 100.000%);
background: linear-gradient(135deg, oklch(93.70% 0.0593 104.06) 0.000% 16.667%, oklch(88.83% 0.0732 116.31) 16.667% 33.333%, oklch(80.77% 0.0796 130.29) 33.333% 50.000%, oklch(69.63% 0.0701 142.38) 50.000% 66.667%, oklch(59.24% 0.0476 167.92) 66.667% 83.333%, oklch(51.18% 0.0220 196.00) 83.333% 100.000%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.937 | 0.059 | 104.1 |
| 2 | 0.839 | 0.08 | 126.3 |
| 3 | 0.661 | 0.065 | 148.4 |
| 4 | 0.512 | 0.022 | 196 |

## In these collections

- [Library card nostalgia](https://grabient.com/library-card-nostalgia)

## Other forms

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