Webflow color palette
TechWebflow's color system features a vibrant blue primary, complemented by deep neutrals and subtle accents, reflecting its modern, professional web design platform. The palette is designed for clarity, accessibility, and a clean digital aesthetic.
webflow.comWebflow colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- Webflow BluePrimary20, 110, 245
- Webflow CharcoalSecondary27, 31, 35
- Webflow YellowAccent255, 214, 0
Surfaces
Page, cards and dividers.- Webflow WhiteBackground255, 255, 255
- Webflow Light GraySurface246, 247, 249
- Webflow Border GrayBorder229, 232, 236
Text
Three tiers of copy.- Webflow CharcoalText27, 31, 35
- Webflow Medium GraySecondary text74, 79, 85
- Webflow Muted GrayMuted text122, 127, 133
Semantic
Feedback and state colors.- Webflow GreenSuccess27, 196, 125
- Webflow YellowWarning255, 214, 0
- Webflow RedError242, 72, 34
- Webflow BlueInfo20, 110, 245
Use Webflow's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
webflow-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #146EF5;
--error: #F24822;
--accent: #FFD600;
--border: #E5E8EC;
--primary: #146EF5;
--success: #1BC47D;
--surface: #F6F7F9;
--warning: #FFD600;
--secondary: #1B1F23;
--text-muted: #7A7F85;
--background: #FFFFFF;
--text-primary: #1B1F23;
--text-secondary: #4A4F55;
}Contrast and accessibility
Every text tone tested against every surface, per WCAG 2.1.
Text on background
Needs 4.5:1 for body text
16.6:1
Pass
Text on surface
Needs 4.5:1 for body text
15.5:1
Pass
Secondary text on background
Needs 4.5:1 for body text
8.3:1
Pass
Secondary text on surface
Needs 4.5:1 for body text
7.7:1
Pass
Muted text on background
Needs 3:1 for large text
4.0:1
Pass
Muted text on surface
Needs 3:1 for large text
3.8:1
Pass
Webflow background, border and text colors
The quiet part of the Webflow palette: page background, card surfaces, dividers and the three text tones that sit on them. Click a value to copy it.
- Webflow WhiteBackground
- HEX
- RGB
- HSL
- Webflow Light GraySurface
- HEX
- RGB
- HSL
- Webflow Border GrayBorder
- HEX
- RGB
- HSL
- Webflow CharcoalText
- HEX
- RGB
- HSL
- Webflow Medium GraySecondary text
- HEX
- RGB
- HSL
- Webflow Muted GrayMuted text
- HEX
- RGB
- HSL
About Webflow's colors
Webflow's palette is anchored by a bold blue, supported by deep neutrals and high-contrast accents for clarity and usability. The system prioritizes accessibility and a professional, digital-first appearance.
Primary blue contrasts with white and dark charcoal backgrounds.
Yellow accent is reserved for highlights and warnings.
Neutral grays provide structure and readability.
Psychology
The blue primary conveys trust, reliability, and innovation, aligning with Webflow's role as a web design tool. Deep neutrals and subtle grays create a sense of professionalism and focus.
Evolution
Webflow's core palette has remained stable, with the blue primary consistently used across branding and UI. Minor adjustments to neutral tones have improved accessibility and visual hierarchy.
Where Webflow uses each color
- Primary
Used for main navigation, primary buttons, and key highlights.
- Secondary
Forms the background of headers, footers, and sidebars.
- Accent
Applied to notification badges, highlights, and warning states.
- Backgrounds
White and light gray are used for app backgrounds and content areas.
- Text
Charcoal and medium gray are used for primary and secondary text throughout the UI.
- Semantic
Green, yellow, and red are used for success, warning, and error states respectively in notifications and UI feedback.
Webflow color questions
Hex codes, RGB values, neutrals and how to use the palette.
The official Webflow primary color is #146EF5, known as Webflow Blue. Use this exact hex for all primary branding elements.
Webflow Blue (#146EF5) in RGB is (20, 110, 245). For CMYK, it is approximately (92%, 55%, 0%, 4%).
Webflow uses #1B1F23 (Webflow Charcoal), #4A4F55 (Webflow Medium Gray), and #F6F7F9 (Webflow Light Gray) as its primary neutrals. These are used for backgrounds, text, and UI surfaces.
Use #146EF5 for primary actions and highlights, neutrals for backgrounds and text, and semantic colors for status or feedback. Always follow accessibility guidelines for contrast and clarity.
The secondary color is Webflow Charcoal, #1B1F23, and the accent is Webflow 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 Webflow's colors consistently when it generates UI.
Make something in the spirit of Webflow
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.
