Torchlight

CSS

:root {
  --torchlight: #ffc985;
  --torchlight-rgb: 255 201 133;
  --torchlight-oklch: oklch(0.869 0.105 72.1);
}

.element {
  color: var(--torchlight);
  background-color: hsl(33 100% 76%);
  border-color: oklch(0.869 0.105 72.1);
}

Tailwind CSS v4

@theme {
  --color-torchlight: #ffc985;
  --color-torchlight-50: #fff1d5;
  --color-torchlight-100: #fde3c2;
  --color-torchlight-200: #f0cea3;
  --color-torchlight-300: #d8b07a;
  --color-torchlight-400: #c59455;
  --color-torchlight-500: #b17929;
  --color-torchlight-600: #956725;
  --color-torchlight-700: #78521e;
  --color-torchlight-800: #593b14;
  --color-torchlight-900: #3e290d;
  --color-torchlight-950: #281602;
}

SCSS

$torchlight: #ffc985;
$torchlight-rgb: 255, 201, 133;
$torchlight-light: mix(#fff, $torchlight, 20%);
$torchlight-dark: mix(#000, $torchlight, 20%);

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