Otto color palette
EcommerceOtto's brand color system centers on a bold red, complemented by neutral grays and whites for clarity and strong visual hierarchy. The palette is designed for high visibility and easy navigation in ecommerce contexts.
otto.deOtto colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- Otto RedPrimary212, 2, 29
- Otto CharcoalSecondary51, 51, 51
- Otto YellowAccent255, 214, 0
Surfaces
Page, cards and dividers.- Otto WhiteBackground255, 255, 255
- Otto Light GraySurface245, 245, 245
- Otto Border GrayBorder224, 224, 224
Text
Three tiers of copy.- Otto Text BlackText34, 34, 34
- Otto Text GraySecondary text102, 102, 102
- Otto Muted GrayMuted text153, 153, 153
Semantic
Feedback and state colors.- Otto GreenSuccess67, 176, 42
- Otto OrangeWarning255, 179, 0
- Otto RedError212, 2, 29
- Otto BlueInfo25, 118, 210
Use Otto's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
otto-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #1976D2;
--error: #D4021D;
--accent: #FFD600;
--border: #E0E0E0;
--primary: #D4021D;
--success: #43B02A;
--surface: #F5F5F5;
--warning: #FFB300;
--secondary: #333333;
--text-muted: #999999;
--background: #FFFFFF;
--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
15.9:1
Pass
Text on surface
Needs 4.5:1 for body text
14.6: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.8:1
Fail
Muted text on surface
Needs 3:1 for large text
2.6:1
Fail
Otto gray and neutral colors
The quiet part of the Otto palette: page background, card surfaces, dividers and the three text tones that sit on them. Click a value to copy it.
- Otto WhiteBackground
- HEX
- RGB
- HSL
- Otto Light GraySurface
- HEX
- RGB
- HSL
- Otto Border GrayBorder
- HEX
- RGB
- HSL
- Otto Text BlackText
- HEX
- RGB
- HSL
- Otto Text GraySecondary text
- HEX
- RGB
- HSL
- Otto Muted GrayMuted text
- HEX
- RGB
- HSL
About Otto's colors
Otto's palette uses a dominant red for brand recognition, contrasted with neutral grays and white for balance and readability. Accent yellow and blue are used sparingly for highlights and informational cues.
Primary red is complemented by neutral backgrounds.
Accent yellow is used for highlights and promotions.
Grays provide structure and hierarchy in the UI.
Psychology
Red conveys urgency and confidence, supporting ecommerce action and attention. The neutral tones foster trust and clarity for shoppers.
Evolution
Otto's color palette has remained stable, with red as the core brand identifier for decades. Minor adjustments to gray tones and accent colors have modernized the UI without altering the brand's essence.
Where Otto uses each color
- Primary
Otto Red is used for the logo, primary buttons, and key calls to action.
- Secondary
Otto Charcoal appears in headers, navigation bars, and footer backgrounds.
- Accent
Otto Yellow highlights promotions, badges, and special offers.
- Backgrounds
Otto White and Otto Light Gray are used for page backgrounds and content surfaces.
- Text
Otto Text Black and Otto Text Gray are used for primary and secondary text throughout the site.
- Semantic
Otto Green, Orange, and Blue are used for status indicators like success messages, warnings, and informational alerts.
Otto color questions
Hex codes, RGB values, neutrals and how to use the palette.
The Otto primary color hex code is #D4021D. This red is used for the logo and main action elements.
Otto Red (#D4021D) in RGB is 212, 2, 29. In CMYK, it is approximately 0, 99, 86, 17.
Otto uses several grays: Otto Charcoal (#333333), Otto Light Gray (#F5F5F5), and Otto Border Gray (#E0E0E0). These neutrals structure the UI and provide contrast to the red.
Use Otto Red (#D4021D) for primary actions and branding, with grays and white for backgrounds and text. Accent colors like Otto Yellow (#FFD600) should be reserved for highlights and special elements.
The secondary color is Otto Charcoal, #333333, and the accent is Otto Yellow, #FFD600. 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 Otto's colors consistently when it generates UI.
Make something in the spirit of Otto
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.