Allegro color palette
EcommerceAllegro's brand color system is defined by a vibrant orange primary, supported by a clean, neutral UI palette and subtle accent colors. The colors are designed for clarity, accessibility, and strong brand recognition across digital and print touchpoints.
allegro.plAllegro colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- Allegro OrangePrimary255, 90, 0
- Allegro CharcoalSecondary35, 35, 35
- Allegro AmberAccent255, 170, 59
Surfaces
Page, cards and dividers.- Allegro WhiteBackground255, 255, 255
- Allegro Light GraySurface245, 245, 245
- Allegro Border GrayBorder224, 224, 224
Text
Three tiers of copy.- Allegro CharcoalText35, 35, 35
- Allegro Medium GraySecondary text109, 109, 109
- Allegro Muted GrayMuted text166, 166, 166
Semantic
Feedback and state colors.- Allegro GreenSuccess0, 168, 90
- Allegro AmberWarning255, 170, 59
- Allegro RedError229, 57, 53
- Allegro BlueInfo25, 118, 210
Use Allegro's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
allegro-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #1976D2;
--error: #E53935;
--accent: #FFAA3B;
--border: #E0E0E0;
--primary: #FF5A00;
--success: #00A85A;
--surface: #F5F5F5;
--warning: #FFAA3B;
--secondary: #232323;
--text-muted: #A6A6A6;
--background: #FFFFFF;
--text-primary: #232323;
--text-secondary: #6D6D6D;
}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.7:1
Pass
Text on surface
Needs 4.5:1 for body text
14.4:1
Pass
Secondary text on background
Needs 4.5:1 for body text
5.2:1
Pass
Secondary text on surface
Needs 4.5:1 for body text
4.7:1
Pass
Muted text on background
Needs 3:1 for large text
2.4:1
Fail
Muted text on surface
Needs 3:1 for large text
2.2:1
Fail
Allegro gray and neutral colors
The quiet part of the Allegro palette: page background, card surfaces, dividers and the three text tones that sit on them. Click a value to copy it.
- Allegro WhiteBackground
- HEX
- RGB
- HSL
- Allegro Light GraySurface
- HEX
- RGB
- HSL
- Allegro Border GrayBorder
- HEX
- RGB
- HSL
- Allegro CharcoalText
- HEX
- RGB
- HSL
- Allegro Medium GraySecondary text
- HEX
- RGB
- HSL
- Allegro Muted GrayMuted text
- HEX
- RGB
- HSL
About Allegro's colors
Allegro's palette is anchored by a bold orange, contrasted with deep charcoal and a range of functional neutrals. The system ensures high visibility and usability across ecommerce interfaces.
Primary orange contrasts with dark charcoal for strong hierarchy.
Accent amber is used for highlights and warnings.
Neutral grays provide clarity and focus for content.
Psychology
The orange primary evokes energy, friendliness, and approachability, aligning with Allegro's accessible marketplace positioning. Deep neutrals and subtle accents support trust and ease of use.
Evolution
Allegro's palette has remained stable, with orange as the core brand color since its early years. Recent updates refined the neutrals and accent tones for modern digital accessibility.
Where Allegro uses each color
- Primary
Used for main buttons, logo, and key highlights across the website and app.
- Secondary
Applied to navigation bars, headers, and footer backgrounds.
- Accent
Used for notification badges, highlights, and warning states.
- Backgrounds
White and light gray backgrounds are used for main content areas and cards.
- Text
Charcoal is used for primary text, with medium and muted grays for secondary and disabled text.
- Semantic
Green, amber, red, and blue are used for success, warning, error, and informational messages respectively.
Allegro color questions
Hex codes, RGB values, neutrals and how to use the palette.
The Allegro primary color hex code is #FF5A00. This vibrant orange is used for the logo and main action buttons.
Allegro Orange (#FF5A00) in RGB is (255, 90, 0). For CMYK, it is approximately (0, 65, 100, 0).
Allegro uses #232323 (Charcoal), #6D6D6D (Medium Gray), #A6A6A6 (Muted Gray), #F5F5F5 (Light Gray), and #E0E0E0 (Border Gray) for its UI neutrals. These ensure readability and a clean interface.
Use Allegro Orange (#FF5A00) for primary actions and branding, with neutrals for backgrounds and text. Semantic colors like green, amber, red, and blue are reserved for status and feedback messaging.
The secondary color is Allegro Charcoal, #232323, and the accent is Allegro Amber, #FFAA3B. 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 Allegro's colors consistently when it generates UI.
Make something in the spirit of Allegro
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.