This palette translates the image’s muted striped fabric and sunlit sand into a calm, grounded brand system with soft mineral tones and a restrained, modern contrast. The colors feel tactile and practical, giving the identity enough warmth for approachability while staying polished and versatile across digital and print use.
This palette translates the image’s muted striped fabric and sunlit sand into a calm, grounded brand system with soft mineral tones and a restrained, modern contrast. The colors feel tactile and practical, giving the identity enough warmth for approachability while staying polished and versatile across digital and print use.
Explore the color systemColorFly checks the palette colors against each other and suggests the clearest logo/background combinations.
The main colors work together as a quiet stripe-based system, using closely related dusty hues that echo fabric shadows and sun-faded dye. Together they create a cohesive palette with a soft, composed character and enough variation to support hierarchy without breaking harmony.
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 work together as a quiet stripe-based system, using closely related dusty hues that echo fabric shadows and sun-faded dye. Together they create a cohesive palette with a soft, composed character and enough variation to support hierarchy without breaking harmony.
RolesLogo, Headline
Lavender Gray gives the palette a refined, slightly cool signature that feels calm and contemporary.
#8C7F9A140, 127, 154269, 12, 559, 18, 0, 40RolesLink, Btn Primary Bg
Rose Taupe adds grounded warmth and dependable contrast while keeping the palette muted and tactile.
#7B6C70123, 108, 112344, 6, 450, 12, 9, 52RolesBtn Secondary Bg, Btn Outlined Border, Btn Outlined Text
Mauve Mist softens the system with a dusty mid-tone that supports separation and subtle emphasis.
#A79AA5167, 154, 165309, 7, 630, 8, 1, 35The support colors extend the palette with sandy and slate-like accents that reinforce the image’s natural light and shadow without competing with the main hues. They improve usability by adding quiet structure and a slightly deeper tonal anchor where needed.
RolesIcon, Border
Sand Dune brings a warm earth note that balances the cooler mauves and ties the palette back to the photographed sand.
#9C8A72156, 138, 11434, 18, 530, 12, 27, 39RolesDivider, Outline
Slate Mauve adds a restrained structural accent that strengthens separation while staying compatible with the dusty fabric tones.
#6E6773110, 103, 115275, 6, 434, 10, 0, 55Utility colors for backgrounds, text, borders, and balance.
RolesBg Light, Btn Primary Text
#FFFFFF255, 255, 2550, 0, 1000, 0, 0, 0#F4F1EC244, 241, 23637, 27, 940, 1, 3, 4RolesBg Dark, Text, Btn Secondary Text
#15131A21, 19, 26257, 16, 919, 27, 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-lavender-gray: #8C7F9A;
--color-rose-taupe: #7B6C70;
--color-mauve-mist: #A79AA5;
--color-sand-dune: #9C8A72;
--color-slate-mauve: #6E6773;
--color-white: #FFFFFF;
--color-ivory: #F4F1EC;
--color-charcoal: #15131A;
}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: #8C7F9A;
--role-headline: #8C7F9A;
--role-link: #7B6C70;
--role-btn-primary-bg: #7B6C70;
--role-btn-secondary-bg: #A79AA5;
--role-btn-outlined-border: #A79AA5;
--role-btn-outlined-text: #A79AA5;
--role-icon: #9C8A72;
--role-border: #9C8A72;
--role-divider: #6E6773;
--role-outline: #6E6773;
--role-bg-light: #FFFFFF;
--role-btn-primary-text: #FFFFFF;
--role-bg-dark: #15131A;
--role-text: #15131A;
--role-btn-secondary-text: #15131A;
}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.{
"lavender-gray": "#8C7F9A",
"rose-taupe": "#7B6C70",
"mauve-mist": "#A79AA5",
"sand-dune": "#9C8A72",
"slate-mauve": "#6E6773",
"white": "#FFFFFF",
"ivory": "#F4F1EC",
"charcoal": "#15131A"
}