Rawlings color palette
SportsRawlings uses a bold, high-contrast palette centered on its iconic Rawlings Red, accented by black, white, and metallic silver. The color system reflects the brand's heritage in baseball and sporting goods.
rawlings.comRawlings colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- Rawlings RedPrimary228, 27, 19
- Rawlings BlackSecondary0, 0, 0
- Rawlings SilverAccent167, 169, 172
Surfaces
Page, cards and dividers.- Rawlings WhiteBackground255, 255, 255
- Rawlings Light GraySurface245, 245, 245
- Rawlings Border GrayBorder209, 211, 212
Text
Three tiers of copy.- Rawlings BlackText0, 0, 0
- Rawlings Dark GraySecondary text102, 102, 102
- Rawlings SilverMuted text167, 169, 172
Semantic
Feedback and state colors.- Rawlings GreenSuccess67, 176, 71
- Rawlings OrangeWarning249, 165, 26
- Rawlings RedError228, 27, 19
- Rawlings BlueInfo0, 114, 206
Use Rawlings's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
rawlings-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #0072CE;
--error: #E41B13;
--accent: #A7A9AC;
--border: #D1D3D4;
--primary: #E41B13;
--success: #43B047;
--surface: #F5F5F5;
--warning: #F9A51A;
--secondary: #000000;
--text-muted: #A7A9AC;
--background: #FFFFFF;
--text-primary: #000000;
--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
21.0:1
Pass
Text on surface
Needs 4.5:1 for body text
19.3:1
Pass
Secondary text on background
Needs 4.5:1 for body text
5.7:1
Pass
Secondary text on surface
Needs 4.5:1 for body text
5.3: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
Rawlings gray and neutral colors
The quiet part of the Rawlings palette: page background, card surfaces, dividers and the three text tones that sit on them. Click a value to copy it.
- Rawlings WhiteBackground
- HEX
- RGB
- HSL
- Rawlings Light GraySurface
- HEX
- RGB
- HSL
- Rawlings Border GrayBorder
- HEX
- RGB
- HSL
- Rawlings BlackText
- HEX
- RGB
- HSL
- Rawlings Dark GraySecondary text
- HEX
- RGB
- HSL
- Rawlings SilverMuted text
- HEX
- RGB
- HSL
About Rawlings's colors
Rawlings' color palette is built for high visibility and brand recognition, with red as the dominant hue. The supporting neutrals reinforce clarity and professionalism.
Red and black create strong contrast for impact.
Silver and white provide balance and highlight details.
Accent colors are reserved for functional UI states.
Psychology
Red evokes energy, passion, and action, aligning with Rawlings' sports heritage. Black and silver convey quality and durability.
Evolution
The Rawlings palette has remained consistent for decades, with Rawlings Red always at the forefront. Minor adjustments to gray and silver tones have modernized the UI while retaining brand heritage.
Where Rawlings uses each color
- Primary
Rawlings Red is used for logos, calls to action, and key highlights across packaging and digital interfaces.
- Secondary
Rawlings Black appears in navigation bars, product text, and background accents.
- Accent
Rawlings Silver is used for metallic finishes, UI icons, and secondary elements.
- Backgrounds
Rawlings White and Light Gray are used for page backgrounds and product displays.
- Text
Black is the primary text color, with Dark Gray and Silver for secondary and muted text.
- Semantic
Green, orange, and blue are used for success, warning, and informational UI states respectively, while Rawlings Red signals errors.
Rawlings color questions
Hex codes, RGB values, neutrals and how to use the palette.
The official Rawlings brand color is Rawlings Red, hex code #E41B13.
Rawlings Red is RGB(228, 27, 19) and CMYK(0, 88, 92, 11). The hex code is #E41B13.
Rawlings uses Light Gray (#F5F5F5), Border Gray (#D1D3D4), and Silver (#A7A9AC) as its official neutrals. These appear in UI backgrounds and borders.
Rawlings Red (#E41B13) should dominate key branding elements, while neutrals and accents support clarity and hierarchy. Always use the exact hex codes for consistency across digital and print.
The secondary color is Rawlings Black, #000000, and the accent is Rawlings Silver, #A7A9AC. 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 Rawlings's colors consistently when it generates UI.
Make something in the spirit of Rawlings
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.