Tell Me a Secret

CSS

:root {
  --tell-me-a-secret: #f0f3f1;
  --tell-me-a-secret-rgb: 240 243 241;
  --tell-me-a-secret-oklch: oklch(0.961 0.004 157.2);
}

.element {
  color: var(--tell-me-a-secret);
  background-color: hsl(140 11% 95%);
  border-color: oklch(0.961 0.004 157.2);
}

Tailwind CSS v4

@theme {
  --color-tell-me-a-secret: #f0f3f1;
  --color-tell-me-a-secret-50: #f4f5f5;
  --color-tell-me-a-secret-100: #e7e8e7;
  --color-tell-me-a-secret-200: #d3d5d3;
  --color-tell-me-a-secret-300: #b6b8b6;
  --color-tell-me-a-secret-400: #9c9f9d;
  --color-tell-me-a-secret-500: #848785;
  --color-tell-me-a-secret-600: #707271;
  --color-tell-me-a-secret-700: #595b5a;
  --color-tell-me-a-secret-800: #414342;
  --color-tell-me-a-secret-900: #2d2e2d;
  --color-tell-me-a-secret-950: #1a1b1a;
}

SCSS

$tell-me-a-secret: #f0f3f1;
$tell-me-a-secret-rgb: 240, 243, 241;
$tell-me-a-secret-light: mix(#fff, $tell-me-a-secret, 20%);
$tell-me-a-secret-dark: mix(#000, $tell-me-a-secret, 20%);

.element {
  color: $tell-me-a-secret;
  box-shadow: 0 0 0 2px rgba($tell-me-a-secret, 0.35);
}