Created at 09/19/2025 22:07
Figma Wireframe Flow System
- Sketch Blue#3b82f6
- Prototype Beige#f5f3ee
- Outline Gray#9ca3af
- Node Red#dc2626
- Connector Green#16a34a
- Surface Off-White#f9fafb
- UI Ink Black#1f2937
The palette consists of Light, Dark colors. Accent colors Sketch Blue #3b82f6 and Node Red #dc2626. Palette has Cool, Neutral, Warm colors temperature.
By lightness, this palette runs from #1F2937 (darkest) to #F9FAFB (lightest). The lightness range is wide.
Overall saturation feels mostly muted (lower chroma).
Some hue pairs sit near complementary positions — you may read this as complementary contrast (loose heuristic).
Overall temperature among swatches leans cool.
HEX codes (sorted): #16A34A, #1F2937, #3B82F6, #9CA3AF, #DC2626, #F5F3EE, #F9FAFB
Palette Figma Wireframe Flow System has combination of 7 codes colors:
HEX: #3b82f6, RGB: (59, 130, 246); HEX: #f5f3ee, RGB: (245, 243, 238); HEX: #9ca3af, RGB: (156, 163, 175)
HEX: #dc2626, RGB: (220, 38, 38); HEX: #16a34a, RGB: (22, 163, 74); HEX: #f9fafb, RGB: (249, 250, 251)
HEX: #1f2937, RGB: (31, 41, 55)
Simplified version of palette colors
Tint of dodgerblue, Tint of floralwhite, Tint of darkgrey, Shade of crimson, Tint of mediumseagreen, Shade of whitesmoke, Shade of Black
Color scheme was created by raccoon
Colors codes in palette
Figma Wireframe Flow System color codes HEX, RGB information in table
| Color | HEX | RGB | Name | Alternative name |
| #3b82f6 | #3b82f6 | RGB(59, 130, 246) | Sketch Blue | — |
| #f5f3ee | #f5f3ee | RGB(245, 243, 238) | Prototype Beige | — |
| #9ca3af | #9ca3af | RGB(156, 163, 175) | Outline Gray | — |
| #dc2626 | #dc2626 | RGB(220, 38, 38) | Node Red | — |
| #16a34a | #16a34a | RGB(22, 163, 74) | Connector Green | — |
| #f9fafb | #f9fafb | RGB(249, 250, 251) | Surface Off-White | — |
| #1f2937 | #1f2937 | RGB(31, 41, 55) | UI Ink Black | — |
Color Palette Contrast
7 color pairs have low contrast and need improvement which may impact readability.
| Text Color | Background Color | Contrast Ratio |
#3b82f6 | #9ca3af | 1.44 |
#3b82f6 | #dc2626 | 1.31 |
#3b82f6 | #16a34a | 1.11 |
#f5f3ee | #f9fafb | 1.06 |
#9ca3af | #dc2626 | 1.9 |
#9ca3af | #16a34a | 1.29 |
Image palette Figma Wireframe Flow System png
Export Palette
Download the "Figma Wireframe Flow System" in multiple formats for seamless integration into your design projects.
Available formats: