Sharp Lime

CSS

:root {
  --sharp-lime: #c0ad28;
  --sharp-lime-rgb: 192 173 40;
  --sharp-lime-oklch: oklch(0.742 0.144 100.6);
}

.element {
  color: var(--sharp-lime);
  background-color: hsl(53 66% 45%);
  border-color: oklch(0.742 0.144 100.6);
}

Tailwind CSS v4

@theme {
  --color-sharp-lime: #c0ad28;
  --color-sharp-lime-50: #fcf8c8;
  --color-sharp-lime-100: #f0ebb3;
  --color-sharp-lime-200: #dfd78e;
  --color-sharp-lime-300: #c5ba5e;
  --color-sharp-lime-400: #b2a022;
  --color-sharp-lime-500: #9c8700;
  --color-sharp-lime-600: #847200;
  --color-sharp-lime-700: #6a5b00;
  --color-sharp-lime-800: #4f4200;
  --color-sharp-lime-900: #372e00;
  --color-sharp-lime-950: #221a00;
}

SCSS

$sharp-lime: #c0ad28;
$sharp-lime-rgb: 192, 173, 40;
$sharp-lime-light: mix(#fff, $sharp-lime, 20%);
$sharp-lime-dark: mix(#000, $sharp-lime, 20%);

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