Microwave Blue

CSS

:root {
  --microwave-blue: #2d5254;
  --microwave-blue-rgb: 45 82 84;
  --microwave-blue-oklch: oklch(0.412 0.043 200.1);
}

.element {
  color: var(--microwave-blue);
  background-color: hsl(183 30% 25%);
  border-color: oklch(0.412 0.043 200.1);
}

Tailwind CSS v4

@theme {
  --color-microwave-blue: #2d5254;
  --color-microwave-blue-50: #e8f9fa;
  --color-microwave-blue-100: #d8ecee;
  --color-microwave-blue-200: #c0dadc;
  --color-microwave-blue-300: #9fbec1;
  --color-microwave-blue-400: #81a6a8;
  --color-microwave-blue-500: #648f91;
  --color-microwave-blue-600: #55797b;
  --color-microwave-blue-700: #446162;
  --color-microwave-blue-800: #314748;
  --color-microwave-blue-900: #213132;
  --color-microwave-blue-950: #101d1e;
}

SCSS

$microwave-blue: #2d5254;
$microwave-blue-rgb: 45, 82, 84;
$microwave-blue-light: mix(#fff, $microwave-blue, 20%);
$microwave-blue-dark: mix(#000, $microwave-blue, 20%);

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