Ring Box Blue

CSS

:root {
  --ring-box-blue: #b4d9d8;
  --ring-box-blue-rgb: 180 217 216;
  --ring-box-blue-oklch: oklch(0.858 0.039 194.4);
}

.element {
  color: var(--ring-box-blue);
  background-color: hsl(178 33% 78%);
  border-color: oklch(0.858 0.039 194.4);
}

Tailwind CSS v4

@theme {
  --color-ring-box-blue: #b4d9d8;
  --color-ring-box-blue-50: #e9f9f9;
  --color-ring-box-blue-100: #daecec;
  --color-ring-box-blue-200: #c2dada;
  --color-ring-box-blue-300: #a1bebe;
  --color-ring-box-blue-400: #84a6a5;
  --color-ring-box-blue-500: #688f8e;
  --color-ring-box-blue-600: #587978;
  --color-ring-box-blue-700: #466160;
  --color-ring-box-blue-800: #334746;
  --color-ring-box-blue-900: #223130;
  --color-ring-box-blue-950: #111d1d;
}

SCSS

$ring-box-blue: #b4d9d8;
$ring-box-blue-rgb: 180, 217, 216;
$ring-box-blue-light: mix(#fff, $ring-box-blue, 20%);
$ring-box-blue-dark: mix(#000, $ring-box-blue, 20%);

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