# Coral seafoam beach rings

The Coral seafoam beach rings brings together pale orange, light red, red, and teal. The colors span a moderate lightness range, combining moderate color with clear contrast. Its light and open character suits travel posters and environmental mood boards. Its darkest tone is teal, and its lightest tone is pale orange.

- Also called: Tritone beige, pink and teal radial swatches
- Seed: `kU9Rs8aZu6NY4v9MHdUA`
- Page: https://grabient.com/kU9Rs8aZu6NY4v9MHdUA?style=radialSwatches&steps=4&angle=0
- Drawn as: radial swatches, 4 steps, 0 degrees
- Kinds: light to dark, pastel, warm, multicolor
- Hues: wide
- Contrast of its darkest and lightest colors: 3.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 | `#fff2d8` | `oklch(96.46% 0.0367 84.39)` | Coffee Cream | black, 18.9 to 1 |
| 2 | `#f4b7a6` | `oklch(83.07% 0.0758 35.76)` | Pink Mimosa | black, 12.1 to 1 |
| 3 | `#e76f52` | `oklch(67.72% 0.1557 34.71)` | Orangeville | black, 6.7 to 1 |
| 4 | `#3c8c9d` | `oklch(59.84% 0.0813 213.30)` | Scooter | black, 5.4 to 1 |

## CSS

```css
background: radial-gradient(circle at 50% 50%, #fff2d8 0.000% 25.000%, #f4b7a6 25.000% 50.000%, #e76f52 50.000% 75.000%, #3c8c9d 75.000% 100.000%);
background: radial-gradient(circle at 50% 50%, oklch(96.46% 0.0367 84.39) 0.000% 25.000%, oklch(83.07% 0.0758 35.76) 25.000% 50.000%, oklch(67.72% 0.1557 34.71) 50.000% 75.000%, oklch(59.84% 0.0813 213.30) 75.000% 100.000%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.965 | 0.037 | 84.4 |
| 2 | 0.831 | 0.076 | 35.8 |
| 3 | 0.677 | 0.156 | 34.7 |
| 4 | 0.598 | 0.081 | 213.3 |

## In these collections

- [Beach swatches](https://grabient.com/beach-swatches)

## Other forms

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