A compact spectrum of deep teal through vivid emerald to crisp white creates a sharp, modern identity with strong digital clarity. The palette feels technical and premium without becoming cold, using saturated green-blue steps to guide attention and keep the system recognizable across brand and UI.
A compact spectrum of deep teal through vivid emerald to crisp white creates a sharp, modern identity with strong digital clarity. The palette feels technical and premium without becoming cold, using saturated green-blue steps to guide attention and keep the system recognizable across brand and UI.
Explore the color systemColorFly checks the palette colors against each other and suggests the clearest logo/background combinations.
The main colors move from deep teal into brighter emerald, creating a tight analogous system that feels cohesive and instantly usable across branding and interface states. The progression gives the palette a clear visual rhythm: grounded, a
Clear roles create a consistent brand experience.Assign existing palette colors to brand, typography, and interface roles.
A compact view of the brand, support, and neutral colors that make up this system.
The main colors move from deep teal into brighter emerald, creating a tight analogous system that feels cohesive and instantly usable across branding and interface states. The progression gives the palette a clear visual rhythm: grounded, a
RolesLogo, Btn Secondary Bg
A dark, stabilizing teal that anchors the brand mark and gives secondary buttons a confident, grounded presence.
#06363A6, 54, 58185, 81, 1390, 7, 0, 77RolesLink, Btn Primary Bg
A vivid teal-green that carries interaction states and primary action energy while staying aligned with the core identity.
#0F9F8215, 159, 130168, 83, 3491, 0, 18, 38RolesBtn Outlined Border, Btn Outlined Text, Headline
A brighter emerald accent that adds momentum for outlines and headlines without overpowering the deeper core tones.
#24E48A36, 228, 138152, 78, 5284, 0, 39, 11The support accents extend the teal-emerald core with restrained tonal depth and a crisp highlight, helping the system feel complete across icons, borders, and surfaces. They stay,
RolesIcon, Border
A muted jade support tone that reinforces the brand's cool technical character for subtle UI structure.
#0A726610, 114, 102173, 84, 2491, 0, 11, 55RolesDivider, Outline
A deeper green-blue support shade that works well for quiet separation and low-noise interface boundaries.
#0D5A5513, 90, 85176, 75, 2086, 0, 6, 65Utility colors for backgrounds, text, borders, and balance.
RolesBg Light, Btn Secondary Text
#FFFFFF255, 255, 2550, 0, 1000, 0, 0, 0#F3F7F6243, 247, 246165, 20, 962, 0, 0, 3RolesBg Dark, Text, Btn Primary Text
#0712147, 18, 20189, 48, 565, 10, 0, 92Copy palette values for design systems, websites, and client handoff.
Use these in CSS when you want every raw palette color available by name. Best for websites, landing pages, and design system variables.
Use when: you need the actual colors.:root {
--color-abyss-teal: #06363A;
--color-signal-teal: #0F9F82;
--color-pulse-emerald: #24E48A;
--color-harbor-jade: #0A7266;
--color-tide-moss: #0D5A55;
--color-pure-white: #FFFFFF;
--color-mist-white: #F3F7F6;
--color-near-black: #071214;
}Use these in CSS when colors are assigned to practical jobs like text, buttons, borders, links, and backgrounds.
Use when: you need UI roles, not just swatches.:root {
--role-logo: #06363A;
--role-btn-secondary-bg: #06363A;
--role-link: #0F9F82;
--role-btn-primary-bg: #0F9F82;
--role-btn-outlined-border: #24E48A;
--role-btn-outlined-text: #24E48A;
--role-headline: #24E48A;
--role-icon: #0A7266;
--role-border: #0A7266;
--role-divider: #0D5A55;
--role-outline: #0D5A55;
--role-bg-light: #FFFFFF;
--role-btn-secondary-text: #FFFFFF;
--role-bg-dark: #071214;
--role-text: #071214;
--role-btn-primary-text: #071214;
}Use this structured palette data in apps, generators, plugins, or tools that need to read the palette programmatically.
Use when: a developer or app needs data.{
"abyss-teal": "#06363A",
"signal-teal": "#0F9F82",
"pulse-emerald": "#24E48A",
"harbor-jade": "#0A7266",
"tide-moss": "#0D5A55",
"pure-white": "#FFFFFF",
"mist-white": "#F3F7F6",
"near-black": "#071214"
}