Misty Lawn

CSS

:root {
  --misty-lawn: #dffae1;
  --misty-lawn-rgb: 223 250 225;
  --misty-lawn-oklch: oklch(0.959 0.044 147.3);
}

.element {
  color: var(--misty-lawn);
  background-color: hsl(124 73% 93%);
  border-color: oklch(0.959 0.044 147.3);
}

Tailwind CSS v4

@theme {
  --color-misty-lawn: #dffae1;
  --color-misty-lawn-50: #edf9ef;
  --color-misty-lawn-100: #deece0;
  --color-misty-lawn-200: #c8daca;
  --color-misty-lawn-300: #a9beac;
  --color-misty-lawn-400: #8ea690;
  --color-misty-lawn-500: #738e76;
  --color-misty-lawn-600: #627864;
  --color-misty-lawn-700: #4e6050;
  --color-misty-lawn-800: #394739;
  --color-misty-lawn-900: #273127;
  --color-misty-lawn-950: #151d15;
}

SCSS

$misty-lawn: #dffae1;
$misty-lawn-rgb: 223, 250, 225;
$misty-lawn-light: mix(#fff, $misty-lawn, 20%);
$misty-lawn-dark: mix(#000, $misty-lawn, 20%);

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