# Orange and cobalt blue light mode palette

The Orange and cobalt blue light mode palette brings together off-white, light red, gray, and blue. The colors span a broad lightness range, combining strong color with clear contrast. Its bold and dramatic character suits brand mood boards and editorial graphics. Its darkest tone is gray, and its lightest tone is off-white.

- Also called: White, light pink, gray and blue linear swatches
- Seed: `kY-gYjeAg_G0Qvxfj7-M4YysC9Pc`
- Page: https://grabient.com/kY-gYjeAg_G0Qvxfj7-M4YysC9Pc?style=linearSwatches&steps=6
- Drawn as: linear swatches, 6 steps, 90 degrees
- Kinds: pastel, light
- Hues: split-complementary
- Contrast of its darkest and lightest colors: 8.6 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 | `#fff8f5` | `oklch(98.43% 0.0083 49.22)` | Sugar Milk | black, 20 to 1 |
| 2 | `#fbe8e2` | `oklch(94.49% 0.0220 41.82)` | Diluted Orange | black, 17.7 to 1 |
| 3 | `#edc7bd` | `oklch(85.83% 0.0455 34.42)` | Altered Pink | black, 13.4 to 1 |
| 4 | `#c8a59e` | `oklch(75.20% 0.0427 31.25)` | Rose Potpourri | black, 9.3 to 1 |
| 5 | `#474852` | `oklch(40.55% 0.0165 279.24)` | Gun Powder | white, 9 to 1 |
| 6 | `#285fc4` | `oklch(50.79% 0.1681 261.27)` | Amnesia Blue | white, 5.9 to 1 |

## CSS

```css
background: linear-gradient(90deg, #fff8f5 0.000% 16.667%, #fbe8e2 16.667% 33.333%, #edc7bd 33.333% 50.000%, #c8a59e 50.000% 66.667%, #474852 66.667% 83.333%, #285fc4 83.333% 100.000%);
background: linear-gradient(90deg, oklch(98.43% 0.0083 49.22) 0.000% 16.667%, oklch(94.49% 0.0220 41.82) 16.667% 33.333%, oklch(85.83% 0.0455 34.42) 33.333% 50.000%, oklch(75.20% 0.0427 31.25) 50.000% 66.667%, oklch(40.55% 0.0165 279.24) 66.667% 83.333%, oklch(50.79% 0.1681 261.27) 83.333% 100.000%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.984 | 0.008 | 49.2 |
| 2 | 0.945 | 0.022 | 41.8 |
| 3 | 0.858 | 0.045 | 34.4 |
| 4 | 0.752 | 0.043 | 31.3 |
| 5 | 0.406 | 0.017 | -80.8 |
| 6 | 0.508 | 0.168 | -98.7 |

## In these collections

- [Light mode color palette](https://grabient.com/light-mode-color-palette)

## Other forms

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