Uniqlo color palette
FashionUniqlo's color identity is defined by its bold, instantly recognizable red, paired with clean white and neutral grays for a minimalist, modern look. The palette is consistent across digital, retail, and packaging touchpoints.
uniqlo.comUniqlo colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- Uniqlo RedPrimary255, 0, 0
- Uniqlo WhiteSecondary255, 255, 255
- Uniqlo Deep RedAccent230, 0, 18
Surfaces
Page, cards and dividers.- Uniqlo Light GrayBackground245, 245, 245
- Uniqlo Surface GraySurface229, 229, 229
- Uniqlo Border GrayBorder204, 204, 204
Text
Three tiers of copy.- Uniqlo CharcoalText34, 34, 34
- Uniqlo Medium GraySecondary text102, 102, 102
- Uniqlo Muted GrayMuted text153, 153, 153
Semantic
Feedback and state colors.- Uniqlo GreenSuccess0, 138, 0
- Uniqlo YellowWarning255, 184, 0
- Uniqlo Error RedError214, 0, 0
- Uniqlo BlueInfo0, 113, 206
Use Uniqlo's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
uniqlo-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #0071CE;
--error: #D60000;
--accent: #E60012;
--border: #CCCCCC;
--primary: #FF0000;
--success: #008A00;
--surface: #E5E5E5;
--warning: #FFB800;
--secondary: #FFFFFF;
--text-muted: #999999;
--background: #F5F5F5;
--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.6:1
Pass
Text on surface
Needs 4.5:1 for body text
12.6:1
Pass
Secondary text on background
Needs 4.5:1 for body text
5.3: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.6:1
Fail
Muted text on surface
Needs 3:1 for large text
2.3:1
Fail
Uniqlo gray and neutral colors
The quiet part of the Uniqlo palette: page background, card surfaces, dividers and the three text tones that sit on them. Click a value to copy it.
- Uniqlo Light GrayBackground
- HEX
- RGB
- HSL
- Uniqlo Surface GraySurface
- HEX
- RGB
- HSL
- Uniqlo Border GrayBorder
- HEX
- RGB
- HSL
- Uniqlo CharcoalText
- HEX
- RGB
- HSL
- Uniqlo Medium GraySecondary text
- HEX
- RGB
- HSL
- Uniqlo Muted GrayMuted text
- HEX
- RGB
- HSL
About Uniqlo's colors
Uniqlo's palette uses a dominant red for brand recognition, offset by white and subtle grays for clarity and simplicity. The use of minimal color supports a clean, approachable, and modern visual identity.
Primary red contrasts with white for maximum visibility.
Neutral grays provide structure and hierarchy.
Accent deep red is used for emphasis and highlights.
Psychology
Red conveys energy, excitement, and approachability, aligning with Uniqlo's accessible fashion ethos. The neutrals create a sense of order and modernity.
Evolution
Uniqlo's color palette has remained stable since its international expansion, maintaining the iconic red and white. Minor adjustments to gray tones have been made for digital clarity.
Where Uniqlo uses each color
- Primary
Used in the Uniqlo logo, call-to-action buttons, and key promotional banners.
- Secondary
Serves as the background for the logo, website, and product packaging.
- Accent
Applied to sale tags, highlights, and special campaign graphics.
- Backgrounds
Light gray backgrounds are used for product grids and UI surfaces.
- Text
Charcoal and medium gray are used for primary and secondary text throughout the website and app.
- Semantic
Green, yellow, red, and blue are used for status indicators, alerts, and informational messages.
Uniqlo color questions
Hex codes, RGB values, neutrals and how to use the palette.
The official Uniqlo primary color is #FF0000. This red is used in the logo and key brand elements.
Uniqlo Red (#FF0000) is RGB(255, 0, 0) and CMYK(0, 100, 100, 0). These values ensure consistency across print and digital media.
Uniqlo uses several grays including #F5F5F5 (Light Gray), #E5E5E5 (Surface Gray), and #CCCCCC (Border Gray) for backgrounds and UI structure.
Use Uniqlo Red (#FF0000) for primary actions and branding, with white and grays for backgrounds, surfaces, and text. Accent and semantic colors are reserved for highlights and status messaging.
The secondary color is Uniqlo White, #FFFFFF, and the accent is Uniqlo Deep Red, #E60012. 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 Uniqlo's colors consistently when it generates UI.
Make something in the spirit of Uniqlo
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.