# Blue and tan color palette

The Blue and tan color palette brings together dark blue, blue, and orange. The colors span a broad lightness range, combining restrained color with clear contrast. Its balanced and composed character suits website sections and interface mockups. Its darkest tone is dark blue, and its lightest tone is orange.

- Also called: Navy and gray angular swatches
- Seed: `kWNyq5qBE_NkRqy4DdTI5q_A`
- Page: https://grabient.com/kWNyq5qBE_NkRqy4DdTI5q_A?style=angularSwatches&steps=5&angle=135
- Drawn as: angular swatches, 5 steps, 135 degrees
- Kinds: light center, muted, cool
- Hues: complementary
- Contrast of its darkest and lightest colors: 6.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 | `#091934` | `oklch(21.65% 0.0579 260.86)` | Liberty Blue | white, 17.5 to 1 |
| 2 | `#213349` | `oklch(31.50% 0.0469 254.52)` | Crow Black | white, 12.9 to 1 |
| 3 | `#af9c7d` | `oklch(70.08% 0.0482 79.10)` | Sand Pebble | black, 7.8 to 1 |
| 4 | `#455467` | `oklch(44.09% 0.0372 255.58)` | Inkjet | white, 7.7 to 1 |
| 5 | `#022a4b` | `oklch(27.95% 0.0730 248.18)` | Royal Blue Metallic | white, 14.5 to 1 |

## CSS

```css
background: conic-gradient(from 135deg, #091934 0.000% 20.000%, #213349 20.000% 40.000%, #af9c7d 40.000% 60.000%, #455467 60.000% 80.000%, #022a4b 80.000% 100.000%);
background: conic-gradient(from 135deg, oklch(21.65% 0.0579 260.86) 0.000% 20.000%, oklch(31.50% 0.0469 254.52) 20.000% 40.000%, oklch(70.08% 0.0482 79.10) 40.000% 60.000%, oklch(44.09% 0.0372 255.58) 60.000% 80.000%, oklch(27.95% 0.0730 248.18) 80.000% 100.000%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.217 | 0.058 | 260.9 |
| 2 | 0.315 | 0.047 | 254.5 |
| 3 | 0.701 | 0.048 | 79.1 |
| 4 | 0.441 | 0.037 | 255.6 |
| 5 | 0.28 | 0.073 | 248.2 |

## In these collections

- [Muted swatches](https://grabient.com/muted-swatches)
- [Calm swatches](https://grabient.com/calm-swatches)
- [Navy swatches](https://grabient.com/navy-swatches)
- [UI swatches](https://grabient.com/ui-swatches)

## Other forms

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