My Sin

CSS

:root {
  --my-sin: #fdae45;
  --my-sin-rgb: 253 174 69;
  --my-sin-oklch: oklch(0.809 0.149 70.1);
}

.element {
  color: var(--my-sin);
  background-color: hsl(34 98% 63%);
  border-color: oklch(0.809 0.149 70.1);
}

Tailwind CSS v4

@theme {
  --color-my-sin: #fdae45;
  --color-my-sin-50: #ffefc7;
  --color-my-sin-100: #ffe1b2;
  --color-my-sin-200: #fcca8d;
  --color-my-sin-300: #e6aa5c;
  --color-my-sin-400: #d58d23;
  --color-my-sin-500: #c27000;
  --color-my-sin-600: #a45f00;
  --color-my-sin-700: #844c00;
  --color-my-sin-800: #633600;
  --color-my-sin-900: #452500;
  --color-my-sin-950: #2d1300;
}

SCSS

$my-sin: #fdae45;
$my-sin-rgb: 253, 174, 69;
$my-sin-light: mix(#fff, $my-sin, 20%);
$my-sin-dark: mix(#000, $my-sin, 20%);

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