Blue Bolero

CSS

:root {
  --blue-bolero: #01a7ae;
  --blue-bolero-rgb: 1 167 174;
  --blue-bolero-oklch: oklch(0.662 0.112 200.1);
}

.element {
  color: var(--blue-bolero);
  background-color: hsl(182 99% 34%);
  border-color: oklch(0.662 0.112 200.1);
}

Tailwind CSS v4

@theme {
  --color-blue-bolero: #01a7ae;
  --color-blue-bolero-50: #d1ffff;
  --color-blue-bolero-100: #bcf4f8;
  --color-blue-bolero-200: #9ae3e9;
  --color-blue-bolero-300: #6bc9d0;
  --color-blue-bolero-400: #33b2b9;
  --color-blue-bolero-500: #009ba3;
  --color-blue-bolero-600: #00838a;
  --color-blue-bolero-700: #00696f;
  --color-blue-bolero-800: #004e50;
  --color-blue-bolero-900: #003638;
  --color-blue-bolero-950: #002123;
}

SCSS

$blue-bolero: #01a7ae;
$blue-bolero-rgb: 1, 167, 174;
$blue-bolero-light: mix(#fff, $blue-bolero, 20%);
$blue-bolero-dark: mix(#000, $blue-bolero, 20%);

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