A sophisticated palette inspired by deep blacks and cool blues from the image, combining strong dark tones with refreshing aqua and cyan accents to evoke professionalism and calmness suitable for tech or creative brands.
A sophisticated palette inspired by deep blacks and cool blues from the image, combining strong dark tones with refreshing aqua and cyan accents to evoke professionalism and calmness suitable for tech or creative brands.
Explore the color systemColorFly checks the palette colors against each other and suggests the clearest logo/background combinations.
The main colors combine black with deep cyan and cool blue hues creating a cohesive, calming, and trustworthy palette suitable for professional digital identities.
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 combine black with deep cyan and cool blue hues creating a cohesive, calming, and trustworthy palette suitable for professional digital identities.
RolesLogo, Btn Primary Bg, Btn Outlined Border
Offers a strong foundation and sophistication, emphasizing professionalism and boldness.
#0000000, 0, 00, 0, 00, 0, 0, 100RolesLink, Btn Secondary Bg, Headline
A deep cyan tone that adds depth, balance, and a sense of calm confidence.
#004E5F0, 78, 95191, 100, 19100, 18, 0, 63RolesBtn Outlined Text
Brings a refreshing and vibrant highlight to support calls to action and links visually.
#0099A90, 153, 169186, 100, 33100, 9, 0, 34The support colors are lighter blues that extend and soften the main palette, enhancing usability and balance without overpowering the core colors.
RolesIcon, Border, Divider, Outline
A softer aqua tone that complements the deeper blues, maintaining a calm and modern feel.
#2BB8C443, 184, 196185, 64, 4778, 6, 0, 23RolesBg Light
A pale cyan that provides a gentle, clean background to support content visibility.
#60CFDC96, 207, 220186, 64, 6256, 6, 0, 14Utility colors for backgrounds, text, borders, and balance.
RolesBtn Primary Text, Btn Secondary Text
#FFFFFF255, 255, 2550, 0, 1000, 0, 0, 0#F1F5F8241, 245, 248206, 33, 963, 1, 0, 3RolesBg Dark, Text
#1A1A1A26, 26, 260, 0, 100, 0, 0, 90Copy 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-jet-black: #000000;
--color-rich-cerulean: #004E5F;
--color-cool-aqua: #0099A9;
--color-soft-azure: #2BB8C4;
--color-azure: #60CFDC;
--color-pure-white: #FFFFFF;
--color-near-white: #F1F5F8;
--color-rich-black: #1A1A1A;
}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: #000000;
--role-btn-primary-bg: #000000;
--role-btn-outlined-border: #000000;
--role-link: #004E5F;
--role-btn-secondary-bg: #004E5F;
--role-headline: #004E5F;
--role-btn-outlined-text: #0099A9;
--role-icon: #2BB8C4;
--role-border: #2BB8C4;
--role-divider: #2BB8C4;
--role-outline: #2BB8C4;
--role-bg-light: #60CFDC;
--role-btn-primary-text: #FFFFFF;
--role-btn-secondary-text: #FFFFFF;
--role-bg-dark: #1A1A1A;
--role-text: #1A1A1A;
}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.{
"jet-black": "#000000",
"rich-cerulean": "#004E5F",
"cool-aqua": "#0099A9",
"soft-azure": "#2BB8C4",
"azure": "#60CFDC",
"pure-white": "#FFFFFF",
"near-white": "#F1F5F8",
"rich-black": "#1A1A1A"
}