n8n color palette
SaaSn8n's color system centers on a vibrant pink primary, supported by a clean, modern set of neutrals and subtle accent hues for clarity and usability in its workflow automation UI.
n8n.ion8n colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- n8n PinkPrimary234, 75, 113
- n8n Light PinkSecondary255, 179, 199
- n8n OrangeAccent245, 166, 35
Surfaces
Page, cards and dividers.- n8n Light GrayBackground248, 249, 251
- n8n WhiteSurface255, 255, 255
- n8n Border GrayBorder227, 230, 234
Text
Three tiers of copy.- n8n CharcoalText34, 38, 47
- n8n Medium GraySecondary text107, 114, 128
- n8n Muted GrayMuted text160, 174, 192
Semantic
Feedback and state colors.- n8n GreenSuccess39, 174, 96
- n8n OrangeWarning245, 166, 35
- n8n RedError235, 87, 87
- n8n BlueInfo45, 156, 219
Use n8n's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
n8n-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #2D9CDB;
--error: #EB5757;
--accent: #F5A623;
--border: #E3E6EA;
--primary: #EA4B71;
--success: #27AE60;
--surface: #FFFFFF;
--warning: #F5A623;
--secondary: #FFB3C7;
--text-muted: #A0AEC0;
--background: #F8F9FB;
--text-primary: #22262F;
--text-secondary: #6B7280;
}Contrast and accessibility
Every text tone tested against every surface, per WCAG 2.1.
Text on background
Needs 4.5:1 for body text
14.4:1
Pass
Text on surface
Needs 4.5:1 for body text
15.1: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.8:1
Pass
Muted text on background
Needs 3:1 for large text
2.1:1
Fail
Muted text on surface
Needs 3:1 for large text
2.3:1
Fail
n8n background, border and text colors
The quiet part of the n8n palette: page background, card surfaces, dividers and the three text tones that sit on them. Click a value to copy it.
- n8n Light GrayBackground
- HEX
- RGB
- HSL
- n8n WhiteSurface
- HEX
- RGB
- HSL
- n8n Border GrayBorder
- HEX
- RGB
- HSL
- n8n CharcoalText
- HEX
- RGB
- HSL
- n8n Medium GraySecondary text
- HEX
- RGB
- HSL
- n8n Muted GrayMuted text
- HEX
- RGB
- HSL
About n8n's colors
n8n's palette uses a bold pink for brand recognition, balanced with soft neutrals and purposeful accent colors for clarity. The system supports both expressive branding and functional UI needs.
Primary pink contrasts with deep charcoal text for readability.
Accent orange and blue highlight actions and information.
Neutrals unify backgrounds and surfaces for a clean interface.
Psychology
The vibrant pink conveys creativity and approachability, while the neutrals provide a sense of clarity and professionalism. Accent colors draw attention to key actions and statuses.
Evolution
n8n's palette has remained consistent since its launch, with minor adjustments to neutral tones for improved accessibility. The primary pink has always been central to the brand identity.
Where n8n uses each color
- Primary
Used for main branding, primary buttons, and highlights in navigation.
- Secondary
Applied to backgrounds of badges, subtle highlights, and onboarding visuals.
- Accent
Used for warning states, call-to-action highlights, and notification icons.
- Backgrounds
Light gray and white backgrounds are standard for app screens and web pages.
- Text
Charcoal is used for main body text, with medium and muted grays for secondary and disabled text.
- Semantic
Green, orange, red, and blue are used for success, warning, error, and informational statuses respectively.
n8n color questions
Hex codes, RGB values, neutrals and how to use the palette.
The official n8n primary color is #EA4B71. This pink is used for branding and key interface elements.
The RGB value for #EA4B71 is (234, 75, 113). For print, the closest CMYK is (0, 68, 52, 8).
n8n uses #F8F9FB for light gray backgrounds, #E3E6EA for borders, and #22262F for primary text. These neutrals provide clarity and contrast in the interface.
Use #EA4B71 for primary actions and highlights, neutrals for backgrounds and surfaces, and semantic colors for status indicators. Always ensure sufficient contrast for accessibility.
The secondary color is n8n Light Pink, #FFB3C7, and the accent is n8n Orange, #F5A623. 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 n8n's colors consistently when it generates UI.
Make something in the spirit of n8n
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.