Half-Smoke

CSS

:root {
  --half-smoke: #ee8855;
  --half-smoke-rgb: 238 136 85;
  --half-smoke-oklch: oklch(0.727 0.141 46.2);
}

.element {
  color: var(--half-smoke);
  background-color: hsl(20 82% 63%);
  border-color: oklch(0.727 0.141 46.2);
}

Tailwind CSS v4

@theme {
  --color-half-smoke: #ee8855;
  --color-half-smoke-50: #ffead3;
  --color-half-smoke-100: #ffdbbf;
  --color-half-smoke-200: #ffc3a0;
  --color-half-smoke-300: #f2a176;
  --color-half-smoke-400: #e18252;
  --color-half-smoke-500: #cf6224;
  --color-half-smoke-600: #af5421;
  --color-half-smoke-700: #8c431a;
  --color-half-smoke-800: #692f13;
  --color-half-smoke-900: #4a200c;
  --color-half-smoke-950: #300f01;
}

SCSS

$half-smoke: #ee8855;
$half-smoke-rgb: 238, 136, 85;
$half-smoke-light: mix(#fff, $half-smoke, 20%);
$half-smoke-dark: mix(#000, $half-smoke, 20%);

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