Kiss of Lime

CSS

:root {
  --kiss-of-lime: #eae2ac;
  --kiss-of-lime-rgb: 234 226 172;
  --kiss-of-lime-oklch: oklch(0.906 0.071 100.6);
}

.element {
  color: var(--kiss-of-lime);
  background-color: hsl(52 60% 80%);
  border-color: oklch(0.906 0.071 100.6);
}

Tailwind CSS v4

@theme {
  --color-kiss-of-lime: #eae2ac;
  --color-kiss-of-lime-50: #f9f6e0;
  --color-kiss-of-lime-100: #ece9cf;
  --color-kiss-of-lime-200: #d9d6b4;
  --color-kiss-of-lime-300: #beb990;
  --color-kiss-of-lime-400: #a7a06f;
  --color-kiss-of-lime-500: #90884f;
  --color-kiss-of-lime-600: #7a7344;
  --color-kiss-of-lime-700: #625c36;
  --color-kiss-of-lime-800: #494325;
  --color-kiss-of-lime-900: #322e19;
  --color-kiss-of-lime-950: #1e1b0a;
}

SCSS

$kiss-of-lime: #eae2ac;
$kiss-of-lime-rgb: 234, 226, 172;
$kiss-of-lime-light: mix(#fff, $kiss-of-lime, 20%);
$kiss-of-lime-dark: mix(#000, $kiss-of-lime, 20%);

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