This Chill Lofi palette pairs softened analog tones with a calm, lived-in contrast that feels intimate and creatively unforced. The system is warm enough for comfort, cool enough for focus, and structured enough to work cleanly across a brand and interface.
This Chill Lofi palette pairs softened analog tones with a calm, lived-in contrast that feels intimate and creatively unforced. The system is warm enough for comfort, cool enough for focus, and structured enough to work cleanly across a brand and interface.
Explore the color systemColorFly checks the palette colors against each other and suggests the clearest logo/background combinations.
The main colors stay close on the color wheel, which gives the palette a mellow, cohesive lofi mood without feeling flat. Their shared dusty undertones keep the system recognizable and easy to use across both identity and interface touchpoints.
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 stay close on the color wheel, which gives the palette a mellow, cohesive lofi mood without feeling flat. Their shared dusty undertones keep the system recognizable and easy to use across both identity and interface touchpoints.
RolesLogo, Headline
Mauve gives the brand a soft nostalgic signature that feels creative and slightly dreamy.
#8B5E7A139, 94, 122323, 19, 460, 32, 12, 45RolesLink, Btn Primary Bg
Slate Blue adds a calm digital clarity that keeps the palette grounded and usable in UI states.
#6F7FA8111, 127, 168223, 25, 5534, 24, 0, 34RolesBtn Secondary Bg, Btn Outlined Border, Btn Outlined Text
Umber introduces a warm analog note that balances the cooler tones and reinforces the lofi, recorded-in-a-room feeling.
#A37A5D163, 122, 9325, 28, 500, 25, 43, 36The support colors extend the palette with low-key accents that improve usability without pulling attention away from the main mood. They add a muted atmospheric layer that suits playlists, covers, and relaxed product surfaces.
RolesIcon, Outline
Lavender softens the interface edges and bridges the mauve and blue hues with a quieter reflective accent.
#9A8FBD154, 143, 189254, 26, 6519, 24, 0, 26RolesBorder, Divider
Dusty Rose warms separators and borders so the system feels handcrafted rather than sterile.
#B78C7A183, 140, 12218, 30, 600, 23, 33, 28Utility colors for backgrounds, text, borders, and balance.
RolesBg Light
#FFFFFF255, 255, 2550, 0, 1000, 0, 0, 0#F3F0EA243, 240, 23440, 27, 940, 1, 4, 5RolesBg Dark, Text, Btn Primary Text, Btn Secondary Text
#1F1B1D31, 27, 29330, 7, 110, 13, 6, 88Copy 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-mauve: #8B5E7A;
--color-slate-blue: #6F7FA8;
--color-umber: #A37A5D;
--color-lavender: #9A8FBD;
--color-dusty-rose: #B78C7A;
--color-white: #FFFFFF;
--color-ivory: #F3F0EA;
--color-charcoal: #1F1B1D;
}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: #8B5E7A;
--role-headline: #8B5E7A;
--role-link: #6F7FA8;
--role-btn-primary-bg: #6F7FA8;
--role-btn-secondary-bg: #A37A5D;
--role-btn-outlined-border: #A37A5D;
--role-btn-outlined-text: #A37A5D;
--role-icon: #9A8FBD;
--role-outline: #9A8FBD;
--role-border: #B78C7A;
--role-divider: #B78C7A;
--role-bg-light: #FFFFFF;
--role-bg-dark: #1F1B1D;
--role-text: #1F1B1D;
--role-btn-primary-text: #1F1B1D;
--role-btn-secondary-text: #1F1B1D;
}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.{
"mauve": "#8B5E7A",
"slate-blue": "#6F7FA8",
"umber": "#A37A5D",
"lavender": "#9A8FBD",
"dusty-rose": "#B78C7A",
"white": "#FFFFFF",
"ivory": "#F3F0EA",
"charcoal": "#1F1B1D"
}