# Forest green and ochre street fighter

The Forest green and ochre street fighter brings together green, off-white, blue, and gold. The colors span a broad lightness range, combining strong color with clear contrast. Its bold and dramatic character suits botanical branding and garden event graphics. Its darkest tone is blue, and its lightest tone is off-white.

- Also called: Tritone green, light blue and yellow angular swatches
- Seed: `kUepFoeIPG7rXRvpvaug`
- Page: https://grabient.com/kUepFoeIPG7rXRvpvaug?style=angularSwatches&steps=4&angle=270
- Drawn as: angular swatches, 4 steps, 270 degrees
- Kinds: vivid, cool
- Hues: multi-hue
- Contrast of its darkest and lightest colors: 6.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 | `#007223` | `oklch(48.04% 0.1458 146.23)` | Clear Green | white, 6.1 to 1 |
| 2 | `#e7f0f1` | `oklch(94.88% 0.0096 205.43)` | Ethereal White | black, 18.1 to 1 |
| 3 | `#103edb` | `oklch(46.06% 0.2398 264.61)` | Merchant Marine Blue | white, 7.7 to 1 |
| 4 | `#edc405` | `oklch(83.07% 0.1695 93.41)` | Abra Goldenrod | black, 12.4 to 1 |

## CSS

```css
background: conic-gradient(from 270deg, #007223 0.000% 25.000%, #e7f0f1 25.000% 50.000%, #103edb 50.000% 75.000%, #edc405 75.000% 100.000%);
background: conic-gradient(from 270deg, oklch(48.04% 0.1458 146.23) 0.000% 25.000%, oklch(94.88% 0.0096 205.43) 25.000% 50.000%, oklch(46.06% 0.2398 264.61) 50.000% 75.000%, oklch(83.07% 0.1695 93.41) 75.000% 100.000%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.48 | 0.2 | 146.3 |
| 2 | 0.949 | 0.01 | 205.4 |
| 3 | 0.461 | 0.24 | 264.6 |
| 4 | 0.831 | 0.169 | 93.4 |

## In these collections

- [Street Fighter swatches](https://grabient.com/street-fighter-swatches)

## Other forms

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