# Blue and orange color palette

The Blue and orange color palette brings together off-white, dark gray, blue, teal, and orange. The colors span a very broad lightness range, combining strong color with high contrast. Its bold and dramatic character suits website sections and interface mockups. Its darkest tone is dark gray, and its lightest tone is off-white.

- Also called: Gray, blue, teal and orange linear swatches
- Seed: `kW9A-1nQe_8c9v_Rrzg2Tov4`
- Page: https://grabient.com/kW9A-1nQe_8c9v_Rrzg2Tov4?style=linearSwatches&steps=5
- Drawn as: linear swatches, 5 steps, 90 degrees
- Kinds: dark center, vivid, cool
- Hues: multi-hue
- Contrast of its darkest and lightest colors: 15.1 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 | `#eaf3ff` | `oklch(96.06% 0.0189 255.21)` | Moon White | black, 18.7 to 1 |
| 2 | `#161d26` | `oklch(22.83% 0.0207 255.23)` | Coarse Wool | white, 16.9 to 1 |
| 3 | `#1c73d4` | `oklch(55.91% 0.1695 255.23)` | Bright Navy Blue | white, 4.7 to 1 |
| 4 | `#00a29b` | `oklch(64.18% 0.1109 189.71)` | Ceramic Blue Turquoise | black, 6.6 to 1 |
| 5 | `#e97f27` | `oklch(70.08% 0.1598 54.45)` | Chaat Masala | black, 7.5 to 1 |

## CSS

```css
background: linear-gradient(90deg, #eaf3ff 0.000% 20.000%, #161d26 20.000% 40.000%, #1c73d4 40.000% 60.000%, #00a29b 60.000% 80.000%, #e97f27 80.000% 100.000%);
background: linear-gradient(90deg, oklch(96.06% 0.0189 255.21) 0.000% 20.000%, oklch(22.83% 0.0207 255.23) 20.000% 40.000%, oklch(55.91% 0.1695 255.23) 40.000% 60.000%, oklch(64.18% 0.1109 189.71) 60.000% 80.000%, oklch(70.08% 0.1598 54.45) 80.000% 100.000%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.961 | 0.021 | 255.2 |
| 2 | 0.228 | 0.021 | 255.2 |
| 3 | 0.559 | 0.169 | 255.2 |
| 4 | 0.642 | 0.13 | 189.7 |
| 5 | 0.701 | 0.16 | 54.5 |

## In these collections

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

## Other forms

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