Breath of Celery

CSS

:root {
  --breath-of-celery: #dce7cb;
  --breath-of-celery-rgb: 220 231 203;
  --breath-of-celery-oklch: oklch(0.912 0.039 124.7);
}

.element {
  color: var(--breath-of-celery);
  background-color: hsl(84 37% 85%);
  border-color: oklch(0.912 0.039 124.7);
}

Tailwind CSS v4

@theme {
  --color-breath-of-celery: #dce7cb;
  --color-breath-of-celery-50: #f2f7ec;
  --color-breath-of-celery-100: #e4eadd;
  --color-breath-of-celery-200: #d0d8c6;
  --color-breath-of-celery-300: #b2bba6;
  --color-breath-of-celery-400: #99a38a;
  --color-breath-of-celery-500: #808b6f;
  --color-breath-of-celery-600: #6d765e;
  --color-breath-of-celery-700: #575e4b;
  --color-breath-of-celery-800: #404536;
  --color-breath-of-celery-900: #2c3025;
  --color-breath-of-celery-950: #191c13;
}

SCSS

$breath-of-celery: #dce7cb;
$breath-of-celery-rgb: 220, 231, 203;
$breath-of-celery-light: mix(#fff, $breath-of-celery, 20%);
$breath-of-celery-dark: mix(#000, $breath-of-celery, 20%);

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