Eye Blue

CSS

:root {
  --eye-blue: #1e80c7;
  --eye-blue-rgb: 30 128 199;
  --eye-blue-oklch: oklch(0.581 0.138 246.2);
}

.element {
  color: var(--eye-blue);
  background-color: hsl(205 74% 45%);
  border-color: oklch(0.581 0.138 246.2);
}

Tailwind CSS v4

@theme {
  --color-eye-blue: #1e80c7;
  --color-eye-blue-50: #d7faff;
  --color-eye-blue-100: #c4edff;
  --color-eye-blue-200: #a5daff;
  --color-eye-blue-300: #7dbdfb;
  --color-eye-blue-400: #51a5eb;
  --color-eye-blue-500: #198cdb;
  --color-eye-blue-600: #1a76b9;
  --color-eye-blue-700: #155f95;
  --color-eye-blue-800: #07466e;
  --color-eye-blue-900: #05314e;
  --color-eye-blue-950: #001c34;
}

SCSS

$eye-blue: #1e80c7;
$eye-blue-rgb: 30, 128, 199;
$eye-blue-light: mix(#fff, $eye-blue, 20%);
$eye-blue-dark: mix(#000, $eye-blue, 20%);

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