Turquoise Blue
See how #57F2CC looks when applied to real interface components.
Use lighter tints for backgrounds to maintain readability while keeping brand identity.
:root {
/* Turquoise Blue Base */
--color-primary: #57F2CC;
--color-primary-rgb: 87 242 204;
--color-primary-hsl: 165 86% 65%;
/* Foreground text color based on contrast */
--color-primary-foreground: #000000;
/* Shades */
--color-primary-50: #e7fdf8;
--color-primary-100: #b8fae9;
--color-primary-200: #88f6db;
--color-primary-300: #59f3cc;
--color-primary-400: #2aefbe;
--color-primary-500: #10d5a4;
--color-primary-600: #0ca680;
--color-primary-700: #09775b;
--color-primary-800: #054737;
--color-primary-900: #021812;
}