Bol.com color palette
EcommerceBol.com uses a bold blue-centric palette with clean white and neutral grays to create a friendly, approachable ecommerce experience. The signature blue is instantly recognizable in Dutch and Belgian online retail.
bol.comBol.com colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- Bol.com BluePrimary0, 70, 190
- Bol.com Sky BlueSecondary0, 159, 227
- Bol.com YellowAccent255, 214, 0
Surfaces
Page, cards and dividers.- Bol.com WhiteBackground255, 255, 255
- Bol.com Light GraySurface245, 247, 250
- Bol.com Border GrayBorder217, 217, 217
Text
Three tiers of copy.- Bol.com CharcoalText34, 34, 34
- Bol.com Medium GraySecondary text79, 79, 79
- Bol.com Muted GrayMuted text130, 130, 130
Semantic
Feedback and state colors.- Bol.com GreenSuccess57, 181, 74
- Bol.com OrangeWarning255, 165, 0
- Bol.com RedError230, 0, 35
- Bol.com Info BlueInfo0, 159, 227
Use Bol.com's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
bolcom-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #009FE3;
--error: #E60023;
--accent: #FFD600;
--border: #D9D9D9;
--primary: #0046BE;
--success: #39B54A;
--surface: #F5F7FA;
--warning: #FFA500;
--secondary: #009FE3;
--text-muted: #828282;
--background: #FFFFFF;
--text-primary: #222222;
--text-secondary: #4F4F4F;
}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
8.2:1
Pass
Secondary text on surface
Needs 4.5:1 for body text
7.6:1
Pass
Muted text on background
Needs 3:1 for large text
3.8:1
Pass
Muted text on surface
Needs 3:1 for large text
3.6:1
Pass
Bol.com background, border and text colors
The quiet part of the Bol.com palette: page background, card surfaces, dividers and the three text tones that sit on them. Click a value to copy it.
- Bol.com WhiteBackground
- HEX
- RGB
- HSL
- Bol.com Light GraySurface
- HEX
- RGB
- HSL
- Bol.com Border GrayBorder
- HEX
- RGB
- HSL
- Bol.com CharcoalText
- HEX
- RGB
- HSL
- Bol.com Medium GraySecondary text
- HEX
- RGB
- HSL
- Bol.com Muted GrayMuted text
- HEX
- RGB
- HSL
About Bol.com's colors
Bol.com's palette is built around a strong, vivid blue, complemented by bright yellow and clear, neutral grays. The colors are chosen for clarity, accessibility, and brand recognition.
Primary blue contrasts with yellow accent for high visibility.
Neutrals balance vibrant colors for a clean interface.
Secondary blue and info blue provide tonal hierarchy.
Psychology
Blue conveys trust, reliability, and approachability, which are essential for ecommerce. Yellow adds a sense of friendliness and draws attention to calls to action.
Evolution
Bol.com's palette has remained stable, with blue as the core identity since its early years. Minor adjustments have refined the supporting grays and accent tones for modern UI needs.
Where Bol.com uses each color
- Primary
Used in the logo, main navigation bar, and primary action buttons.
- Secondary
Appears in highlights, secondary buttons, and informational banners.
- Accent
Used for call-to-action highlights, promotional tags, and icons.
- Backgrounds
White and light gray backgrounds are used throughout the site for clarity.
- Text
Charcoal and gray tones are used for primary, secondary, and muted text across the interface.
- Semantic
Green, orange, and red are used for success, warning, and error states in forms and notifications.
Bol.com color questions
Hex codes, RGB values, neutrals and how to use the palette.
The official Bol.com brand blue is #0046BE. This is used as the primary color across branding and digital interfaces.
Bol.com Blue (#0046BE) in RGB is (0, 70, 190). For CMYK, it is approximately (100, 63, 0, 25).
Bol.com uses #F5F7FA for light gray surfaces, #D9D9D9 for borders, and #222222 for primary text. These neutrals ensure readability and a clean layout.
Use #0046BE for primary actions and navigation, #009FE3 for secondary emphasis, and #FFD600 for accents. Neutrals and semantic colors structure the interface and communicate status.
The secondary color is Bol.com Sky Blue, #009FE3, and the accent is Bol.com Yellow, #FFD600. Together with the primary they make up the three brand colors at the top of this page.
6 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 Bol.com's colors consistently when it generates UI.
Make something in the spirit of Bol.com
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.
