Picton Blue
See how #56CCF2 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: #56CCF2;
--color-primary-rgb: 86 204 242;
--color-primary-hsl: 195 86% 64%;
/* Foreground text color based on contrast */
--color-primary-foreground: #000000;
/* Shades */
--color-primary-50: #e7f8fd;
--color-primary-100: #b8e9fa;
--color-primary-200: #88dbf6;
--color-primary-300: #59ccf3;
--color-primary-400: #2abeef;
--color-primary-500: #10a4d5;
--color-primary-600: #0c80a6;
--color-primary-700: #095b77;
--color-primary-800: #053747;
--color-primary-900: #021218;
}