# Cream, pale sage and powder blue opalescent

The Cream, pale sage and powder blue opalescent brings together pale orange, light teal, and light blue. The colors span a narrow lightness range, combining restrained color with gentle contrast. Its light and open character suits brand mood boards and editorial graphics. Its darkest tone is light blue, and its lightest tone is pale orange.

- Also called: Pink, off-white and light blue linear swatches
- Seed: `kU4h4gdwpDG-P0BvDsbg`
- Page: https://grabient.com/kU4h4gdwpDG-P0BvDsbg?style=linearSwatches&steps=4&angle=135
- Drawn as: linear swatches, 4 steps, 135 degrees
- Kinds: even lightness, pastel, light
- Hues: two-hue
- Contrast of its darkest and lightest colors: 1.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 | `#f3d3c5` | `oklch(88.98% 0.0413 45.00)` | Melon Pink | black, 14.9 to 1 |
| 2 | `#f6e8d7` | `oklch(93.70% 0.0276 71.42)` | Tender | black, 17.4 to 1 |
| 3 | `#b7dfe5` | `oklch(87.80% 0.0427 207.74)` | Basin Blue | black, 14.7 to 1 |
| 4 | `#cad5f1` | `oklch(87.40% 0.0400 266.92)` | Garden Fairy | black, 14.3 to 1 |

## CSS

```css
background: linear-gradient(135deg, #f3d3c5 0.000% 25.000%, #f6e8d7 25.000% 50.000%, #b7dfe5 50.000% 75.000%, #cad5f1 75.000% 100.000%);
background: linear-gradient(135deg, oklch(88.98% 0.0413 45.00) 0.000% 25.000%, oklch(93.70% 0.0276 71.42) 25.000% 50.000%, oklch(87.80% 0.0427 207.74) 50.000% 75.000%, oklch(87.40% 0.0400 266.92) 75.000% 100.000%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.89 | 0.041 | 45 |
| 2 | 0.937 | 0.028 | 71.4 |
| 3 | 0.878 | 0.043 | 207.7 |
| 4 | 0.874 | 0.04 | 266.9 |

## In these collections

- [Opalescent swatches](https://grabient.com/opalescent-swatches)

## Other forms

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