Misty Dreams

CSS

:root {
  --misty-dreams: #adc2be;
  --misty-dreams-rgb: 173 194 190;
  --misty-dreams-oklch: oklch(0.797 0.024 183);
}

.element {
  color: var(--misty-dreams);
  background-color: hsl(169 15% 72%);
  border-color: oklch(0.797 0.024 183);
}

Tailwind CSS v4

@theme {
  --color-misty-dreams: #adc2be;
  --color-misty-dreams-50: #eef7f6;
  --color-misty-dreams-100: #e0ebe9;
  --color-misty-dreams-200: #cad8d5;
  --color-misty-dreams-300: #abbcb9;
  --color-misty-dreams-400: #90a3a0;
  --color-misty-dreams-500: #768c87;
  --color-misty-dreams-600: #647673;
  --color-misty-dreams-700: #505e5c;
  --color-misty-dreams-800: #3a4543;
  --color-misty-dreams-900: #28302e;
  --color-misty-dreams-950: #161c1b;
}

SCSS

$misty-dreams: #adc2be;
$misty-dreams-rgb: 173, 194, 190;
$misty-dreams-light: mix(#fff, $misty-dreams, 20%);
$misty-dreams-dark: mix(#000, $misty-dreams, 20%);

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