# Off-white and blue white palette

The Off-white and blue white palette brings together off-white. The colors span a narrow lightness range, combining near-neutral color with gentle contrast. Its quiet and understated character suits brand mood boards and editorial graphics. Its lightest and darkest tones both fall within the off-white color family.

- Also called: White to light blue linear gradient
- Seed: `kS_gCo-4K_vQGwA`
- Page: https://grabient.com/kS_gCo-4K_vQGwA?steps=32&angle=180
- Drawn as: linear gradient, 32 steps, 180 degrees
- Kinds: even lightness, neutral, light
- Hues: achromatic
- 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 | `#ffffff` | `oklch(100.00% 0.0000 89.88)` | White | black, 21 to 1 |
| 2 | `#ffffff` | `oklch(99.91% 0.0002 236.87)` | White | black, 20.9 to 1 |
| 3 | `#fefeff` | `oklch(99.80% 0.0005 236.76)` | White as Heaven | black, 20.8 to 1 |
| 4 | `#fdfefe` | `oklch(99.69% 0.0008 236.63)` | White as Heaven | black, 20.8 to 1 |
| 5 | `#fdfefe` | `oklch(99.56% 0.0012 236.48)` | White as Heaven | black, 20.7 to 1 |
| 6 | `#fcfdfe` | `oklch(99.43% 0.0016 236.32)` | Pale Grey | black, 20.6 to 1 |
| 7 | `#fbfdfe` | `oklch(99.28% 0.0020 236.14)` | Pale Grey | black, 20.5 to 1 |
| 8 | `#fbfcfe` | `oklch(99.12% 0.0024 235.96)` | Wash Me | black, 20.4 to 1 |
| 9 | `#fafcfd` | `oklch(98.95% 0.0029 235.79)` | Wash Me | black, 20.3 to 1 |
| 10 | `#f9fbfd` | `oklch(98.76% 0.0034 235.61)` | Wash Me | black, 20.2 to 1 |
| 11 | `#f8fbfd` | `oklch(98.57% 0.0039 235.44)` | Deutzia White | black, 20.1 to 1 |
| 12 | `#f7fafc` | `oklch(98.36% 0.0044 235.28)` | Doctor | black, 20 to 1 |
| 13 | `#f6f9fc` | `oklch(98.13% 0.0049 235.14)` | Zhēn Zhū Bái Pearl | black, 19.9 to 1 |
| 14 | `#f5f9fb` | `oklch(97.90% 0.0055 235.02)` | Zhēn Zhū Bái Pearl | black, 19.7 to 1 |
| 15 | `#f4f8fb` | `oklch(97.65% 0.0060 234.93)` | Distant Horizon | black, 19.6 to 1 |
| 16 | `#f2f7fa` | `oklch(97.38% 0.0066 234.86)` | Distant Horizon | black, 19.4 to 1 |
| 17 | `#f1f6fa` | `oklch(97.10% 0.0072 234.83)` | Silent Snowfall | black, 19.3 to 1 |
| 18 | `#f0f5f9` | `oklch(96.77% 0.0078 234.82)` | Child of Light | black, 19.1 to 1 |
| 19 | `#eef4f8` | `oklch(96.41% 0.0086 234.84)` | Child of Light | black, 18.9 to 1 |
| 20 | `#ecf3f7` | `oklch(96.01% 0.0093 234.88)` | Insignia White | black, 18.7 to 1 |
| 21 | `#eaf2f6` | `oklch(95.58% 0.0101 234.95)` | Powder White | black, 18.4 to 1 |
| 22 | `#e8f0f5` | `oklch(95.14% 0.0109 235.02)` | Clear Vision | black, 18.2 to 1 |
| 23 | `#e6eff4` | `oklch(94.69% 0.0118 235.11)` | Clear Vision | black, 18 to 1 |
| 24 | `#e4edf3` | `oklch(94.23% 0.0126 235.21)` | Morning Mist | black, 17.7 to 1 |
| 25 | `#e2ecf2` | `oklch(93.78% 0.0135 235.31)` | Out Cold | black, 17.5 to 1 |
| 26 | `#e0ebf1` | `oklch(93.34% 0.0143 235.42)` | Himalaya Peaks | black, 17.3 to 1 |
| 27 | `#dfe9f0` | `oklch(92.92% 0.0150 235.52)` | Bellflower Blue | black, 17 to 1 |
| 28 | `#dde8f0` | `oklch(92.52% 0.0157 235.62)` | Moby Dick | black, 16.8 to 1 |
| 29 | `#dbe7ef` | `oklch(92.16% 0.0164 235.71)` | Space Wolves Grey | black, 16.7 to 1 |
| 30 | `#dae6ee` | `oklch(91.83% 0.0170 235.79)` | First Light | black, 16.5 to 1 |
| 31 | `#d9e5ed` | `oklch(91.56% 0.0175 235.85)` | First Light | black, 16.4 to 1 |
| 32 | `#d8e5ed` | `oklch(91.34% 0.0179 235.90)` | Dream Blue | black, 16.2 to 1 |

