Delicate Turquoise

CSS

:root {
  --delicate-turquoise: #c0dfe2;
  --delicate-turquoise-rgb: 192 223 226;
  --delicate-turquoise-oklch: oklch(0.882 0.033 203.7);
}

.element {
  color: var(--delicate-turquoise);
  background-color: hsl(185 37% 82%);
  border-color: oklch(0.882 0.033 203.7);
}

Tailwind CSS v4

@theme {
  --color-delicate-turquoise: #c0dfe2;
  --color-delicate-turquoise-50: #ebf8fa;
  --color-delicate-turquoise-100: #dcebed;
  --color-delicate-turquoise-200: #c5d9db;
  --color-delicate-turquoise-300: #a5bdc0;
  --color-delicate-turquoise-400: #88a5a7;
  --color-delicate-turquoise-500: #6d8d90;
  --color-delicate-turquoise-600: #5c777a;
  --color-delicate-turquoise-700: #4a5f62;
  --color-delicate-turquoise-800: #354647;
  --color-delicate-turquoise-900: #243031;
  --color-delicate-turquoise-950: #131d1d;
}

SCSS

$delicate-turquoise: #c0dfe2;
$delicate-turquoise-rgb: 192, 223, 226;
$delicate-turquoise-light: mix(#fff, $delicate-turquoise, 20%);
$delicate-turquoise-dark: mix(#000, $delicate-turquoise, 20%);

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