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.
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 |
