Yellow Duranta

CSS

:root {
  --yellow-duranta: #d8e63c;
  --yellow-duranta-rgb: 216 230 60;
  --yellow-duranta-oklch: oklch(0.886 0.182 114.3);
}

.element {
  color: var(--yellow-duranta);
  background-color: hsl(65 77% 57%);
  border-color: oklch(0.886 0.182 114.3);
}

Tailwind CSS v4

@theme {
  --color-yellow-duranta: #d8e63c;
  --color-yellow-duranta-50: #f2fdc1;
  --color-yellow-duranta-100: #e4f0aa;
  --color-yellow-duranta-200: #d0de81;
  --color-yellow-duranta-300: #b2c349;
  --color-yellow-duranta-400: #9ea900;
  --color-yellow-duranta-500: #869000;
  --color-yellow-duranta-600: #727a00;
  --color-yellow-duranta-700: #5b6200;
  --color-yellow-duranta-800: #454700;
  --color-yellow-duranta-900: #303100;
  --color-yellow-duranta-950: #1c1d00;
}

SCSS

$yellow-duranta: #d8e63c;
$yellow-duranta-rgb: 216, 230, 60;
$yellow-duranta-light: mix(#fff, $yellow-duranta, 20%);
$yellow-duranta-dark: mix(#000, $yellow-duranta, 20%);

.element {
  color: $yellow-duranta;
  box-shadow: 0 0 0 2px rgba($yellow-duranta, 0.35);
}