Isle of Capri

CSS

:root {
  --isle-of-capri: #0099c9;
  --isle-of-capri-rgb: 0 153 201;
  --isle-of-capri-oklch: oklch(0.639 0.127 229.5);
}

.element {
  color: var(--isle-of-capri);
  background-color: hsl(194 100% 39%);
  border-color: oklch(0.639 0.127 229.5);
}

Tailwind CSS v4

@theme {
  --color-isle-of-capri: #0099c9;
  --color-isle-of-capri-50: #d2fdff;
  --color-isle-of-capri-100: #bef0ff;
  --color-isle-of-capri-200: #9cdfff;
  --color-isle-of-capri-300: #6fc3ed;
  --color-isle-of-capri-400: #39acda;
  --color-isle-of-capri-500: #0094c9;
  --color-isle-of-capri-600: #007da9;
  --color-isle-of-capri-700: #006488;
  --color-isle-of-capri-800: #004a64;
  --color-isle-of-capri-900: #003346;
  --color-isle-of-capri-950: #001f2e;
}

SCSS

$isle-of-capri: #0099c9;
$isle-of-capri-rgb: 0, 153, 201;
$isle-of-capri-light: mix(#fff, $isle-of-capri, 20%);
$isle-of-capri-dark: mix(#000, $isle-of-capri, 20%);

.element {
  color: $isle-of-capri;
  box-shadow: 0 0 0 2px rgba($isle-of-capri, 0.35);
}