A Sephora-inspired system built around a bold black-and-white retail core with a vivid signature accent for conversion and recognition. It keeps the look premium, high-contrast, and editorial while leaving enough flexibility for digital UI and merchandising surfaces.
A Sephora-inspired system built around a bold black-and-white retail core with a vivid signature accent for conversion and recognition. It keeps the look premium, high-contrast, and editorial while leaving enough flexibility for digital UI and merchandising surfaces.
Explore the color systemColorFly checks the palette colors against each other and suggests the clearest logo/background combinations.
The palette pairs a stark neutral retail base with a saturated accent that creates immediate Sephora-like recognition. The contrast is clean, modern, and highly usable across storefronts, product pages, and campaigns.
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 palette pairs a stark neutral retail base with a saturated accent that creates immediate Sephora-like recognition. The contrast is clean, modern, and highly usable across storefronts, product pages, and campaigns.
RolesLogo, Btn Secondary Bg, Headline
A definitive brand anchor that delivers the crisp, editorial presence associated with luxury beauty retail.
#0000000, 0, 00, 0, 00, 0, 0, 100RolesBtn Primary Bg, Link, Btn Outlined Border
A vivid conversion color that provides the sharp brand signal and call-to-action energy people expect from Sephora-inspired design.
#E60023230, 0, 35351, 100, 450, 100, 85, 10RolesBg Light
A clean foundation that keeps layouts bright, premium, and product-forward.
#FFFFFF255, 255, 2550, 0, 1000, 0, 0, 0The support accents extend the core black-white-red system with subdued companions that improve hierarchy, usability, and interface states without competing for attention.
RolesIcon, Border, Divider
A restrained mid-tone that softens hard edges and supports UI structure without diluting the high-contrast brand feel.
#5A5A5A90, 90, 900, 0, 350, 0, 0, 65RolesOutline
A quiet interface gray for subtle focus and separation on light surfaces.
#B8B8B8184, 184, 1840, 0, 720, 0, 0, 28Utility colors for backgrounds, text, borders, and balance.
RolesBtn Primary Text, Btn Secondary Text
#FFFFFF255, 255, 2550, 0, 1000, 0, 0, 0RolesBtn Outlined Text
#F5F5F5245, 245, 2450, 0, 960, 0, 0, 4RolesBg Dark, Text
#0000000, 0, 00, 0, 00, 0, 0, 100Copy 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-sephora-black: #000000;
--color-signature-beauty-red: #E60023;
--color-pure-white: #FFFFFF;
--color-graphite-gray: #5A5A5A;
--color-soft-platinum: #B8B8B8;
--color-mist-white: #F5F5F5;
}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: #000000;
--role-btn-secondary-bg: #000000;
--role-headline: #000000;
--role-btn-primary-bg: #E60023;
--role-link: #E60023;
--role-btn-outlined-border: #E60023;
--role-bg-light: #FFFFFF;
--role-icon: #5A5A5A;
--role-border: #5A5A5A;
--role-divider: #5A5A5A;
--role-outline: #B8B8B8;
--role-btn-primary-text: #FFFFFF;
--role-btn-secondary-text: #FFFFFF;
--role-btn-outlined-text: #F5F5F5;
--role-bg-dark: #000000;
--role-text: #000000;
}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.{
"sephora-black": "#000000",
"signature-beauty-red": "#E60023",
"pure-white": "#FFFFFF",
"graphite-gray": "#5A5A5A",
"soft-platinum": "#B8B8B8",
"mist-white": "#F5F5F5"
}