Railway color palette
SaaSRailway uses a minimal, dark-forward color palette centered on deep neutrals and subtle accent colors, reflecting its developer-focused SaaS platform. The brand identity emphasizes clarity, contrast, and a modern, utilitarian feel.
railway.appRailway colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- Railway BlackPrimary11, 13, 14
- Railway Deep GraySecondary24, 26, 27
- Railway YellowAccent255, 214, 0
Surfaces
Page, cards and dividers.- Railway BackgroundBackground17, 18, 19
- Railway SurfaceSurface24, 26, 27
- Railway Border GrayBorder35, 36, 37
Text
Three tiers of copy.- Railway WhiteText255, 255, 255
- Railway Light GraySecondary text177, 181, 183
- Railway Muted GrayMuted text108, 111, 114
Semantic
Feedback and state colors.- Railway GreenSuccess0, 229, 153
- Railway YellowWarning255, 214, 0
- Railway RedError255, 77, 79
- Railway BlueInfo59, 130, 246
Use Railway's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
railway-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #3B82F6;
--error: #FF4D4F;
--accent: #FFD600;
--border: #232425;
--primary: #0B0D0E;
--success: #00E599;
--surface: #181A1B;
--warning: #FFD600;
--secondary: #181A1B;
--text-muted: #6C6F72;
--background: #111213;
--text-primary: #FFFFFF;
--text-secondary: #B1B5B7;
}Contrast and accessibility
Every text tone tested against every surface, per WCAG 2.1.
Text on background
Needs 4.5:1 for body text
18.8:1
Pass
Text on surface
Needs 4.5:1 for body text
17.5:1
Pass
Secondary text on background
Needs 4.5:1 for body text
9.1:1
Pass
Secondary text on surface
Needs 4.5:1 for body text
8.5:1
Pass
Muted text on background
Needs 3:1 for large text
3.7:1
Pass
Muted text on surface
Needs 3:1 for large text
3.5:1
Pass
Railway gray, dark and neutral colors
Railway runs a dark interface, so these grays carry the layout: background, sidebar surfaces, dividers and three tiers of text. Click a value to copy it.
- Railway BackgroundBackground
- HEX
- RGB
- HSL
- Railway SurfaceSurface
- HEX
- RGB
- HSL
- Railway Border GrayBorder
- HEX
- RGB
- HSL
- Railway WhiteText
- HEX
- RGB
- HSL
- Railway Light GraySecondary text
- HEX
- RGB
- HSL
- Railway Muted GrayMuted text
- HEX
- RGB
- HSL
About Railway's colors
Railway's palette is built on deep neutrals with high-contrast accents to support a focused, developer-centric UI. The colors are chosen for clarity and accessibility in dark mode environments.
Primary and background colors are analogous deep neutrals.
Accent yellow is complementary to the dark base.
Semantic colors (green, red, blue) provide clear status signals.
Psychology
The dark neutrals convey professionalism, stability, and focus, while the yellow accent adds energy and draws attention to key actions. Semantic colors reinforce clarity and trust in system feedback.
Evolution
Railway's palette has remained stable, consistently prioritizing dark neutrals and minimal accent use. Minor adjustments have been made to accent and semantic tones for improved accessibility.
Where Railway uses each color
- Primary
Used for the main navigation bar and primary backgrounds.
- Secondary
Appears in card backgrounds and secondary UI panels.
- Accent
Highlights buttons, active states, and key interactive elements.
- Backgrounds
Forms the base of app screens and dashboard areas.
- Text
Primary text is white, with secondary and muted grays for less prominent information.
- Semantic
Success, warning, and error colors are used for alerts, statuses, and notifications.
Railway color questions
Hex codes, RGB values, neutrals and how to use the palette.
The Railway primary color is #0B0D0E, known as Railway Black. This is used for the main navigation and key backgrounds.
The RGB value for #0B0D0E is (11, 13, 14). For CMYK, it is approximately (21%, 7%, 0%, 95%).
Railway uses #181A1B (Railway Deep Gray), #232425 (Railway Border Gray), and #B1B5B7 (Railway Light Gray) throughout its UI for surfaces, borders, and secondary text.
Use #0B0D0E for main backgrounds and navigation, #FFD600 for accents and highlights, and the semantic colors for status indicators. Maintain high contrast for accessibility, especially in dark mode interfaces.
The secondary color is Railway Deep Gray, #181A1B, and the accent is Railway 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 Railway's colors consistently when it generates UI.
Make something in the spirit of Railway
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.