Three Ring Circus

CSS

:root {
  --three-ring-circus: #fddbb6;
  --three-ring-circus-rgb: 253 219 182;
  --three-ring-circus-oklch: oklch(0.911 0.062 69.3);
}

.element {
  color: var(--three-ring-circus);
  background-color: hsl(31 95% 85%);
  border-color: oklch(0.911 0.062 69.3);
}

Tailwind CSS v4

@theme {
  --color-three-ring-circus: #fddbb6;
  --color-three-ring-circus-50: #fff3e3;
  --color-three-ring-circus-100: #f5e5d2;
  --color-three-ring-circus-200: #e5d0b8;
  --color-three-ring-circus-300: #ccb396;
  --color-three-ring-circus-400: #b79877;
  --color-three-ring-circus-500: #a17f59;
  --color-three-ring-circus-600: #886c4c;
  --color-three-ring-circus-700: #6d563c;
  --color-three-ring-circus-800: #513e2b;
  --color-three-ring-circus-900: #382b1d;
  --color-three-ring-circus-950: #23180d;
}

SCSS

$three-ring-circus: #fddbb6;
$three-ring-circus-rgb: 253, 219, 182;
$three-ring-circus-light: mix(#fff, $three-ring-circus, 20%);
$three-ring-circus-dark: mix(#000, $three-ring-circus, 20%);

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