This palette channels YouTube's high-recognition red with a crisp, product-led system that stays instantly familiar while feeling clean and modern. The website color is preserved as the core brand red, then balanced with deep charcoal and bright white neutrals for strong interface clarity and video-
This palette channels YouTube's high-recognition red with a crisp, product-led system that stays instantly familiar while feeling clean and modern. The website color is preserved as the core brand red, then balanced with deep charcoal and bright white neutrals for strong interface clarity and video-
Explore the color systemColorFly checks the palette colors against each other and suggests the clearest logo/background combinations.
The palette is anchored by the same vivid red used on the website, creating instant brand recognition and a direct connection to the platform's existing visual identity. Deep graphite and bright white complete a high-contrast system that is
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 is anchored by the same vivid red used on the website, creating instant brand recognition and a direct connection to the platform's existing visual identity. Deep graphite and bright white complete a high-contrast system that is
RolesLogo, Btn Primary Bg, Btn Outlined Border
The exact brand red carries recognition and action, making the system feel unmistakably tied to the website.
#FF0000255, 0, 00, 100, 500, 100, 100, 0RolesLink, Btn Secondary Bg
A slightly deeper red adds hierarchy and keeps secondary actions visibly distinct while staying on-brand.
#C5161D197, 22, 29358, 80, 430, 89, 85, 23RolesHeadline, Bg Dark
Near-black gives the interface a cinematic edge and provides the strongest foundation for prominent type.
#11111117, 17, 170, 0, 70, 0, 0, 93These accents stay subdued and functional, extending the red-led system with interface support rather than competing visual energy. They help separate controls, frame content, and维
RolesIcon, Border, Divider
A cool slate supports structure and UI utility without pulling attention away from the red brand cue.
#6B7280107, 114, 128220, 9, 4616, 11, 0, 50RolesOutline
A soft light gray keeps outlines visible and polished while remaining quiet beside the main red.
#E5E7EB229, 231, 235220, 13, 913, 2, 0, 8Utility colors for backgrounds, text, borders, and balance.
RolesBg Light, Btn Secondary Text
#FFFFFF255, 255, 2550, 0, 1000, 0, 0, 0RolesBtn Outlined Text
#F8F9FA248, 249, 250210, 17, 981, 0, 0, 2RolesText, Btn Primary 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-website-red: #FF0000;
--color-playback-crimson: #C5161D;
--color-graphite-black: #111111;
--color-slate-mist: #6B7280;
--color-cloud-gray: #E5E7EB;
--color-pure-white: #FFFFFF;
--color-soft-white: #F8F9FA;
}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: #FF0000;
--role-btn-primary-bg: #FF0000;
--role-btn-outlined-border: #FF0000;
--role-link: #C5161D;
--role-btn-secondary-bg: #C5161D;
--role-headline: #111111;
--role-bg-dark: #111111;
--role-icon: #6B7280;
--role-border: #6B7280;
--role-divider: #6B7280;
--role-outline: #E5E7EB;
--role-bg-light: #FFFFFF;
--role-btn-secondary-text: #FFFFFF;
--role-btn-outlined-text: #F8F9FA;
--role-text: #111111;
--role-btn-primary-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.{
"website-red": "#FF0000",
"playback-crimson": "#C5161D",
"graphite-black": "#111111",
"slate-mist": "#6B7280",
"cloud-gray": "#E5E7EB",
"pure-white": "#FFFFFF",
"soft-white": "#F8F9FA"
}