This palette uses a bold black to convey strength and professionalism, balanced with a cool slate blue and a medium gray to provide depth and modernity. The support colors add subtle contrast and versatility while the neutrals ensure clarity and readability across all brand applications.
This palette uses a bold black to convey strength and professionalism, balanced with a cool slate blue and a medium gray to provide depth and modernity. The support colors add subtle contrast and versatility while the neutrals ensure clarity and readability across all brand applications.
Explore the color systemColorFly checks the palette colors against each other and suggests the clearest logo/background combinations.
The palette features a strong dominance of black paired with slate blue and medium gray, creating an analogous harmony with a modern, professional feel and clear visual hierarchy.
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 palette features a strong dominance of black paired with slate blue and medium gray, creating an analogous harmony with a modern, professional feel and clear visual hierarchy.
RolesLogo, Link, Btn Primary Bg, Btn Outlined Border, Btn Outlined Text
Jet Black provides a bold, authoritative base for the brand, evoking professionalism and confidence.
#11111117, 17, 170, 0, 70, 0, 0, 93RolesHeadline, Btn Secondary Bg
Slate Blue adds coolness and modernity, promoting trust and technological innovation.
#3A5F7D58, 95, 125207, 37, 3654, 24, 0, 51RolesDivider, Icon, Border, Outline
Medium Grayish Blue offers depth and subtle accents that complement the strong main colors without overpowering.
#6B778D107, 119, 141219, 14, 4924, 16, 0, 45The support colors extend the palette with softer and subdued tones that emphasize clarity and allow the main colors to remain dominant without competing visually.
RolesBg Dark
Light Gray Blue provides soft background support and readable button text that merges well with slate and black tones.
#9BA5B1155, 165, 177213, 12, 6512, 7, 0, 31RolesBg Light
Pale Sky Gray serves as a near-white neutral for backgrounds and ensures strong contrast for primary button text.
#D3D8DF211, 216, 223215, 16, 855, 3, 0, 13Utility colors for backgrounds, text, borders, and balance.
RolesBtn Primary Text, Btn Secondary Text
#FFFFFF255, 255, 2550, 0, 1000, 0, 0, 0#F7F8FA247, 248, 250220, 23, 971, 1, 0, 2RolesText
#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: #111111;
--color-slate-blue: #3A5F7D;
--color-medium-grayish-blue: #6B778D;
--color-light-gray-blue: #9BA5B1;
--color-pale-sky-gray: #D3D8DF;
--color-pure-white: #FFFFFF;
--color-near-white: #F7F8FA;
--color-dark-charcoal: #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: #111111;
--role-link: #111111;
--role-btn-primary-bg: #111111;
--role-btn-outlined-border: #111111;
--role-btn-outlined-text: #111111;
--role-headline: #3A5F7D;
--role-btn-secondary-bg: #3A5F7D;
--role-divider: #6B778D;
--role-icon: #6B778D;
--role-border: #6B778D;
--role-outline: #6B778D;
--role-bg-dark: #9BA5B1;
--role-bg-light: #D3D8DF;
--role-btn-primary-text: #FFFFFF;
--role-btn-secondary-text: #FFFFFF;
--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": "#111111",
"slate-blue": "#3A5F7D",
"medium-grayish-blue": "#6B778D",
"light-gray-blue": "#9BA5B1",
"pale-sky-gray": "#D3D8DF",
"pure-white": "#FFFFFF",
"near-white": "#F7F8FA",
"dark-charcoal": "#1A1A1A"
}