# Electric lime to deep teal swatches

The Electric lime to deep teal swatches brings together green and dark blue. The colors span a broad lightness range, combining strong color with clear contrast. Its bold and dramatic character suits brand mood boards and editorial graphics. Its darkest tone is dark blue, and its lightest tone is green.

- Also called: Yellow, green and navy angular swatches
- Seed: `kU5qBXX9dB8kwQilmMng`
- Page: https://grabient.com/kU5qBXX9dB8kwQilmMng?style=angularSwatches&steps=4&angle=135
- Drawn as: angular swatches, 4 steps, 135 degrees
- Kinds: light to dark, vivid, neon
- Hues: analogous
- Contrast of its darkest and lightest colors: 10.8 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 | `#c7f500` | `oklch(90.55% 0.2205 122.34)` | Non-Toxic Boyfriend | black, 16.5 to 1 |
| 2 | `#4acf00` | `oklch(75.20% 0.2383 139.26)` | Composite Artefact Green | black, 10.2 to 1 |
| 3 | `#078f5a` | `oklch(57.48% 0.1323 158.27)` | Emerald Isle | black, 5.1 to 1 |
| 4 | `#04304b` | `oklch(29.53% 0.0675 242.81)` | Cosmos Blue | white, 13.7 to 1 |

## CSS

```css
background: conic-gradient(from 135deg, #c7f500 0.000% 25.000%, #4acf00 25.000% 50.000%, #078f5a 50.000% 75.000%, #04304b 75.000% 100.000%);
background: conic-gradient(from 135deg, oklch(90.55% 0.2205 122.34) 0.000% 25.000%, oklch(75.20% 0.2383 139.26) 25.000% 50.000%, oklch(57.48% 0.1323 158.27) 50.000% 75.000%, oklch(29.53% 0.0675 242.81) 75.000% 100.000%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.906 | 0.22 | 122.3 |
| 2 | 0.752 | 0.24 | 139.3 |
| 3 | 0.575 | 0.132 | 158.3 |
| 4 | 0.295 | 0.068 | 242.8 |

## In these collections

- [Energetic swatches](https://grabient.com/energetic-swatches)

## Other forms

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