Asagi Blue

CSS

:root {
  --asagi-blue: #48929b;
  --asagi-blue-rgb: 72 146 155;
  --asagi-blue-oklch: oklch(0.616 0.075 205.9);
}

.element {
  color: var(--asagi-blue);
  background-color: hsl(187 37% 45%);
  border-color: oklch(0.616 0.075 205.9);
}

Tailwind CSS v4

@theme {
  --color-asagi-blue: #48929b;
  --color-asagi-blue-50: #defcff;
  --color-asagi-blue-100: #cceff5;
  --color-asagi-blue-200: #b0dee5;
  --color-asagi-blue-300: #8ac3cb;
  --color-asagi-blue-400: #66abb4;
  --color-asagi-blue-500: #40949e;
  --color-asagi-blue-600: #377d86;
  --color-asagi-blue-700: #2c646b;
  --color-asagi-blue-800: #1e4a4e;
  --color-asagi-blue-900: #143336;
  --color-asagi-blue-950: #051f21;
}

SCSS

$asagi-blue: #48929b;
$asagi-blue-rgb: 72, 146, 155;
$asagi-blue-light: mix(#fff, $asagi-blue, 20%);
$asagi-blue-dark: mix(#000, $asagi-blue, 20%);

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