This monochromatic palette blends delicate porcelain-inspired whites, greys, and soft blues to evoke elegance and calm sophistication, perfect for creating a serene and refined brand identity.
This monochromatic palette blends delicate porcelain-inspired whites, greys, and soft blues to evoke elegance and calm sophistication, perfect for creating a serene and refined brand identity.
Explore the color systemColorFly checks the palette colors against each other and suggests the clearest logo/background combinations.
The main colors form a cohesive monochromatic scheme of soft porcelain-inspired white, pale blue, and subtle grey-blue variants that establish a tranquil yet distinctive brand presence.
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 form a cohesive monochromatic scheme of soft porcelain-inspired white, pale blue, and subtle grey-blue variants that establish a tranquil yet distinctive brand presence.
RolesLogo, Link, Btn Primary Bg, Btn Outlined Border, Btn Outlined Text
Porcelain White creates a clean, fresh foundation evoking delicate porcelain surfaces and purity, forming the core recognizable brand tone.
#F8F9FA248, 249, 250210, 17, 981, 0, 0, 2RolesHeadline, Btn Secondary Bg
Powder Blue adds gentle depth and softness reminiscent of blue porcelain accents, enriching the palette with calm sophistication.
#DAE6F2218, 230, 242210, 48, 9010, 5, 0, 5Slate Blue Grey grounds the palette with a muted, steady harmony, reflecting the subtle greys found in porcelain shadowing and edges.
#A3B0C3163, 176, 195216, 21, 7016, 10, 0, 24The support colors extend the monochromatic base with nuanced blue-grey tones that enhance the main colors and provide visual interest while maintaining softness and subordination.
RolesIcon, Border, Divider, Outline
Smoky Blue reinforces the main color harmony by providing understated contrast suitable for UI elements that should remain subtle yet clear.
#8B95A4139, 149, 164216, 12, 5915, 9, 0, 36Utility colors for backgrounds, text, borders, and balance.
RolesBg Light
#FFFFFF255, 255, 2550, 0, 1000, 0, 0, 0RolesBg Dark
#F7F8FA247, 248, 250220, 23, 971, 1, 0, 2RolesText, Btn Primary Text, Btn Secondary Text
#2C3E5044, 62, 80210, 29, 2445, 23, 0, 69Copy 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-porcelain-white: #F8F9FA;
--color-powder-blue: #DAE6F2;
--color-slate-blue-grey: #A3B0C3;
--color-smoky-blue: #8B95A4;
--color-pure-white: #FFFFFF;
--color-ivory-white: #F7F8FA;
--color-charcoal-blue: #2C3E50;
}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: #F8F9FA;
--role-link: #F8F9FA;
--role-btn-primary-bg: #F8F9FA;
--role-btn-outlined-border: #F8F9FA;
--role-btn-outlined-text: #F8F9FA;
--role-headline: #DAE6F2;
--role-btn-secondary-bg: #DAE6F2;
--role-icon: #8B95A4;
--role-border: #8B95A4;
--role-divider: #8B95A4;
--role-outline: #8B95A4;
--role-bg-light: #FFFFFF;
--role-bg-dark: #F7F8FA;
--role-text: #2C3E50;
--role-btn-primary-text: #2C3E50;
--role-btn-secondary-text: #2C3E50;
}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.{
"porcelain-white": "#F8F9FA",
"powder-blue": "#DAE6F2",
"slate-blue-grey": "#A3B0C3",
"smoky-blue": "#8B95A4",
"pure-white": "#FFFFFF",
"ivory-white": "#F7F8FA",
"charcoal-blue": "#2C3E50"
}