Rockman Blue

CSS

:root {
  --rockman-blue: #31a2f2;
  --rockman-blue-rgb: 49 162 242;
  --rockman-blue-oklch: oklch(0.688 0.153 244.8);
}

.element {
  color: var(--rockman-blue);
  background-color: hsl(205 88% 57%);
  border-color: oklch(0.688 0.153 244.8);
}

Tailwind CSS v4

@theme {
  --color-rockman-blue: #31a2f2;
  --color-rockman-blue-50: #d3faff;
  --color-rockman-blue-100: #bfeeff;
  --color-rockman-blue-200: #9edbff;
  --color-rockman-blue-300: #72beff;
  --color-rockman-blue-400: #3fa6f2;
  --color-rockman-blue-500: #008ce3;
  --color-rockman-blue-600: #0077c0;
  --color-rockman-blue-700: #005f9a;
  --color-rockman-blue-800: #004672;
  --color-rockman-blue-900: #003151;
  --color-rockman-blue-950: #001d36;
}

SCSS

$rockman-blue: #31a2f2;
$rockman-blue-rgb: 49, 162, 242;
$rockman-blue-light: mix(#fff, $rockman-blue, 20%);
$rockman-blue-dark: mix(#000, $rockman-blue, 20%);

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