Smoke on the Water

CSS

:root {
  --smoke-on-the-water: #9bacb3;
  --smoke-on-the-water-rgb: 155 172 179;
  --smoke-on-the-water-oklch: oklch(0.733 0.022 224.4);
}

.element {
  color: var(--smoke-on-the-water);
  background-color: hsl(197 14% 65%);
  border-color: oklch(0.733 0.022 224.4);
}

Tailwind CSS v4

@theme {
  --color-smoke-on-the-water: #9bacb3;
  --color-smoke-on-the-water-50: #eff7fa;
  --color-smoke-on-the-water-100: #e1e9ed;
  --color-smoke-on-the-water-200: #cbd6db;
  --color-smoke-on-the-water-300: #acbac0;
  --color-smoke-on-the-water-400: #91a1a8;
  --color-smoke-on-the-water-500: #778a91;
  --color-smoke-on-the-water-600: #65747b;
  --color-smoke-on-the-water-700: #515d62;
  --color-smoke-on-the-water-800: #3b4448;
  --color-smoke-on-the-water-900: #282f32;
  --color-smoke-on-the-water-950: #161c1e;
}

SCSS

$smoke-on-the-water: #9bacb3;
$smoke-on-the-water-rgb: 155, 172, 179;
$smoke-on-the-water-light: mix(#fff, $smoke-on-the-water, 20%);
$smoke-on-the-water-dark: mix(#000, $smoke-on-the-water, 20%);

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