Praise the Sun

CSS

:root {
  --praise-the-sun: #f3f4d9;
  --praise-the-sun-rgb: 243 244 217;
  --praise-the-sun-oklch: oklch(0.959 0.035 108.8);
}

.element {
  color: var(--praise-the-sun);
  background-color: hsl(62 55% 90%);
  border-color: oklch(0.959 0.035 108.8);
}

Tailwind CSS v4

@theme {
  --color-praise-the-sun: #f3f4d9;
  --color-praise-the-sun-50: #f5f6eb;
  --color-praise-the-sun-100: #e8e9dc;
  --color-praise-the-sun-200: #d4d6c5;
  --color-praise-the-sun-300: #b8b9a5;
  --color-praise-the-sun-400: #a0a089;
  --color-praise-the-sun-500: #88886d;
  --color-praise-the-sun-600: #73735d;
  --color-praise-the-sun-700: #5c5c4a;
  --color-praise-the-sun-800: #444335;
  --color-praise-the-sun-900: #2f2f24;
  --color-praise-the-sun-950: #1b1b13;
}

SCSS

$praise-the-sun: #f3f4d9;
$praise-the-sun-rgb: 243, 244, 217;
$praise-the-sun-light: mix(#fff, $praise-the-sun, 20%);
$praise-the-sun-dark: mix(#000, $praise-the-sun, 20%);

.element {
  color: $praise-the-sun;
  box-shadow: 0 0 0 2px rgba($praise-the-sun, 0.35);
}