Breath of Spring

CSS

:root {
  --breath-of-spring: #e9e1a7;
  --breath-of-spring-rgb: 233 225 167;
  --breath-of-spring-oklch: oklch(0.902 0.075 101.1);
}

.element {
  color: var(--breath-of-spring);
  background-color: hsl(53 60% 78%);
  border-color: oklch(0.902 0.075 101.1);
}

Tailwind CSS v4

@theme {
  --color-breath-of-spring: #e9e1a7;
  --color-breath-of-spring-50: #f9f7de;
  --color-breath-of-spring-100: #eceacd;
  --color-breath-of-spring-200: #dad6b1;
  --color-breath-of-spring-300: #beba8d;
  --color-breath-of-spring-400: #a8a06c;
  --color-breath-of-spring-500: #91884a;
  --color-breath-of-spring-600: #7a7340;
  --color-breath-of-spring-700: #625c33;
  --color-breath-of-spring-800: #494323;
  --color-breath-of-spring-900: #322e17;
  --color-breath-of-spring-950: #1e1b08;
}

SCSS

$breath-of-spring: #e9e1a7;
$breath-of-spring-rgb: 233, 225, 167;
$breath-of-spring-light: mix(#fff, $breath-of-spring, 20%);
$breath-of-spring-dark: mix(#000, $breath-of-spring, 20%);

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