Dreamy Clouds

CSS

:root {
  --dreamy-clouds: #d7eee4;
  --dreamy-clouds-rgb: 215 238 228;
  --dreamy-clouds-oklch: oklch(0.929 0.028 167.8);
}

.element {
  color: var(--dreamy-clouds);
  background-color: hsl(154 40% 89%);
  border-color: oklch(0.929 0.028 167.8);
}

Tailwind CSS v4

@theme {
  --color-dreamy-clouds: #d7eee4;
  --color-dreamy-clouds-50: #eef8f4;
  --color-dreamy-clouds-100: #dfebe6;
  --color-dreamy-clouds-200: #c9d8d2;
  --color-dreamy-clouds-300: #aabcb5;
  --color-dreamy-clouds-400: #8fa49b;
  --color-dreamy-clouds-500: #758c83;
  --color-dreamy-clouds-600: #63776e;
  --color-dreamy-clouds-700: #4f5f58;
  --color-dreamy-clouds-800: #3a4640;
  --color-dreamy-clouds-900: #28302c;
  --color-dreamy-clouds-950: #161c19;
}

SCSS

$dreamy-clouds: #d7eee4;
$dreamy-clouds-rgb: 215, 238, 228;
$dreamy-clouds-light: mix(#fff, $dreamy-clouds, 20%);
$dreamy-clouds-dark: mix(#000, $dreamy-clouds, 20%);

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