Extract Colors
Analyze an image to identify its dominant colors and generate a matching color palette.
The Extract Colors block scans an image to find its most prominent colors. This is perfect for dynamically branding your UI based on a user's uploaded photo, categorizing products by color, or creating aesthetically pleasing designs that match your media.
Core Concept
Think of this block as a color sampler. It looks at every pixel in an image and groups them to find the "soul" of the image—the dominant color and a supporting cast of colors that make up its palette.
Configuration
| Field | Required | Description |
|---|---|---|
| Input Image (Base64) | ✅ | The raw Base64 string of the image you want to analyze. |
| Palette Size | ✅ | The number of colors you want to extract (between 2 and 10). |
| Output Variable | ✅ | The name of the variable that will store the color data object. |
Use the dominant color from this block to set the background of a card or the color of a button to create a seamless, professional look that matches the user's media.
Error Handling
INPUT_MISSING— Triggered when no image data is provided for analysis.EXTRACTION_FAILED— Triggered if the color extraction algorithm fails (e.g., due to an unsupported image format).
Example
- Input Image:
{product_image_base64} - Palette Size:
4 - Output Variable:
img_style
Result: The variable {img_style} will contain an object with Hex codes:
{
"dominant": "#a43b3b",
"palette": [
"#a43b3b",
"#1a1a1a",
"#f0f0f0",
"#45aaf2"
]
}You can access the main color via {img_style.dominant}.