# Teal and Orange: Dusty blue and olive

The "Teal and Orange: Dusty blue and olive" palette brings together blue, teal, orange, and pale orange. The colors span a moderate lightness range, combining moderate color with clear contrast. Its balanced and composed character suits brand mood boards and editorial graphics. Its darkest tone is teal, and its lightest tone is pale orange.

- Also called: Gray, teal, orange and beige linear swatches
- Seed: `kUjBuwvZu6VK4LdykUSg`
- Page: https://grabient.com/kUjBuwvZu6VK4LdykUSg?style=linearSwatches&steps=4
- Drawn as: linear swatches, 4 steps, 90 degrees
- Kinds: dark to light, vivid, multicolor
- Hues: two-hue
- Contrast of its darkest and lightest colors: 4.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 | `#617487` | `oklch(55.12% 0.0372 248.20)` | Lost Atlantis | white, 4.8 to 1 |
| 2 | `#176b70` | `oklch(48.43% 0.0758 200.65)` | Deep Lake | white, 6.1 to 1 |
| 3 | `#d86c2d` | `oklch(64.96% 0.1543 47.42)` | Gold Drop | black, 6.1 to 1 |
| 4 | `#ecddbc` | `oklch(90.16% 0.0469 87.58)` | Salt Steppe | black, 15.6 to 1 |

## CSS

```css
background: linear-gradient(90deg, #617487 0.000% 25.000%, #176b70 25.000% 50.000%, #d86c2d 50.000% 75.000%, #ecddbc 75.000% 100.000%);
background: linear-gradient(90deg, oklch(55.12% 0.0372 248.20) 0.000% 25.000%, oklch(48.43% 0.0758 200.65) 25.000% 50.000%, oklch(64.96% 0.1543 47.42) 50.000% 75.000%, oklch(90.16% 0.0469 87.58) 75.000% 100.000%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.551 | 0.037 | 248.2 |
| 2 | 0.484 | 0.076 | 200.6 |
| 3 | 0.65 | 0.154 | 47.4 |
| 4 | 0.902 | 0.047 | 87.6 |

## In these collections

- [Teal and orange swatches](https://grabient.com/teal-and-orange-swatches)

## Other forms

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