This spa beauty brand palette features serene blues and gentle lavenders that evoke relaxation and sophistication, balanced with soft greens for a natural, calming accent. The neutral greys and off-white anchor the palette for versatile, readable backgrounds and text, creating an elegant and harmonious brand identity ideal for wellness and beauty.
This spa beauty brand palette features serene blues and gentle lavenders that evoke relaxation and sophistication, balanced with soft greens for a natural, calming accent. The neutral greys and off-white anchor the palette for versatile, readable backgrounds and text, creating an elegant and harmonious brand identity ideal for wellness and beauty.
Explore the color systemColorFly checks the palette colors against each other and suggests the clearest logo/background combinations.
The combination of soft blue, lavender, and cool periwinkle harmonizes naturally to convey a soothing and upscale spa atmosphere while maintaining clear visual distinction within the brand colors.
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 combination of soft blue, lavender, and cool periwinkle harmonizes naturally to convey a soothing and upscale spa atmosphere while maintaining clear visual distinction within the brand colors.
RolesLogo, Btn Primary Bg, Btn Outlined Border, Btn Outlined Text
Steel Blue anchors the brand with a sophisticated, calming tone perfect for logos and primary call to actions.
#5A82B690, 130, 182214, 39, 5351, 29, 0, 29RolesLink, Btn Secondary Bg, Headline
Lavender adds femininity and softness, ideal for links, headlines, and secondary buttons to enhance the serene brand aesthetic.
#A798D1167, 152, 209256, 38, 7120, 27, 0, 18Periwinkle supports the palette subtly as a tertiary main color to complement Steel Blue and Lavender with gentle depth.
#7687AB118, 135, 171221, 24, 5731, 21, 0, 33Soft sage green and muted aquamarine provide natural, subdued accents that reinforce the calming and fresh ambiance without overpowering the main colors.
RolesIcon, Border, Divider, Outline
Sage Green introduces a natural, earthy element that balances the cooler blues and purples while remaining visually subordinate.
#8FAE8B143, 174, 139113, 18, 6118, 0, 20, 32Aquamarine adds cool clarity and a subtle freshness that harmonizes with the main colors quietly enhancing interface elements.
#6CAAA6108, 170, 166176, 27, 5536, 0, 2, 33Utility colors for backgrounds, text, borders, and balance.
RolesBg Light, Btn Primary Text
#FFFFFF255, 255, 2550, 0, 1000, 0, 0, 0RolesBg Dark
#F5F5F5245, 245, 2450, 0, 960, 0, 0, 4RolesText, Btn Secondary Text
#2E2E2E46, 46, 460, 0, 180, 0, 0, 82Copy 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-steel-blue: #5A82B6;
--color-lavender: #A798D1;
--color-periwinkle: #7687AB;
--color-sage-green: #8FAE8B;
--color-aquamarine: #6CAAA6;
--color-white: #FFFFFF;
--color-cultured: #F5F5F5;
--color-charcoal: #2E2E2E;
}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: #5A82B6;
--role-btn-primary-bg: #5A82B6;
--role-btn-outlined-border: #5A82B6;
--role-btn-outlined-text: #5A82B6;
--role-link: #A798D1;
--role-btn-secondary-bg: #A798D1;
--role-headline: #A798D1;
--role-icon: #8FAE8B;
--role-border: #8FAE8B;
--role-divider: #8FAE8B;
--role-outline: #8FAE8B;
--role-bg-light: #FFFFFF;
--role-btn-primary-text: #FFFFFF;
--role-bg-dark: #F5F5F5;
--role-text: #2E2E2E;
--role-btn-secondary-text: #2E2E2E;
}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.{
"steel-blue": "#5A82B6",
"lavender": "#A798D1",
"periwinkle": "#7687AB",
"sage-green": "#8FAE8B",
"aquamarine": "#6CAAA6",
"white": "#FFFFFF",
"cultured": "#F5F5F5",
"charcoal": "#2E2E2E"
}