Viking
See how #64CCDB looks when applied to real interface components.
Use lighter tints for backgrounds to maintain readability while keeping brand identity.
:root {
/* Viking Base */
--color-primary: #64CCDB;
--color-primary-rgb: 100 204 219;
--color-primary-hsl: 188 62% 63%;
/* Foreground text color based on contrast */
--color-primary-foreground: #000000;
/* Shades */
--color-primary-50: #eaf8fa;
--color-primary-100: #c1eaf0;
--color-primary-200: #98dce7;
--color-primary-300: #6ecedd;
--color-primary-400: #45c0d3;
--color-primary-500: #2ca7ba;
--color-primary-600: #228291;
--color-primary-700: #185d67;
--color-primary-800: #0f383e;
--color-primary-900: #051315;
}