Carotene

CSS

:root {
  --carotene: #fdb793;
  --carotene-rgb: 253 183 147;
  --carotene-oklch: oklch(0.836 0.095 48.2);
}

.element {
  color: var(--carotene);
  background-color: hsl(20 96% 78%);
  border-color: oklch(0.836 0.095 48.2);
}

Tailwind CSS v4

@theme {
  --color-carotene: #fdb793;
  --color-carotene-50: #ffeedd;
  --color-carotene-100: #ffe0cc;
  --color-carotene-200: #f7c9b0;
  --color-carotene-300: #e0aa8c;
  --color-carotene-400: #cd8d6c;
  --color-carotene-500: #b9724c;
  --color-carotene-600: #9c6141;
  --color-carotene-700: #7d4d33;
  --color-carotene-800: #5d3725;
  --color-carotene-900: #412619;
  --color-carotene-950: #2a1409;
}

SCSS

$carotene: #fdb793;
$carotene-rgb: 253, 183, 147;
$carotene-light: mix(#fff, $carotene, 20%);
$carotene-dark: mix(#000, $carotene, 20%);

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