Wet Pottery Clay

CSS

:root {
  --wet-pottery-clay: #e0816f;
  --wet-pottery-clay-rgb: 224 129 111;
  --wet-pottery-clay-oklch: oklch(0.702 0.121 31.7);
}

.element {
  color: var(--wet-pottery-clay);
  background-color: hsl(10 65% 66%);
  border-color: oklch(0.702 0.121 31.7);
}

Tailwind CSS v4

@theme {
  --color-wet-pottery-clay: #e0816f;
  --color-wet-pottery-clay-50: #ffeadf;
  --color-wet-pottery-clay-100: #ffdace;
  --color-wet-pottery-clay-200: #ffc2b3;
  --color-wet-pottery-clay-300: #eea18f;
  --color-wet-pottery-clay-400: #dc8271;
  --color-wet-pottery-clay-500: #c96452;
  --color-wet-pottery-clay-600: #aa5546;
  --color-wet-pottery-clay-700: #894437;
  --color-wet-pottery-clay-800: #663029;
  --color-wet-pottery-clay-900: #48211b;
  --color-wet-pottery-clay-950: #2e100c;
}

SCSS

$wet-pottery-clay: #e0816f;
$wet-pottery-clay-rgb: 224, 129, 111;
$wet-pottery-clay-light: mix(#fff, $wet-pottery-clay, 20%);
$wet-pottery-clay-dark: mix(#000, $wet-pottery-clay, 20%);

.element {
  color: $wet-pottery-clay;
  box-shadow: 0 0 0 2px rgba($wet-pottery-clay, 0.35);
}