Salt Crystal

CSS

:root {
  --salt-crystal: #f0ede0;
  --salt-crystal-rgb: 240 237 224;
  --salt-crystal-oklch: oklch(0.945 0.018 96.1);
}

.element {
  color: var(--salt-crystal);
  background-color: hsl(49 35% 91%);
  border-color: oklch(0.945 0.018 96.1);
}

Tailwind CSS v4

@theme {
  --color-salt-crystal: #f0ede0;
  --color-salt-crystal-50: #f6f5f0;
  --color-salt-crystal-100: #e9e8e1;
  --color-salt-crystal-200: #d6d4cc;
  --color-salt-crystal-300: #b9b8ae;
  --color-salt-crystal-400: #a19f93;
  --color-salt-crystal-500: #898679;
  --color-salt-crystal-600: #747267;
  --color-salt-crystal-700: #5d5b52;
  --color-salt-crystal-800: #44423c;
  --color-salt-crystal-900: #2f2e29;
  --color-salt-crystal-950: #1c1b17;
}

SCSS

$salt-crystal: #f0ede0;
$salt-crystal-rgb: 240, 237, 224;
$salt-crystal-light: mix(#fff, $salt-crystal, 20%);
$salt-crystal-dark: mix(#000, $salt-crystal, 20%);

.element {
  color: $salt-crystal;
  box-shadow: 0 0 0 2px rgba($salt-crystal, 0.35);
}