Siniy Blue

CSS

:root {
  --siniy-blue: #4c4dff;
  --siniy-blue-rgb: 76 77 255;
  --siniy-blue-oklch: oklch(0.543 0.254 273.7);
}

.element {
  color: var(--siniy-blue);
  background-color: hsl(240 100% 65%);
  border-color: oklch(0.543 0.254 273.7);
}

Tailwind CSS v4

@theme {
  --color-siniy-blue: #4c4dff;
  --color-siniy-blue-50: #e0f0ff;
  --color-siniy-blue-100: #d0e1ff;
  --color-siniy-blue-200: #b7c9ff;
  --color-siniy-blue-300: #96a7ff;
  --color-siniy-blue-400: #7587ff;
  --color-siniy-blue-500: #5d61ff;
  --color-siniy-blue-600: #4e54fa;
  --color-siniy-blue-700: #3e43ca;
  --color-siniy-blue-800: #283198;
  --color-siniy-blue-900: #1a226c;
  --color-siniy-blue-950: #0d0f4b;
}

SCSS

$siniy-blue: #4c4dff;
$siniy-blue-rgb: 76, 77, 255;
$siniy-blue-light: mix(#fff, $siniy-blue, 20%);
$siniy-blue-dark: mix(#000, $siniy-blue, 20%);

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