Generate Palette
  1. Color Palettes
  2. Progressive Web App Design Mesh
Created at 08/18/2025 08:38
byhex
  21

Progressive Web App Design Mesh

  • Component Green
    #10b981
  • Overlay Violet
    #7c3aed
  • Surface White
    #f3f4f6
  • System Gray
    #9ca3af
  • Accent Orange
    #fb8c00
  • Contrast Black
    #111827
The palette consists of Light, Semi dark, Dark colors. Accent colors Component Green #10b981 and Accent Orange #fb8c00. Palette has Cool, Neutral, Warm colors temperature.

By lightness, this palette runs from #111827 (darkest) to #F3F4F6 (lightest). The lightness range is wide.

Saturation is mixed — 2 muted and 3 vivid out of 6 colors.

Some colors sit roughly opposite each other on the color wheel, giving the palette complementary contrast.

Overall temperature among swatches leans cool (3 of 6).

HEX codes (sorted): #10B981, #111827, #7C3AED, #9CA3AF, #F3F4F6, #FB8C00

Palette Progressive Web App Design Mesh combines 6 color codes:
HEX: #10b981, RGB: (16, 185, 129); HEX: #7c3aed, RGB: (124, 58, 237); HEX: #f3f4f6, RGB: (243, 244, 246)
HEX: #9ca3af, RGB: (156, 163, 175); HEX: #fb8c00, RGB: (251, 140, 0); HEX: #111827, RGB: (17, 24, 39)
Simplified version of palette colors
Shade of mediumseagreen, Tint of blueviolet, Shade of whitesmoke, Shade of darkgrey, Shade of darkorange, Tint of Black
Color scheme was created by hex

Color codes in palette

Progressive Web App Design Mesh color codes HEX, RGB information in table

Color HEX RGB Name Alternative name
#10b981 #10b981 RGB(16, 185, 129)Component Green—
#7c3aed #7c3aed RGB(124, 58, 237)Overlay Violet—
#f3f4f6 #f3f4f6 RGB(243, 244, 246)Surface White—
#9ca3af #9ca3af RGB(156, 163, 175)System Gray—
#fb8c00 #fb8c00 RGB(251, 140, 0)Accent Orange—
#111827 #111827 RGB(17, 24, 39)Contrast Black—

Color Palette Contrast

3 color pairs have low contrast and need improvement which may impact readability.
Text Color Background Color Contrast Ratio
#10b981
#9ca3af
1
#10b981
#fb8c00
1.06
#9ca3af
#fb8c00
1.07

Image palette Progressive Web App Design Mesh png

Progressive Web App Design Mesh - #558658
 Download image