Thousand Sons Blue

CSS

:root {
  --thousand-sons-blue: #02d8e9;
  --thousand-sons-blue-rgb: 2 216 233;
  --thousand-sons-blue-oklch: oklch(0.805 0.137 204.9);
}

.element {
  color: var(--thousand-sons-blue);
  background-color: hsl(184 98% 46%);
  border-color: oklch(0.805 0.137 204.9);
}

Tailwind CSS v4

@theme {
  --color-thousand-sons-blue: #02d8e9;
  --color-thousand-sons-blue-50: #c8ffff;
  --color-thousand-sons-blue-100: #b2f6ff;
  --color-thousand-sons-blue-200: #8ae5f2;
  --color-thousand-sons-blue-300: #50cbdb;
  --color-thousand-sons-blue-400: #00b5c5;
  --color-thousand-sons-blue-500: #009eb1;
  --color-thousand-sons-blue-600: #008695;
  --color-thousand-sons-blue-700: #006b78;
  --color-thousand-sons-blue-800: #004f57;
  --color-thousand-sons-blue-900: #00373d;
  --color-thousand-sons-blue-950: #002226;
}

SCSS

$thousand-sons-blue: #02d8e9;
$thousand-sons-blue-rgb: 2, 216, 233;
$thousand-sons-blue-light: mix(#fff, $thousand-sons-blue, 20%);
$thousand-sons-blue-dark: mix(#000, $thousand-sons-blue, 20%);

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