Pale Persimmon

CSS

:root {
  --pale-persimmon: #d4acad;
  --pale-persimmon-rgb: 212 172 173;
  --pale-persimmon-oklch: oklch(0.78 0.047 16.5);
}

.element {
  color: var(--pale-persimmon);
  background-color: hsl(359 32% 75%);
  border-color: oklch(0.78 0.047 16.5);
}

Tailwind CSS v4

@theme {
  --color-pale-persimmon: #d4acad;
  --color-pale-persimmon-50: #fff0f0;
  --color-pale-persimmon-100: #f7e2e2;
  --color-pale-persimmon-200: #e8cdcc;
  --color-pale-persimmon-300: #cfaeae;
  --color-pale-persimmon-400: #b99495;
  --color-pale-persimmon-500: #a37a7b;
  --color-pale-persimmon-600: #8a6768;
  --color-pale-persimmon-700: #6e5353;
  --color-pale-persimmon-800: #513c3d;
  --color-pale-persimmon-900: #39292a;
  --color-pale-persimmon-950: #231718;
}

SCSS

$pale-persimmon: #d4acad;
$pale-persimmon-rgb: 212, 172, 173;
$pale-persimmon-light: mix(#fff, $pale-persimmon, 20%);
$pale-persimmon-dark: mix(#000, $pale-persimmon, 20%);

.element {
  color: $pale-persimmon;
  box-shadow: 0 0 0 2px rgba($pale-persimmon, 0.35);
}