# Pale mint and terracotta ui palette

The Pale mint and terracotta ui palette brings together off-white, light gray, light green, dark blue, purple, and orange. The colors span a broad lightness range, combining moderate color with clear contrast. Its balanced and composed character suits website sections and interface mockups. Its darkest tone is dark blue, and its lightest tone is off-white.

- Also called: White, gray, black and orange angular swatches
- Seed: `kY-QZq8Qa_9uMv-jiUiSK9IlQzTi`
- Page: https://grabient.com/kY-QZq8Qa_9uMv-jiUiSK9IlQzTi?style=angularSwatches&steps=6&angle=180
- Drawn as: angular swatches, 6 steps, 180 degrees
- Kinds: dark center, muted
- Hues: wide
- Contrast of its darkest and lightest colors: 13.7 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 | `#f5faf6` | `oklch(98.03% 0.0083 149.77)` | Whitest White | black, 19.8 to 1 |
| 2 | `#d3ded4` | `oklch(88.98% 0.0179 149.77)` | Worn Jade Tiles | black, 15.1 to 1 |
| 3 | `#96ab99` | `oklch(72.05% 0.0344 149.77)` | Scotland Road | black, 8.6 to 1 |
| 4 | `#1b2c32` | `oklch(27.95% 0.0248 222.68)` | Oceanic Noir | white, 14.5 to 1 |
| 5 | `#7f66bb` | `oklch(57.09% 0.1295 295.60)` | Lavish Spending | white, 4.6 to 1 |
| 6 | `#d2792e` | `oklch(66.14% 0.1406 56.07)` | Bitter Orange | black, 6.5 to 1 |

## CSS

```css
background: conic-gradient(from 180deg, #f5faf6 0.000% 16.667%, #d3ded4 16.667% 33.333%, #96ab99 33.333% 50.000%, #1b2c32 50.000% 66.667%, #7f66bb 66.667% 83.333%, #d2792e 83.333% 100.000%);
background: conic-gradient(from 180deg, oklch(98.03% 0.0083 149.77) 0.000% 16.667%, oklch(88.98% 0.0179 149.77) 16.667% 33.333%, oklch(72.05% 0.0344 149.77) 33.333% 50.000%, oklch(27.95% 0.0248 222.68) 50.000% 66.667%, oklch(57.09% 0.1295 295.60) 66.667% 83.333%, oklch(66.14% 0.1406 56.07) 83.333% 100.000%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.98 | 0.008 | 149.8 |
| 2 | 0.89 | 0.018 | 149.8 |
| 3 | 0.72 | 0.034 | 149.8 |
| 4 | 0.28 | 0.025 | 222.7 |
| 5 | 0.571 | 0.13 | 295.6 |
| 6 | 0.661 | 0.141 | 416.1 |

## In these collections

- [UI swatches](https://grabient.com/ui-swatches)

## Other forms

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