Mint Morning

CSS

:root {
  --mint-morning: #00ddcc;
  --mint-morning-rgb: 0 221 204;
  --mint-morning-oklch: oklch(0.807 0.142 185.1);
}

.element {
  color: var(--mint-morning);
  background-color: hsl(175 100% 43%);
  border-color: oklch(0.807 0.142 185.1);
}

Tailwind CSS v4

@theme {
  --color-mint-morning: #00ddcc;
  --color-mint-morning-50: #c7fffc;
  --color-mint-morning-100: #b1f8f0;
  --color-mint-morning-200: #89e8de;
  --color-mint-morning-300: #4dcfc4;
  --color-mint-morning-400: #00b9a9;
  --color-mint-morning-500: #00a393;
  --color-mint-morning-600: #00897c;
  --color-mint-morning-700: #006e63;
  --color-mint-morning-800: #005147;
  --color-mint-morning-900: #003931;
  --color-mint-morning-950: #00231d;
}

SCSS

$mint-morning: #00ddcc;
$mint-morning-rgb: 0, 221, 204;
$mint-morning-light: mix(#fff, $mint-morning, 20%);
$mint-morning-dark: mix(#000, $mint-morning, 20%);

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