Look at the Bright Side

CSS

:root {
  --look-at-the-bright-side: #febf01;
  --look-at-the-bright-side-rgb: 254 191 1;
  --look-at-the-bright-side-oklch: oklch(0.839 0.172 84.4);
}

.element {
  color: var(--look-at-the-bright-side);
  background-color: hsl(45 99% 50%);
  border-color: oklch(0.839 0.172 84.4);
}

Tailwind CSS v4

@theme {
  --color-look-at-the-bright-side: #febf01;
  --color-look-at-the-bright-side-50: #fff3bd;
  --color-look-at-the-bright-side-100: #ffe5a5;
  --color-look-at-the-bright-side-200: #f5cf7b;
  --color-look-at-the-bright-side-300: #deb03e;
  --color-look-at-the-bright-side-400: #cd9300;
  --color-look-at-the-bright-side-500: #ba7700;
  --color-look-at-the-bright-side-600: #9d6500;
  --color-look-at-the-bright-side-700: #7e5100;
  --color-look-at-the-bright-side-800: #5f3a00;
  --color-look-at-the-bright-side-900: #422800;
  --color-look-at-the-bright-side-950: #2b1500;
}

SCSS

$look-at-the-bright-side: #febf01;
$look-at-the-bright-side-rgb: 254, 191, 1;
$look-at-the-bright-side-light: mix(#fff, $look-at-the-bright-side, 20%);
$look-at-the-bright-side-dark: mix(#000, $look-at-the-bright-side, 20%);

.element {
  color: $look-at-the-bright-side;
  box-shadow: 0 0 0 2px rgba($look-at-the-bright-side, 0.35);
}