# Teal and ochre app background palette

This palette moves from teal through green to yellow. It steadily lightens across a narrow lightness range, combining restrained color with gentle contrast. Its balanced and composed character suits website sections and presentation backgrounds, especially compositions that need closely related light and dark areas.

- Also called: Duotone teal to brown linear gradient
- Seed: `kScDWdPJi6EMXt0`
- Page: https://grabient.com/kScDWdPJi6EMXt0?angle=180
- Drawn as: linear gradient, 7 steps, 180 degrees
- Kinds: even lightness, vivid
- Hues: wide
- Contrast of its darkest and lightest colors: 1.4 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 | `#155c6f` | `oklch(44.09% 0.0730 220.78)` | Deep Blue Sea | white, 7.5 to 1 |
| 2 | `#13606a` | `oklch(44.95% 0.0715 208.77)` | Turkish Aqua | white, 7.2 to 1 |
| 3 | `#1c6562` | `oklch(46.21% 0.0694 191.23)` | Abduction | white, 6.8 to 1 |
| 4 | `#2f6958` | `oklch(47.64% 0.0675 171.11)` | Terrestrial | white, 6.4 to 1 |
| 5 | `#496c4b` | `oklch(49.42% 0.0663 145.83)` | Sabal Palm | white, 5.9 to 1 |
| 6 | `#646c40` | `oklch(51.37% 0.0654 117.96)` | Pandanus | white, 5.5 to 1 |
| 7 | `#756c3f` | `oklch(52.76% 0.0648 98.20)` | Trough Shell | white, 5.3 to 1 |

## CSS

```css
background: linear-gradient(180deg, #155c6f 0.0%, #13606a 16.7%, #1c6562 33.3%, #2f6958 50.0%, #496c4b 66.7%, #646c40 83.3%, #756c3f 100.0%);
background: linear-gradient(180deg in oklch, oklch(44.09% 0.0730 220.78) 0.0%, oklch(44.95% 0.0715 208.77) 16.7%, oklch(46.21% 0.0694 191.23) 33.3%, oklch(47.64% 0.0675 171.11) 50.0%, oklch(49.42% 0.0663 145.83) 66.7%, oklch(51.37% 0.0654 117.96) 83.3%, oklch(52.76% 0.0648 98.20) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.441 | 0.073 | 220.8 |
| 2 | 0.476 | 0.068 | 171.1 |
| 3 | 0.528 | 0.065 | 98.2 |

## In these collections

- [Chalkboard classroom](https://grabient.com/chalkboard-classroom)
- [App background gradients](https://grabient.com/app-background-gradients)

## Other forms

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