Steel Blue Grey

CSS

:root {
  --steel-blue-grey: #436175;
  --steel-blue-grey-rgb: 67 97 117;
  --steel-blue-grey-oklch: oklch(0.477 0.048 238.3);
}

.element {
  color: var(--steel-blue-grey);
  background-color: hsl(204 27% 36%);
  border-color: oklch(0.477 0.048 238.3);
}

Tailwind CSS v4

@theme {
  --color-steel-blue-grey: #436175;
  --color-steel-blue-grey-50: #e9f7ff;
  --color-steel-blue-grey-100: #daeaf7;
  --color-steel-blue-grey-200: #c3d7e7;
  --color-steel-blue-grey-300: #a2bbce;
  --color-steel-blue-grey-400: #85a3b8;
  --color-steel-blue-grey-500: #698ba3;
  --color-steel-blue-grey-600: #597689;
  --color-steel-blue-grey-700: #475e6e;
  --color-steel-blue-grey-800: #324551;
  --color-steel-blue-grey-900: #223038;
  --color-steel-blue-grey-950: #111c23;
}

SCSS

$steel-blue-grey: #436175;
$steel-blue-grey-rgb: 67, 97, 117;
$steel-blue-grey-light: mix(#fff, $steel-blue-grey, 20%);
$steel-blue-grey-dark: mix(#000, $steel-blue-grey, 20%);

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