Dream of Spring

CSS

:root {
  --dream-of-spring: #f7cf26;
  --dream-of-spring-rgb: 247 207 38;
  --dream-of-spring-oklch: oklch(0.864 0.17 94);
}

.element {
  color: var(--dream-of-spring);
  background-color: hsl(49 93% 56%);
  border-color: oklch(0.864 0.17 94);
}

Tailwind CSS v4

@theme {
  --color-dream-of-spring: #f7cf26;
  --color-dream-of-spring-50: #fff6be;
  --color-dream-of-spring-100: #f8e8a7;
  --color-dream-of-spring-200: #ead47d;
  --color-dream-of-spring-300: #d1b642;
  --color-dream-of-spring-400: #c09b00;
  --color-dream-of-spring-500: #ab8000;
  --color-dream-of-spring-600: #916c00;
  --color-dream-of-spring-700: #745700;
  --color-dream-of-spring-800: #573e00;
  --color-dream-of-spring-900: #3d2b00;
  --color-dream-of-spring-950: #271800;
}

SCSS

$dream-of-spring: #f7cf26;
$dream-of-spring-rgb: 247, 207, 38;
$dream-of-spring-light: mix(#fff, $dream-of-spring, 20%);
$dream-of-spring-dark: mix(#000, $dream-of-spring, 20%);

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