Rite of Spring

CSS

:root {
  --rite-of-spring: #ffeba9;
  --rite-of-spring-rgb: 255 235 169;
  --rite-of-spring-oklch: oklch(0.941 0.086 93.2);
}

.element {
  color: var(--rite-of-spring);
  background-color: hsl(46 100% 83%);
  border-color: oklch(0.941 0.086 93.2);
}

Tailwind CSS v4

@theme {
  --color-rite-of-spring: #ffeba9;
  --color-rite-of-spring-50: #fdf6da;
  --color-rite-of-spring-100: #f0e8c8;
  --color-rite-of-spring-200: #dfd5ab;
  --color-rite-of-spring-300: #c5b885;
  --color-rite-of-spring-400: #b09e62;
  --color-rite-of-spring-500: #9a853d;
  --color-rite-of-spring-600: #827035;
  --color-rite-of-spring-700: #685a2a;
  --color-rite-of-spring-800: #4d411d;
  --color-rite-of-spring-900: #362d13;
  --color-rite-of-spring-950: #211a05;
}

SCSS

$rite-of-spring: #ffeba9;
$rite-of-spring-rgb: 255, 235, 169;
$rite-of-spring-light: mix(#fff, $rite-of-spring, 20%);
$rite-of-spring-dark: mix(#000, $rite-of-spring, 20%);

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