Summer Rain

CSS

:root {
  --summer-rain: #e1e8db;
  --summer-rain-rgb: 225 232 219;
  --summer-rain-oklch: oklch(0.922 0.019 130.2);
}

.element {
  color: var(--summer-rain);
  background-color: hsl(92 22% 88%);
  border-color: oklch(0.922 0.019 130.2);
}

Tailwind CSS v4

@theme {
  --color-summer-rain: #e1e8db;
  --color-summer-rain-50: #f3f6f1;
  --color-summer-rain-100: #e5e9e3;
  --color-summer-rain-200: #d1d6ce;
  --color-summer-rain-300: #b4bab0;
  --color-summer-rain-400: #9ba195;
  --color-summer-rain-500: #82897c;
  --color-summer-rain-600: #6e7469;
  --color-summer-rain-700: #585d54;
  --color-summer-rain-800: #40443d;
  --color-summer-rain-900: #2c2f2a;
  --color-summer-rain-950: #191b17;
}

SCSS

$summer-rain: #e1e8db;
$summer-rain-rgb: 225, 232, 219;
$summer-rain-light: mix(#fff, $summer-rain, 20%);
$summer-rain-dark: mix(#000, $summer-rain, 20%);

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