## CSS

```css
background: linear-gradient(180deg, #ffffff 0.0%, #ffffff 3.2%, #fefeff 6.5%, #fdfefe 9.7%, #fdfefe 12.9%, #fcfdfe 16.1%, #fbfdfe 19.4%, #fbfcfe 22.6%, #fafcfd 25.8%, #f9fbfd 29.0%, #f8fbfd 32.3%, #f7fafc 35.5%, #f6f9fc 38.7%, #f5f9fb 41.9%, #f4f8fb 45.2%, #f2f7fa 48.4%, #f1f6fa 51.6%, #f0f5f9 54.8%, #eef4f8 58.1%, #ecf3f7 61.3%, #eaf2f6 64.5%, #e8f0f5 67.7%, #e6eff4 71.0%, #e4edf3 74.2%, #e2ecf2 77.4%, #e0ebf1 80.6%, #dfe9f0 83.9%, #dde8f0 87.1%, #dbe7ef 90.3%, #dae6ee 93.5%, #d9e5ed 96.8%, #d8e5ed 100.0%);
background: linear-gradient(180deg in oklch, oklch(100.00% 0.0000 89.88) 0.0%, oklch(99.91% 0.0002 236.87) 3.2%, oklch(99.80% 0.0005 236.76) 6.5%, oklch(99.69% 0.0008 236.63) 9.7%, oklch(99.56% 0.0012 236.48) 12.9%, oklch(99.43% 0.0016 236.32) 16.1%, oklch(99.28% 0.0020 236.14) 19.4%, oklch(99.12% 0.0024 235.96) 22.6%, oklch(98.95% 0.0029 235.79) 25.8%, oklch(98.76% 0.0034 235.61) 29.0%, oklch(98.57% 0.0039 235.44) 32.3%, oklch(98.36% 0.0044 235.28) 35.5%, oklch(98.13% 0.0049 235.14) 38.7%, oklch(97.90% 0.0055 235.02) 41.9%, oklch(97.65% 0.0060 234.93) 45.2%, oklch(97.38% 0.0066 234.86) 48.4%, oklch(97.10% 0.0072 234.83) 51.6%, oklch(96.77% 0.0078 234.82) 54.8%, oklch(96.41% 0.0086 234.84) 58.1%, oklch(96.01% 0.0093 234.88) 61.3%, oklch(95.58% 0.0101 234.95) 64.5%, oklch(95.14% 0.0109 235.02) 67.7%, oklch(94.69% 0.0118 235.11) 71.0%, oklch(94.23% 0.0126 235.21) 74.2%, oklch(93.78% 0.0135 235.31) 77.4%, oklch(93.34% 0.0143 235.42) 80.6%, oklch(92.92% 0.0150 235.52) 83.9%, oklch(92.52% 0.0157 235.62) 87.1%, oklch(92.16% 0.0164 235.71) 90.3%, oklch(91.83% 0.0170 235.79) 93.5%, oklch(91.56% 0.0175 235.85) 96.8%, oklch(91.34% 0.0179 235.90) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 1 | 0 | 237 |
| 2 | 0.972 | 0.007 | 234.8 |
| 3 | 0.913 | 0.018 | 235.9 |

## In these collections

- [White gradients](https://grabient.com/white-gradients)

## Other forms

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