Thermal

CSS

:root {
  --thermal: #3f5052;
  --thermal-rgb: 63 80 82;
  --thermal-oklch: oklch(0.418 0.022 205.2);
}

.element {
  color: var(--thermal);
  background-color: hsl(186 13% 28%);
  border-color: oklch(0.418 0.022 205.2);
}

Tailwind CSS v4

@theme {
  --color-thermal: #3f5052;
  --color-thermal-50: #eef7f8;
  --color-thermal-100: #e0eaeb;
  --color-thermal-200: #cad7d9;
  --color-thermal-300: #abbbbd;
  --color-thermal-400: #90a2a4;
  --color-thermal-500: #768b8d;
  --color-thermal-600: #647577;
  --color-thermal-700: #505e5f;
  --color-thermal-800: #3a4546;
  --color-thermal-900: #282f30;
  --color-thermal-950: #161c1c;
}

SCSS

$thermal: #3f5052;
$thermal-rgb: 63, 80, 82;
$thermal-light: mix(#fff, $thermal, 20%);
$thermal-dark: mix(#000, $thermal, 20%);

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