T-Bird Turquoise

CSS

:root {
  --t-bird-turquoise: #6fc1af;
  --t-bird-turquoise-rgb: 111 193 175;
  --t-bird-turquoise-oklch: oklch(0.753 0.085 178.1);
}

.element {
  color: var(--t-bird-turquoise);
  background-color: hsl(167 40% 60%);
  border-color: oklch(0.753 0.085 178.1);
}

Tailwind CSS v4

@theme {
  --color-t-bird-turquoise: #6fc1af;
  --color-t-bird-turquoise-50: #dcfef6;
  --color-t-bird-turquoise-100: #caf2e9;
  --color-t-bird-turquoise-200: #ade1d6;
  --color-t-bird-turquoise-300: #86c6b9;
  --color-t-bird-turquoise-400: #62af9e;
  --color-t-bird-turquoise-500: #399986;
  --color-t-bird-turquoise-600: #328172;
  --color-t-bird-turquoise-700: #28675b;
  --color-t-bird-turquoise-800: #1c4c41;
  --color-t-bird-turquoise-900: #12352d;
  --color-t-bird-turquoise-950: #04201a;
}

SCSS

$t-bird-turquoise: #6fc1af;
$t-bird-turquoise-rgb: 111, 193, 175;
$t-bird-turquoise-light: mix(#fff, $t-bird-turquoise, 20%);
$t-bird-turquoise-dark: mix(#000, $t-bird-turquoise, 20%);

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