Electronic

CSS

:root {
  --electronic: #556d88;
  --electronic-rgb: 85 109 136;
  --electronic-oklch: oklch(0.526 0.051 251.8);
}

.element {
  color: var(--electronic);
  background-color: hsl(212 23% 43%);
  border-color: oklch(0.526 0.051 251.8);
}

Tailwind CSS v4

@theme {
  --color-electronic: #556d88;
  --color-electronic-50: #ebf6ff;
  --color-electronic-100: #dce9f9;
  --color-electronic-200: #c6d6ea;
  --color-electronic-300: #a6b9d2;
  --color-electronic-400: #89a1bd;
  --color-electronic-500: #6d89a8;
  --color-electronic-600: #5d748e;
  --color-electronic-700: #4a5d72;
  --color-electronic-800: #354454;
  --color-electronic-900: #242f3a;
  --color-electronic-950: #131b24;
}

SCSS

$electronic: #556d88;
$electronic-rgb: 85, 109, 136;
$electronic-light: mix(#fff, $electronic, 20%);
$electronic-dark: mix(#000, $electronic, 20%);

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