# Cream, gray and cobalt blue color palette

The Cream, gray and cobalt blue color palette brings together off-white, light gray, dark orange, orange, and blue. The colors span a very broad lightness range, combining moderate color with high contrast. Its balanced and composed character suits website sections and interface mockups. Its darkest tone is dark orange, and its lightest tone is off-white.

- Also called: White, brown, orange and blue linear swatches
- Seed: `kY9gcj84W_-CHv-gCT_0Da_8czLY`
- Page: https://grabient.com/kY9gcj84W_-CHv-gCT_0Da_8czLY?style=linearSwatches&steps=6&angle=135
- Drawn as: linear swatches, 6 steps, 135 degrees
- Kinds: dark center, muted, warm
- Hues: wide
- Contrast of its darkest and lightest colors: 14.5 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 | `#faf3ef` | `oklch(96.85% 0.0096 49.92)` | Ivory Tower | black, 19.1 to 1 |
| 2 | `#eaded8` | `oklch(90.94% 0.0152 49.92)` | Berry Frost | black, 15.9 to 1 |
| 3 | `#bdaea6` | `oklch(75.98% 0.0207 49.92)` | Thumper | black, 9.7 to 1 |
| 4 | `#2c1f17` | `oklch(25.20% 0.0248 49.92)` | Weathervane | white, 16 to 1 |
| 5 | `#cf6924` | `oklch(62.99% 0.1502 49.92)` | Hot Cinnamon | black, 5.6 to 1 |
| 6 | `#3275c4` | `oklch(55.91% 0.1406 254.58)` | Palace Blue | white, 4.6 to 1 |

## CSS

```css
background: linear-gradient(135deg, #faf3ef 0.000% 16.667%, #eaded8 16.667% 33.333%, #bdaea6 33.333% 50.000%, #2c1f17 50.000% 66.667%, #cf6924 66.667% 83.333%, #3275c4 83.333% 100.000%);
background: linear-gradient(135deg, oklch(96.85% 0.0096 49.92) 0.000% 16.667%, oklch(90.94% 0.0152 49.92) 16.667% 33.333%, oklch(75.98% 0.0207 49.92) 33.333% 50.000%, oklch(25.20% 0.0248 49.92) 50.000% 66.667%, oklch(62.99% 0.1502 49.92) 66.667% 83.333%, oklch(55.91% 0.1406 254.58) 83.333% 100.000%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.969 | 0.01 | 49.9 |
| 2 | 0.909 | 0.015 | 49.9 |
| 3 | 0.76 | 0.021 | 49.9 |
| 4 | 0.252 | 0.025 | 49.9 |
| 5 | 0.63 | 0.15 | 49.9 |
| 6 | 0.559 | 0.141 | -105.4 |

## In these collections

- [Presentation swatches](https://grabient.com/presentation-swatches)
- [UI swatches](https://grabient.com/ui-swatches)

## Other forms

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