# Teal orange and blue palette

The Teal orange and blue palette brings together blue, light teal, light orange, and orange. The colors span a moderate lightness range, combining strong color with clear contrast. Its bold and dramatic character suits brand mood boards and editorial graphics. Its darkest tone is blue, and its lightest tone is light orange.

- Also called: Complementary navy, gray and orange linear gradient
- Seed: `kYXDanPyPAlSfvrijDtZRUxGA6vS`
- Page: https://grabient.com/kYXDanPyPAlSfvrijDtZRUxGA6vS?angle=135
- Drawn as: linear gradient, 7 steps, 135 degrees
- Kinds: dark to light, pastel
- Hues: complementary
- Contrast of its darkest and lightest colors: 5.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 | `#04435f` | `oklch(36.22% 0.0744 234.84)` | Neptune’s Wrath | white, 10.6 to 1 |
| 2 | `#1a618b` | `oklch(47.02% 0.0957 240.10)` | Copenhagen Blue | white, 6.7 to 1 |
| 3 | `#448cb5` | `oklch(61.20% 0.0949 235.78)` | Blueberry Festival | black, 5.6 to 1 |
| 4 | `#7eb1c0` | `oklch(72.98% 0.0577 217.21)` | Glacier | black, 8.9 to 1 |
| 5 | `#acc1b0` | `oklch(79.10% 0.0326 151.16)` | Kind Green | black, 11 to 1 |
| 6 | `#e0af8f` | `oklch(79.17% 0.0717 54.63)` | Bedtime Story | black, 10.7 to 1 |
| 7 | `#ff8b5f` | `oklch(75.59% 0.1525 41.46)` | After Burn | black, 9.1 to 1 |

## CSS

```css
background: linear-gradient(135deg, #04435f 0.0%, #1a618b 16.7%, #448cb5 33.3%, #7eb1c0 50.0%, #acc1b0 66.7%, #e0af8f 83.3%, #ff8b5f 100.0%);
background: linear-gradient(135deg in oklch, oklch(36.22% 0.0744 234.84) 0.0%, oklch(47.02% 0.0957 240.10) 16.7%, oklch(61.20% 0.0949 235.78) 33.3%, oklch(72.98% 0.0577 217.21) 50.0%, oklch(79.10% 0.0326 151.16) 66.7%, oklch(79.17% 0.0717 54.63) 83.3%, oklch(75.59% 0.1525 41.46) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.362 | 0.074 | 234.8 |
| 2 | 0.496 | 0.098 | 240.1 |
| 3 | 0.665 | 0.087 | 229.6 |
| 4 | 0.776 | 0.033 | 190.5 |
| 5 | 0.795 | 0.058 | 64.7 |
| 6 | 0.756 | 0.161 | 41.5 |

## In these collections

- [Orange and blue gradients](https://grabient.com/orange-and-blue-gradients)

## Other forms

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