# Seafoam Coral Harbor Fan

These four angular wedges move from seafoam through sunset coral, deep marine blue, and pale shell. The fan balances water, sunset, shadow, and sand in four clearly separated roles. Use them for beach festival posters, coastal brand marks, vacation graphics, or summer product packaging that needs warm energy grounded by a reliable dark blue and two airy supporting colors.

- Also called: Muted rainbow from teal to beige angular swatches
- Seed: `kUuT2PU7Mr7gbrD5k6_A`
- Page: https://grabient.com/kUuT2PU7Mr7gbrD5k6_A?style=angularSwatches&steps=4&angle=165
- Drawn as: angular swatches, 4 steps, 165 degrees
- Kinds: dark center, rainbow
- Hues: split-complementary
- 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 | `#61b7bd` | `oklch(72.83% 0.0841 201.09)` | Dickie Bird | black, 9 to 1 |
| 2 | `#da6d59` | `oklch(65.75% 0.1406 32.01)` | Coralite | black, 6.2 to 1 |
| 3 | `#155b72` | `oklch(44.09% 0.0758 225.05)` | Octagon Ocean | white, 7.5 to 1 |
| 4 | `#fff0c9` | `oklch(95.67% 0.0523 88.74)` | Vanilla Cake | black, 18.5 to 1 |

## CSS

```css
background: conic-gradient(from 165deg, #61b7bd 0.000% 25.000%, #da6d59 25.000% 50.000%, #155b72 50.000% 75.000%, #fff0c9 75.000% 100.000%);
background: conic-gradient(from 165deg, oklch(72.83% 0.0841 201.09) 0.000% 25.000%, oklch(65.75% 0.1406 32.01) 25.000% 50.000%, oklch(44.09% 0.0758 225.05) 50.000% 75.000%, oklch(95.67% 0.0523 88.74) 75.000% 100.000%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.728 | 0.084 | 201.1 |
| 2 | 0.657 | 0.141 | 32 |
| 3 | 0.441 | 0.076 | -135 |
| 4 | 0.957 | 0.054 | -271.3 |

## In these collections

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

## Other forms

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