Color Picker

Pick a product and choose from any of its photos, fine-tune the palette for the Hero Section (Top of Product Page), then save directly into custom.hero_blob_colors.

🎛️ Studio Hub ← Back to Store
📥
Import Existing Metafield Palette Paste hex codes, JSON array, or upload a .json file to load palette directly

Live Hero Preview

Rendered with the product page's own script — shows exactly what custom.hero_blob_colors will look like.

Product Title

1. Choose a product photo

2. Preview & eyedropper

No image selected yet

Pick a product photo above to get started

Hover the photo to magnify and preview a color, click to assign it to the highlighted swatch in the palette panel.

3. Fine-tune the palette

Drag ⋮⋮ to reorder — top = main color. Click a row to activate it for the eyedropper. Lock 🔓 a color to protect it from re-extract and palette generation.

Generated Metafield Code

Target: (Select a product) 
#c8edeb,#9fe0dc,#35cac5,#1aa8a3,#0d8480,#075c59

📥 Quick Paste Palette (JSON or Text)

Quick edits

Paste an existing JSON array ["#c8edeb", "#9fe0dc", ...], comma-separated hex codes, or metafield code:

About Product Blob Colors:
  • Hero Section Glowing Blobs: This tool configures the glowing floating blobs behind the title at the top of the product page. Saved to custom.hero_blob_colors (also accepts custom.blob_colors).
  • Atmosphere Blobs: Whole-page background blobs are managed separately by the Experience Builder inside custom.visual_experience.
  • Click "🚀 Save Directly to Shopify" to update the hero blob colors in 1 click, or click "Copy Code" and paste in Shopify Admin.