First Colours of Spring

CSS

:root {
  --first-colours-of-spring: #dbe64c;
  --first-colours-of-spring-rgb: 219 230 76;
  --first-colours-of-spring-oklch: oklch(0.889 0.172 113.4);
}

.element {
  color: var(--first-colours-of-spring);
  background-color: hsl(64 75% 60%);
  border-color: oklch(0.889 0.172 113.4);
}

Tailwind CSS v4

@theme {
  --color-first-colours-of-spring: #dbe64c;
  --color-first-colours-of-spring-50: #f3fcc4;
  --color-first-colours-of-spring-100: #e5efad;
  --color-first-colours-of-spring-200: #d1dd86;
  --color-first-colours-of-spring-300: #b4c251;
  --color-first-colours-of-spring-400: #9fa800;
  --color-first-colours-of-spring-500: #888f00;
  --color-first-colours-of-spring-600: #737900;
  --color-first-colours-of-spring-700: #5c6100;
  --color-first-colours-of-spring-800: #464700;
  --color-first-colours-of-spring-900: #303100;
  --color-first-colours-of-spring-950: #1d1d00;
}

SCSS

$first-colours-of-spring: #dbe64c;
$first-colours-of-spring-rgb: 219, 230, 76;
$first-colours-of-spring-light: mix(#fff, $first-colours-of-spring, 20%);
$first-colours-of-spring-dark: mix(#000, $first-colours-of-spring, 20%);

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