Seafoam Whisper

CSS

:root {
  --seafoam-whisper: #a1bdbf;
  --seafoam-whisper-rgb: 161 189 191;
  --seafoam-whisper-oklch: oklch(0.778 0.031 201.8);
}

.element {
  color: var(--seafoam-whisper);
  background-color: hsl(184 19% 69%);
  border-color: oklch(0.778 0.031 201.8);
}

Tailwind CSS v4

@theme {
  --color-seafoam-whisper: #a1bdbf;
  --color-seafoam-whisper-50: #ecf8f9;
  --color-seafoam-whisper-100: #ddebec;
  --color-seafoam-whisper-200: #c6d8da;
  --color-seafoam-whisper-300: #a6bcbe;
  --color-seafoam-whisper-400: #8aa4a6;
  --color-seafoam-whisper-500: #6f8d8f;
  --color-seafoam-whisper-600: #5e7779;
  --color-seafoam-whisper-700: #4b5f61;
  --color-seafoam-whisper-800: #364646;
  --color-seafoam-whisper-900: #253031;
  --color-seafoam-whisper-950: #141c1d;
}

SCSS

$seafoam-whisper: #a1bdbf;
$seafoam-whisper-rgb: 161, 189, 191;
$seafoam-whisper-light: mix(#fff, $seafoam-whisper, 20%);
$seafoam-whisper-dark: mix(#000, $seafoam-whisper, 20%);

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