This palette turns the image’s dusty tan ground, cool blue label, and dark shadow into a practical brand system with a grounded natural base and a crisp contrasting accent. The result feels weathered, trustworthy, and tactile while still working cleanly across digital interfaces.
This palette turns the image’s dusty tan ground, cool blue label, and dark shadow into a practical brand system with a grounded natural base and a crisp contrasting accent. The result feels weathered, trustworthy, and tactile while still working cleanly across digital interfaces.
Explore the color systemColorFly checks the palette colors against each other and suggests the clearest logo/background combinations.
The main colors combine a dusty sand base with a cool slate blue accent and a deep charcoal anchor, echoing the image’s natural surface, label, and shadow. Together they create a rugged, readable system that feels both grounded and deliberately designed.
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 combine a dusty sand base with a cool slate blue accent and a deep charcoal anchor, echoing the image’s natural surface, label, and shadow. Together they create a rugged, readable system that feels both grounded and deliberately designed.
RolesLogo, Btn Secondary Bg
Sand brings the warm, sun-worn character that makes the palette feel earthy and approachable.
#C8B28B200, 178, 13938, 36, 660, 11, 31, 22RolesLink, Btn Primary Bg, Btn Outlined Border, Btn Outlined Text
Slate Blue supplies the clearest visual contrast and gives the system a calm, reliable digital edge.
#5E7C9A94, 124, 154210, 24, 4939, 19, 0, 40RolesHeadline
Charcoal adds weight and authority, keeping the palette grounded and legible without feeling harsh.
#2F2A2447, 42, 3633, 13, 160, 11, 23, 82The support colors extend the main palette with muted, image-inspired helpers that stay subordinate to the sand and blue relationship. They reinforce the weathered, tactile feeling without pulling attention away from the core brand colors.
RolesIcon, Border
Cocoa Brown echoes the darker earthy tones in the image and works as a restrained structural accent.
#8A6F58138, 111, 8828, 22, 440, 20, 36, 46RolesDivider, Outline
Slate Gray softens interfaces with a cool, desaturated note that bridges the blue accent and neutral surfaces.
#6F8A8F111, 138, 143189, 13, 5022, 3, 0, 44Utility colors for backgrounds, text, borders, and balance.
RolesBg Light, Btn Primary Text
#FFFFFF255, 255, 2550, 0, 1000, 0, 0, 0#F4F0E8244, 240, 23240, 35, 930, 2, 5, 4RolesBg Dark, Text, Btn Secondary Text
#11111117, 17, 170, 0, 70, 0, 0, 93Copy 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-sand: #C8B28B;
--color-slate-blue: #5E7C9A;
--color-charcoal: #2F2A24;
--color-cocoa-brown: #8A6F58;
--color-slate-gray: #6F8A8F;
--color-white: #FFFFFF;
--color-ivory: #F4F0E8;
--color-black: #111111;
}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: #C8B28B;
--role-btn-secondary-bg: #C8B28B;
--role-link: #5E7C9A;
--role-btn-primary-bg: #5E7C9A;
--role-btn-outlined-border: #5E7C9A;
--role-btn-outlined-text: #5E7C9A;
--role-headline: #2F2A24;
--role-icon: #8A6F58;
--role-border: #8A6F58;
--role-divider: #6F8A8F;
--role-outline: #6F8A8F;
--role-bg-light: #FFFFFF;
--role-btn-primary-text: #FFFFFF;
--role-bg-dark: #111111;
--role-text: #111111;
--role-btn-secondary-text: #111111;
}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.{
"sand": "#C8B28B",
"slate-blue": "#5E7C9A",
"charcoal": "#2F2A24",
"cocoa-brown": "#8A6F58",
"slate-gray": "#6F8A8F",
"white": "#FFFFFF",
"ivory": "#F4F0E8",
"black": "#111111"
}