Rakuten color palette
EcommerceRakuten's color identity is defined by a bold, distinctive red paired with clean neutrals and subtle accents, reflecting its Japanese heritage and ecommerce focus. The palette emphasizes clarity, trust, and energy across digital and physical touchpoints.
rakuten.comRakuten colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- Rakuten RedPrimary191, 0, 0
- Rakuten WhiteSecondary255, 255, 255
- Rakuten Deep RedAccent102, 0, 0
Surfaces
Page, cards and dividers.- Rakuten Light GrayBackground247, 247, 247
- Rakuten Surface WhiteSurface255, 255, 255
- Rakuten Border GrayBorder224, 224, 224
Text
Three tiers of copy.- Rakuten CharcoalText34, 34, 34
- Rakuten Medium GraySecondary text102, 102, 102
- Rakuten Muted GrayMuted text153, 153, 153
Semantic
Feedback and state colors.- Rakuten GreenSuccess0, 153, 68
- Rakuten YellowWarning255, 179, 0
- Rakuten Error RedError211, 47, 47
- Rakuten BlueInfo25, 118, 210
Use Rakuten's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
rakuten-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #1976D2;
--error: #D32F2F;
--accent: #660000;
--border: #E0E0E0;
--primary: #BF0000;
--success: #009944;
--surface: #FFFFFF;
--warning: #FFB300;
--secondary: #FFFFFF;
--text-muted: #999999;
--background: #F7F7F7;
--text-primary: #222222;
--text-secondary: #666666;
}Contrast and accessibility
Every text tone tested against every surface, per WCAG 2.1.
Text on background
Needs 4.5:1 for body text
14.9:1
Pass
Text on surface
Needs 4.5:1 for body text
15.9:1
Pass
Secondary text on background
Needs 4.5:1 for body text
5.4:1
Pass
Secondary text on surface
Needs 4.5:1 for body text
5.7:1
Pass
Muted text on background
Needs 3:1 for large text
2.7:1
Fail
Muted text on surface
Needs 3:1 for large text
2.8:1
Fail
Rakuten gray and neutral colors
The quiet part of the Rakuten palette: page background, card surfaces, dividers and the three text tones that sit on them. Click a value to copy it.
- Rakuten Light GrayBackground
- HEX
- RGB
- HSL
- Rakuten Surface WhiteSurface
- HEX
- RGB
- HSL
- Rakuten Border GrayBorder
- HEX
- RGB
- HSL
- Rakuten CharcoalText
- HEX
- RGB
- HSL
- Rakuten Medium GraySecondary text
- HEX
- RGB
- HSL
- Rakuten Muted GrayMuted text
- HEX
- RGB
- HSL
About Rakuten's colors
Rakuten's palette is anchored by a vivid red, symbolizing energy and confidence, complemented by clean whites and practical grays for clarity. Accent and semantic colors provide visual cues and accessibility across digital interfaces.
Primary red is contrasted with white for maximum readability.
Grays are used for structure and hierarchy.
Accent deep red highlights important actions or states.
Psychology
Red conveys excitement, urgency, and trust, which are important in ecommerce. The neutral tones balance the vibrancy, ensuring a professional and approachable feel.
Evolution
Rakuten's core red has remained consistent since its rebrand, reinforcing brand recognition. The supporting palette has evolved to include more nuanced grays and semantic colors for digital clarity.
Where Rakuten uses each color
- Primary
Rakuten Red is used for the logo, primary buttons, and key call-to-action elements.
- Secondary
Rakuten White is the main background for web and app screens, ensuring content clarity.
- Accent
Rakuten Deep Red is applied to hover states, active elements, and highlights.
- Backgrounds
Rakuten Light Gray is used for page backgrounds and section dividers.
- Text
Charcoal and medium gray are used for primary and secondary text across the UI.
- Semantic
Green, yellow, red, and blue indicate success, warnings, errors, and informational messages respectively.
Rakuten color questions
Hex codes, RGB values, neutrals and how to use the palette.
The Rakuten primary color hex code is #BF0000. This should be used for all main brand applications.
Rakuten Red (#BF0000) is RGB(191, 0, 0) and CMYK(0, 100, 100, 25). Use these for digital and print consistency.
Rakuten uses #F7F7F7 (Light Gray) for backgrounds and #E0E0E0 (Border Gray) for dividers and UI structure. These neutrals ensure content stands out and maintain a clean interface.
Use Rakuten Red (#BF0000) for primary actions, white and light gray for backgrounds, and charcoal (#222222) for main text. Accent and semantic colors should be reserved for states, notifications, and highlights.
The secondary color is Rakuten White, #FFFFFF, and the accent is Rakuten Deep Red, #660000. 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 Rakuten's colors consistently when it generates UI.
Make something in the spirit of Rakuten
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.