Rome2rio color palette
TravelRome2rio's color identity is defined by its distinctive magenta primary, paired with a dark UI and light neutrals for clarity and accessibility. The palette is modern, approachable, and designed for high contrast in travel search interfaces.
rome2rio.comRome2rio colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- Rome2rio MagentaPrimary245, 73, 168
- Rome2rio CharcoalSecondary58, 58, 58
- Rome2rio CyanAccent0, 178, 214
Surfaces
Page, cards and dividers.- Rome2rio WhiteBackground255, 255, 255
- Rome2rio Light GraySurface247, 247, 247
- Rome2rio Border GrayBorder224, 224, 224
Text
Three tiers of copy.- Rome2rio BlackText35, 35, 35
- Rome2rio Medium GraySecondary text109, 109, 109
- Rome2rio Muted GrayMuted text165, 165, 165
Semantic
Feedback and state colors.- Rome2rio GreenSuccess45, 203, 116
- Rome2rio YellowWarning255, 180, 0
- Rome2rio RedError233, 79, 79
- Rome2rio CyanInfo0, 178, 214
Use Rome2rio's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
rome2rio-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #00B2D6;
--error: #E94F4F;
--accent: #00B2D6;
--border: #E0E0E0;
--primary: #F549A8;
--success: #2DCB74;
--surface: #F7F7F7;
--warning: #FFB400;
--secondary: #3A3A3A;
--text-muted: #A5A5A5;
--background: #FFFFFF;
--text-primary: #232323;
--text-secondary: #6D6D6D;
}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.7:1
Pass
Text on surface
Needs 4.5:1 for body text
14.7:1
Pass
Secondary text on background
Needs 4.5:1 for body text
5.2:1
Pass
Secondary text on surface
Needs 4.5:1 for body text
4.8:1
Pass
Muted text on background
Needs 3:1 for large text
2.5:1
Fail
Muted text on surface
Needs 3:1 for large text
2.3:1
Fail
Rome2rio gray and neutral colors
The quiet part of the Rome2rio palette: page background, card surfaces, dividers and the three text tones that sit on them. Click a value to copy it.
- Rome2rio WhiteBackground
- HEX
- RGB
- HSL
- Rome2rio Light GraySurface
- HEX
- RGB
- HSL
- Rome2rio Border GrayBorder
- HEX
- RGB
- HSL
- Rome2rio BlackText
- HEX
- RGB
- HSL
- Rome2rio Medium GraySecondary text
- HEX
- RGB
- HSL
- Rome2rio Muted GrayMuted text
- HEX
- RGB
- HSL
About Rome2rio's colors
Rome2rio’s palette is anchored by a vibrant magenta, contrasted with dark and light neutrals for clear UI separation. Cyan and green accents provide visual cues for interaction and feedback.
Magenta contrasts with dark charcoal for high legibility.
Cyan and green are used as functional accents.
Neutral grays structure backgrounds and surfaces.
Psychology
The magenta primary is energetic and distinctive, helping the brand stand out in the travel sector. The neutral tones communicate reliability and clarity, supporting user trust.
Evolution
Rome2rio’s palette has remained consistent since its major rebrand, with magenta always central. Minor adjustments have been made to grays and accents for improved accessibility.
Where Rome2rio uses each color
- Primary
Used for logo, primary buttons, and key highlights throughout the website and app.
- Secondary
Applied to navigation bars, footers, and background elements for contrast.
- Accent
Cyan is used for links, interactive states, and informational highlights.
- Backgrounds
White and light gray backgrounds are used for main content areas and cards.
- Text
Charcoal and black are used for primary text, with medium and muted grays for secondary and disabled text.
- Semantic
Green, yellow, and red are used for success, warning, and error messages respectively.
Rome2rio color questions
Hex codes, RGB values, neutrals and how to use the palette.
The official Rome2rio brand color is magenta, hex code #F549A8.
The primary magenta (#F549A8) is RGB(245, 73, 168) and CMYK(0, 70, 31, 4).
Rome2rio uses Charcoal (#3A3A3A) for dark UI elements and Light Gray (#F7F7F7) for surfaces, with Border Gray (#E0E0E0) for dividers.
Use Magenta (#F549A8) for primary actions and branding, neutrals for backgrounds and text, and Cyan (#00B2D6) for accents and informational highlights.
The secondary color is Rome2rio Charcoal, #3A3A3A, and the accent is Rome2rio Cyan, #00B2D6. 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 Rome2rio's colors consistently when it generates UI.
Make something in the spirit of Rome2rio
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.