Blablacar color palette
TravelBlablacar's color identity centers around a distinctive teal blue, complemented by fresh green and neutral grays for a modern, friendly travel experience. The palette is designed for clarity and approachability across digital and print touchpoints.
blablacar.comBlablacar colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- Blablacar TealPrimary0, 180, 211
- Blablacar GreenSecondary0, 208, 132
- Blablacar CoralAccent255, 90, 95
Surfaces
Page, cards and dividers.- Blablacar WhiteBackground255, 255, 255
- Blablacar Light GraySurface246, 247, 249
- Blablacar Border GrayBorder229, 232, 235
Text
Three tiers of copy.- Blablacar BlackText35, 39, 47
- Blablacar GraySecondary text108, 118, 130
- Blablacar Muted GrayMuted text161, 168, 179
Semantic
Feedback and state colors.- Blablacar Success GreenSuccess0, 208, 132
- Blablacar Warning YellowWarning255, 180, 0
- Blablacar Error CoralError255, 90, 95
- Blablacar Info TealInfo0, 180, 211
Use Blablacar's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
blablacar-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #00B4D3;
--error: #FF5A5F;
--accent: #FF5A5F;
--border: #E5E8EB;
--primary: #00B4D3;
--success: #00D084;
--surface: #F6F7F9;
--warning: #FFB400;
--secondary: #00D084;
--text-muted: #A1A8B3;
--background: #FFFFFF;
--text-primary: #23272F;
--text-secondary: #6C7682;
}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.0:1
Pass
Text on surface
Needs 4.5:1 for body text
14.0:1
Pass
Secondary text on background
Needs 4.5:1 for body text
4.6:1
Pass
Secondary text on surface
Needs 4.5:1 for body text
4.3:1
Fail
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
Blablacar background, border and text colors
The quiet part of the Blablacar palette: page background, card surfaces, dividers and the three text tones that sit on them. Click a value to copy it.
- Blablacar WhiteBackground
- HEX
- RGB
- HSL
- Blablacar Light GraySurface
- HEX
- RGB
- HSL
- Blablacar Border GrayBorder
- HEX
- RGB
- HSL
- Blablacar BlackText
- HEX
- RGB
- HSL
- Blablacar GraySecondary text
- HEX
- RGB
- HSL
- Blablacar Muted GrayMuted text
- HEX
- RGB
- HSL
About Blablacar's colors
Blablacar's palette uses a vibrant teal as its anchor, supported by green and coral for contrast and emphasis. Neutral grays provide balance and ensure readability in UI contexts.
Primary teal and secondary green are adjacent on the color wheel, creating harmony.
Coral accent provides energetic contrast for calls to action.
Grays and white support clarity and accessibility.
Psychology
The teal and green evoke trust, freshness, and approachability, key qualities for a travel-sharing platform. Coral adds warmth and draws attention to important actions.
Evolution
Blablacar's core teal and green have remained consistent since their 2018 rebrand, with minor adjustments to accent and neutral tones for improved digital accessibility. The palette has been stable, reinforcing strong brand recognition.
Where Blablacar uses each color
- Primary
Blablacar Teal is used for the logo, primary buttons, and key navigation elements.
- Secondary
Blablacar Green highlights secondary actions and success states in the app.
- Accent
Blablacar Coral is reserved for CTAs, notifications, and error states.
- Backgrounds
Blablacar White and Light Gray are used for backgrounds across web and app interfaces.
- Text
Blablacar Black and Gray are used for primary and secondary text, ensuring high contrast and legibility.
- Semantic
Success, warning, and error colors are used for system feedback, alerts, and status indicators.
Blablacar color questions
Hex codes, RGB values, neutrals and how to use the palette.
The official Blablacar brand color is Blablacar Teal, hex code #00B4D3. This is used for the logo and primary actions.
Blablacar Teal (#00B4D3) is RGB(0, 180, 211) and CMYK(100, 15, 0, 17). Use these values for accurate reproduction in digital and print.
Blablacar uses Light Gray (#F6F7F9), Border Gray (#E5E8EB), and Muted Gray (#A1A8B3) for UI backgrounds, borders, and muted text. These ensure clarity and a clean interface.
Use Blablacar Teal (#00B4D3) for primary actions and branding, Green (#00D084) for secondary emphasis, and Coral (#FF5A5F) for alerts and CTAs. Neutrals support backgrounds and text for accessibility.
The secondary color is Blablacar Green, #00D084, and the accent is Blablacar Coral, #FF5A5F. Together with the primary they make up the three brand colors at the top of this page.
3 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 Blablacar's colors consistently when it generates UI.
Make something in the spirit of Blablacar
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.