Touch of Spring

CSS

:root {
  --touch-of-spring: #c8d4cc;
  --touch-of-spring-rgb: 200 212 204;
  --touch-of-spring-oklch: oklch(0.858 0.017 156.9);
}

.element {
  color: var(--touch-of-spring);
  background-color: hsl(140 12% 81%);
  border-color: oklch(0.858 0.017 156.9);
}

Tailwind CSS v4

@theme {
  --color-touch-of-spring: #c8d4cc;
  --color-touch-of-spring-50: #f1f7f3;
  --color-touch-of-spring-100: #e3eae6;
  --color-touch-of-spring-200: #ced6d1;
  --color-touch-of-spring-300: #b0bab4;
  --color-touch-of-spring-400: #97a29a;
  --color-touch-of-spring-500: #7d8a82;
  --color-touch-of-spring-600: #6a756e;
  --color-touch-of-spring-700: #555d58;
  --color-touch-of-spring-800: #3e4440;
  --color-touch-of-spring-900: #2b2f2c;
  --color-touch-of-spring-950: #181c19;
}

SCSS

$touch-of-spring: #c8d4cc;
$touch-of-spring-rgb: 200, 212, 204;
$touch-of-spring-light: mix(#fff, $touch-of-spring, 20%);
$touch-of-spring-dark: mix(#000, $touch-of-spring, 20%);

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