Touch of Turquoise

CSS

:root {
  --touch-of-turquoise: #a1d4cf;
  --touch-of-turquoise-rgb: 161 212 207;
  --touch-of-turquoise-oklch: oklch(0.833 0.053 188.7);
}

.element {
  color: var(--touch-of-turquoise);
  background-color: hsl(174 37% 73%);
  border-color: oklch(0.833 0.053 188.7);
}

Tailwind CSS v4

@theme {
  --color-touch-of-turquoise: #a1d4cf;
  --color-touch-of-turquoise-50: #e5faf9;
  --color-touch-of-turquoise-100: #d5eeec;
  --color-touch-of-turquoise-200: #bbdcd9;
  --color-touch-of-turquoise-300: #99c1be;
  --color-touch-of-turquoise-400: #7aa9a5;
  --color-touch-of-turquoise-500: #5b928d;
  --color-touch-of-turquoise-600: #4e7b77;
  --color-touch-of-turquoise-700: #3e635f;
  --color-touch-of-turquoise-800: #2c4945;
  --color-touch-of-turquoise-900: #1e3230;
  --color-touch-of-turquoise-950: #0e1e1c;
}

SCSS

$touch-of-turquoise: #a1d4cf;
$touch-of-turquoise-rgb: 161, 212, 207;
$touch-of-turquoise-light: mix(#fff, $touch-of-turquoise, 20%);
$touch-of-turquoise-dark: mix(#000, $touch-of-turquoise, 20%);

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