Crunchyroll color palette
EntertainmentCrunchyroll's color identity centers on a vibrant orange paired with clean whites and deep grays, reflecting its focus on anime and energetic entertainment. The palette is consistent across digital and print, supporting a lively yet approachable brand presence.
crunchyroll.comCrunchyroll colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- Crunchyroll OrangePrimary255, 94, 0
- Crunchyroll CharcoalSecondary35, 37, 43
- Crunchyroll YellowAccent255, 214, 0
Surfaces
Page, cards and dividers.- Crunchyroll WhiteBackground255, 255, 255
- Crunchyroll Light GraySurface245, 245, 247
- Crunchyroll Border GrayBorder229, 229, 229
Text
Three tiers of copy.- Crunchyroll CharcoalText35, 37, 43
- Crunchyroll Medium GraySecondary text108, 111, 120
- Crunchyroll Muted GrayMuted text163, 163, 163
Semantic
Feedback and state colors.- Crunchyroll Success GreenSuccess46, 204, 113
- Crunchyroll Warning AmberWarning255, 179, 0
- Crunchyroll Error RedError229, 57, 53
- Crunchyroll Info BlueInfo33, 150, 243
Use Crunchyroll's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
crunchyroll-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #2196F3;
--error: #E53935;
--accent: #FFD600;
--border: #E5E5E5;
--primary: #FF5E00;
--success: #2ECC71;
--surface: #F5F5F7;
--warning: #FFB300;
--secondary: #23252B;
--text-muted: #A3A3A3;
--background: #FFFFFF;
--text-primary: #23252B;
--text-secondary: #6C6F78;
}Contrast and accessibility
Every text tone tested against every surface, per WCAG 2.1.
Text on background
Needs 4.5:1 for body text
15.3:1
Pass
Text on surface
Needs 4.5:1 for body text
14.1:1
Pass
Secondary text on background
Needs 4.5:1 for body text
5.0:1
Pass
Secondary text on surface
Needs 4.5:1 for body text
4.6:1
Pass
Muted text on background
Needs 3:1 for large text
2.5:1
Fail
Muted text on surface
Needs 3:1 for large text
2.3:1
Fail
Crunchyroll gray and neutral colors
The quiet part of the Crunchyroll palette: page background, card surfaces, dividers and the three text tones that sit on them. Click a value to copy it.
- Crunchyroll WhiteBackground
- HEX
- RGB
- HSL
- Crunchyroll Light GraySurface
- HEX
- RGB
- HSL
- Crunchyroll Border GrayBorder
- HEX
- RGB
- HSL
- Crunchyroll CharcoalText
- HEX
- RGB
- HSL
- Crunchyroll Medium GraySecondary text
- HEX
- RGB
- HSL
- Crunchyroll Muted GrayMuted text
- HEX
- RGB
- HSL
About Crunchyroll's colors
Crunchyroll's palette is built around a high-energy orange, contrasted by deep neutrals and bright accents for clarity and excitement. The scheme is designed to be instantly recognizable and accessible across platforms.
Orange and yellow create a warm, energetic pairing.
Dark charcoal grounds the palette for readability.
White and light gray provide clean, open space.
Psychology
The orange evokes enthusiasm, creativity, and a sense of fun, aligning with anime culture. Deep grays and whites balance the vibrancy, ensuring legibility and a modern feel.
Evolution
Crunchyroll's core orange has remained unchanged since its early branding, maintaining strong recognition. The supporting neutrals and accent yellow were refined for digital clarity as the platform expanded.
Where Crunchyroll uses each color
- Primary
Crunchyroll Orange is used for logos, primary buttons, and key highlights across the website and app.
- Secondary
Crunchyroll Charcoal appears in navigation bars, footers, and text for contrast.
- Accent
Crunchyroll Yellow is used for badges, highlights, and notification elements.
- Backgrounds
Crunchyroll White and Light Gray are used for main backgrounds and content surfaces.
- Text
Charcoal and Medium Gray are used for primary and secondary text, with Muted Gray for disabled or less prominent information.
- Semantic
Success Green, Warning Amber, Error Red, and Info Blue are used for system messages, alerts, and status indicators.
Crunchyroll color questions
Hex codes, RGB values, neutrals and how to use the palette.
The official Crunchyroll primary color is #FF5E00, known as Crunchyroll Orange. This color is used for the logo and primary actions.
Crunchyroll Orange (#FF5E00) is RGB(255, 94, 0) and CMYK(0, 63, 100, 0). Use these values for accurate reproduction in digital and print.
Crunchyroll uses Charcoal (#23252B), Medium Gray (#6C6F78), Muted Gray (#A3A3A3), and Light Gray (#F5F5F7) for UI backgrounds and text. These ensure readability and a clean interface.
Use Crunchyroll Orange (#FF5E00) for primary actions and branding, with Charcoal and White for backgrounds and text. Accent and semantic colors should highlight important information or status.
The secondary color is Crunchyroll Charcoal, #23252B, and the accent is Crunchyroll Yellow, #FFD600. Together with the primary they make up the three brand colors at the top of this page.
4 of 6 text and background pairings meet WCAG 2.1 AA contrast. The contrast section above shows every pairing with its exact ratio.
Use the export block on this page. It gives you CSS custom properties, a Tailwind config, W3C design tokens or a shadcn/ui theme built from these exact hex values, with copy and download buttons.
Yes. Export the Claude Code skill, Cursor rules or Codex prompt from the same block. The agent then applies Crunchyroll's colors consistently when it generates UI.
Make something in the spirit of Crunchyroll
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.