Hasbro color palette
ConsumerHasbro's color identity centers on a vibrant blue, reflecting its playful and approachable brand personality. The palette is clean and energetic, supporting its role as a leading toy and entertainment company.
hasbro.comHasbro colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- Hasbro BluePrimary0, 130, 195
- Hasbro CyanSecondary0, 181, 226
- Hasbro YellowAccent255, 209, 0
Surfaces
Page, cards and dividers.- Hasbro WhiteBackground255, 255, 255
- Hasbro Light GraySurface245, 247, 250
- Hasbro Border GrayBorder209, 213, 219
Text
Three tiers of copy.- Hasbro CharcoalText34, 34, 34
- Hasbro SlateSecondary text75, 92, 107
- Hasbro Muted BlueMuted text138, 153, 166
Semantic
Feedback and state colors.- Hasbro GreenSuccess67, 176, 42
- Hasbro OrangeWarning255, 130, 0
- Hasbro RedError228, 0, 43
- Hasbro CyanInfo0, 181, 226
Use Hasbro's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
hasbro-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #00B5E2;
--error: #E4002B;
--accent: #FFD100;
--border: #D1D5DB;
--primary: #0082C3;
--success: #43B02A;
--surface: #F5F7FA;
--warning: #FF8200;
--secondary: #00B5E2;
--text-muted: #8A99A6;
--background: #FFFFFF;
--text-primary: #222222;
--text-secondary: #4B5C6B;
}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.9:1
Pass
Text on surface
Needs 4.5:1 for body text
14.8:1
Pass
Secondary text on background
Needs 4.5:1 for body text
6.9:1
Pass
Secondary text on surface
Needs 4.5:1 for body text
6.4:1
Pass
Muted text on background
Needs 3:1 for large text
2.9:1
Fail
Muted text on surface
Needs 3:1 for large text
2.7:1
Fail
Hasbro background, border and text colors
The quiet part of the Hasbro palette: page background, card surfaces, dividers and the three text tones that sit on them. Click a value to copy it.
- Hasbro WhiteBackground
- HEX
- RGB
- HSL
- Hasbro Light GraySurface
- HEX
- RGB
- HSL
- Hasbro Border GrayBorder
- HEX
- RGB
- HSL
- Hasbro CharcoalText
- HEX
- RGB
- HSL
- Hasbro SlateSecondary text
- HEX
- RGB
- HSL
- Hasbro Muted BlueMuted text
- HEX
- RGB
- HSL
About Hasbro's colors
Hasbro's palette is dominated by a signature blue, complemented by bright accent colors for a playful, energetic feel. The supporting neutrals ensure clarity and accessibility across digital and physical touchpoints.
Primary blue is paired with yellow for high contrast.
Cyan and green provide vibrant accents.
Grays and white balance the vivid colors for readability.
Psychology
Blue conveys trust, dependability, and creativity, aligning with Hasbro's family-friendly image. Yellow and cyan add a sense of fun and excitement, appealing to children and parents alike.
Evolution
Hasbro's blue has remained consistent for decades, reinforcing brand recognition. The palette has expanded to include more vibrant accents and modern neutrals for digital applications.
Where Hasbro uses each color
- Primary
Hasbro Blue is used in the logo, website navigation, and major calls to action.
- Secondary
Hasbro Cyan appears in highlights, links, and supporting graphics.
- Accent
Hasbro Yellow is used for buttons, notifications, and packaging details.
- Backgrounds
Hasbro White and Light Gray are used for page backgrounds and content surfaces.
- Text
Charcoal and Slate are used for primary and secondary text, ensuring legibility.
- Semantic
Green, Orange, and Red are used for status indicators, alerts, and feedback messages.
Hasbro color questions
Hex codes, RGB values, neutrals and how to use the palette.
The official Hasbro brand color hex code is #0082C3, known as Hasbro Blue.
Hasbro Blue (#0082C3) is RGB(0, 130, 195) and CMYK(100, 33, 0, 24).
Hasbro uses Light Gray (#F5F7FA) for surfaces and Border Gray (#D1D5DB) for UI borders and dividers.
Primary blue should dominate key brand elements, with accent colors used sparingly for emphasis and neutrals for backgrounds and text. Always maintain sufficient contrast for accessibility, using #222222 or #4B5C6B for text on light backgrounds.
The secondary color is Hasbro Cyan, #00B5E2, and the accent is Hasbro Yellow, #FFD100. 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 Hasbro's colors consistently when it generates UI.
Make something in the spirit of Hasbro
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.