Picton Blue
See how #30C7EC looks when applied to real interface components.
Use lighter tints for backgrounds to maintain readability while keeping brand identity.
:root {
/* Picton Blue Base */
--color-primary: #30C7EC;
--color-primary-rgb: 48 199 236;
--color-primary-hsl: 192 83% 56%;
/* Foreground text color based on contrast */
--color-primary-foreground: #000000;
/* Shades */
--color-primary-50: #e8f9fd;
--color-primary-100: #b9ecf8;
--color-primary-200: #8adff4;
--color-primary-300: #5cd2f0;
--color-primary-400: #2dc5eb;
--color-primary-500: #14acd2;
--color-primary-600: #0f86a3;
--color-primary-700: #0b5f75;
--color-primary-800: #073946;
--color-primary-900: #021317;
}