This palette keeps the system minimal and bright with two restrained main colors anchored by clean neutrals. The warm accent adds a human, optimistic note while the cool gray-blue keeps the interface crisp and modern.
This palette keeps the system minimal and bright with two restrained main colors anchored by clean neutrals. The warm accent adds a human, optimistic note while the cool gray-blue keeps the interface crisp and modern.
Explore the color systemColorFly checks the palette colors against each other and suggests the clearest logo/background combinations.
The warm and cool main colors create a simple, recognizable contrast that stays minimal without feeling flat. Their pairing keeps the palette bright and contemporary while remaining versatile across brand and interface use.
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 warm and cool main colors create a simple, recognizable contrast that stays minimal without feeling flat. Their pairing keeps the palette bright and contemporary while remaining versatile across brand and interface use.
RolesLogo, Btn Primary Bg, Headline
Coral adds a soft, optimistic energy that gives the brand warmth without becoming loud.
#D97745217, 119, 6920, 66, 560, 45, 68, 15RolesLink, Btn Secondary Bg
Slate Blue provides a calm, neutral counterpoint that supports clarity and keeps the system understated.
#8FA3B8143, 163, 184211, 22, 6422, 11, 0, 28The support colors stay quiet and functional, extending the palette with subtle structure and a muted accent. They help the system feel polished and bright without competing with the two main colors.
RolesIcon, Border, Divider, Outline
Light Slate reinforces the cool side of the palette and works well for interface structure.
#B8C1CC184, 193, 204213, 16, 7610, 5, 0, 20RolesBtn Outlined Border
Silver gives outlined elements a soft presence that fits the minimal tone.
#E6E8EA230, 232, 234210, 9, 912, 1, 0, 8Utility colors for backgrounds, text, borders, and balance.
RolesBg Light
#FFFFFF255, 255, 2550, 0, 1000, 0, 0, 0RolesBtn Outlined Text
#F5F7F8245, 247, 248200, 18, 971, 0, 0, 3RolesBg Dark, Text, Btn Primary Text, Btn Secondary Text
#1E232830, 35, 40210, 14, 1425, 13, 0, 84Copy 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-coral: #D97745;
--color-slate-blue: #8FA3B8;
--color-light-slate: #B8C1CC;
--color-silver: #E6E8EA;
--color-white: #FFFFFF;
--color-ivory: #F5F7F8;
--color-charcoal: #1E2328;
}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: #D97745;
--role-btn-primary-bg: #D97745;
--role-headline: #D97745;
--role-link: #8FA3B8;
--role-btn-secondary-bg: #8FA3B8;
--role-icon: #B8C1CC;
--role-border: #B8C1CC;
--role-divider: #B8C1CC;
--role-outline: #B8C1CC;
--role-btn-outlined-border: #E6E8EA;
--role-bg-light: #FFFFFF;
--role-btn-outlined-text: #F5F7F8;
--role-bg-dark: #1E2328;
--role-text: #1E2328;
--role-btn-primary-text: #1E2328;
--role-btn-secondary-text: #1E2328;
}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.{
"coral": "#D97745",
"slate-blue": "#8FA3B8",
"light-slate": "#B8C1CC",
"silver": "#E6E8EA",
"white": "#FFFFFF",
"ivory": "#F5F7F8",
"charcoal": "#1E2328"
}