Pale Jasper

CSS

:root {
  --pale-jasper: #fed6cc;
  --pale-jasper-rgb: 254 214 204;
  --pale-jasper-oklch: oklch(0.907 0.047 34.3);
}

.element {
  color: var(--pale-jasper);
  background-color: hsl(12 96% 90%);
  border-color: oklch(0.907 0.047 34.3);
}

Tailwind CSS v4

@theme {
  --color-pale-jasper: #fed6cc;
  --color-pale-jasper-50: #fff1ec;
  --color-pale-jasper-100: #f7e3dd;
  --color-pale-jasper-200: #e7cec6;
  --color-pale-jasper-300: #ceb0a7;
  --color-pale-jasper-400: #b8958c;
  --color-pale-jasper-500: #a37b72;
  --color-pale-jasper-600: #8a6960;
  --color-pale-jasper-700: #6e534d;
  --color-pale-jasper-800: #513d38;
  --color-pale-jasper-900: #392a26;
  --color-pale-jasper-950: #231715;
}

SCSS

$pale-jasper: #fed6cc;
$pale-jasper-rgb: 254, 214, 204;
$pale-jasper-light: mix(#fff, $pale-jasper, 20%);
$pale-jasper-dark: mix(#000, $pale-jasper, 20%);

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