Greek Isles

CSS

:root {
  --greek-isles: #bbdcf0;
  --greek-isles-rgb: 187 220 240;
  --greek-isles-oklch: oklch(0.877 0.045 234.6);
}

.element {
  color: var(--greek-isles);
  background-color: hsl(203 64% 84%);
  border-color: oklch(0.877 0.045 234.6);
}

Tailwind CSS v4

@theme {
  --color-greek-isles: #bbdcf0;
  --color-greek-isles-50: #eaf7ff;
  --color-greek-isles-100: #dbebf5;
  --color-greek-isles-200: #c3d8e5;
  --color-greek-isles-300: #a3bbcc;
  --color-greek-isles-400: #85a3b5;
  --color-greek-isles-500: #698ba0;
  --color-greek-isles-600: #597687;
  --color-greek-isles-700: #475e6c;
  --color-greek-isles-800: #33454f;
  --color-greek-isles-900: #233037;
  --color-greek-isles-950: #121c22;
}

SCSS

$greek-isles: #bbdcf0;
$greek-isles-rgb: 187, 220, 240;
$greek-isles-light: mix(#fff, $greek-isles, 20%);
$greek-isles-dark: mix(#000, $greek-isles, 20%);

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