Webflow

Webflow's brand palette, anchored on Webflow Blue (#4353FF) — the signature indigo-blue that carries the wordmark and the "WF" mark. The institutional voice pairs that blue with a clean white canvas and near-black body text on marketing surfaces. Where competing no-code builders lean on multi-color identities, Webflow commits to a single confident indigo with disciplined neutrals.

9 swatches 14 light roles 14 dark roles saasno-codewebflowdesign-toolsblue

Swatches

webflow-blue
#4353FF
Signature indigo-blue. Primary brand color — used on the wordmark, the "WF" mark, primary CTAs, and key interactive surfaces.
webflow-white
#FFFFFF
Canvas on light surfaces; reversed wordmark fill.
webflow-black
#080F25
Near-black body text on light backgrounds — Webflow's marketing-page text tone.
webflow-canvas-dark
#0E1330
Authored dark-mode canvas — deep neutral with a slight indigo cast aligned with the brand.
webflow-surface-light
#F5F6FB
Authored panel surface for light mode.
webflow-surface-dark
#1B2046
Authored elevated surface on dark mode.
webflow-text-secondary
#3F4156
Authored secondary text — neutral mid-gray on light canvas.
webflow-text-tertiary
#7A7D94
Authored tertiary / muted text.
webflow-blue-hover
#6371FF
Authored softer Webflow Blue for hover / active states.

Mode role mappings

Light mode (14 roles)

accent → webflow-blue
accent-hover → webflow-blue-hover
background → webflow-white
error → webflow-blue
primary → webflow-blue
primary-hover → webflow-blue-hover
success → webflow-blue
surface → webflow-surface-light
surface-elevated → webflow-white
text-primary → webflow-black
text-secondary → webflow-text-secondary
text-tertiary → webflow-text-tertiary
warning → webflow-blue
warning-hover → webflow-blue-hover

Dark mode (14 roles)

accent → webflow-blue
accent-hover → webflow-blue-hover
background → webflow-canvas-dark
error → webflow-blue
primary → webflow-blue
primary-hover → webflow-blue-hover
success → webflow-blue
surface → webflow-surface-dark
surface-elevated → webflow-surface-dark
text-primary → webflow-white
text-secondary → webflow-text-tertiary
text-tertiary → webflow-text-secondary
warning → webflow-blue
warning-hover → webflow-blue-hover

Provenance

Source
https://webflow.com/press
License
Proprietary — All Rights Reserved
Attribution
Webflow and the Webflow logo are trademarks of Webflow, Inc. The primary brand color Webflow Blue (#4353FF) is documented on Webflow's press resources and is independently cross-referenced by the simple-icons brand database, which cites webflow.com as the source.
Imported
2026-05-18
Notes
Only Webflow Blue (#4353FF) is read directly from Webflow's public brand surfaces. Secondary neutrals (mid-grays, dark canvas, hover blue) are authored neutral inversions calibrated to support both modes consistently without fabricating hex values that Webflow does not publish.