Extracts a color palette from your logo and outputs a complete custom Memberlite color scheme — all 17 color values ready to enter in the WordPress Customizer.
Extract your brand colors from a logo and generate a complete, ready-to-apply Memberlite color scheme: all 17 color values assigned, with instructions for applying them in WordPress.
Option 1 — URL: Paste the URL to your logo image. If your tool supports web fetching, it will analyze the image directly.
Option 2 — Upload: If your AI tool supports image uploads, attach your logo file to the conversation.
Option 3 — Describe your colors: Provide your primary brand color(s) by hex code or description (e.g., "deep navy blue and warm gold"). The more specific, the better the output.
From the logo (or description), identify the following brand colors:
| Role | What to look for |
|---|---|
| Primary | The dominant brand color — most prominent in the logo |
| Secondary |
| A supporting color — often a lighter or complementary tone |
| Action / Accent | The high-energy color for CTAs, highlights, attention — often the most saturated |
| Dark text | Near-black for body text — extracted from the logo's darkest tone, or standard 222222 |
| Background | Usually white or off-white; sometimes a light tint of the primary |
If the logo is monochromatic, suggest a complementary accent color that pairs well with it.
Present the extracted palette before assigning values:
Brand Palette Extracted:
Primary: #[hex] — [description]
Secondary: #[hex] — [description]
Action: #[hex] — [description]
Dark text: #[hex]
Background: #[hex]
Flag any WCAG AA contrast failures (4.5:1 for body text, 3:1 for large text/UI).
Memberlite uses exactly 17 color settings. Assign a value to each one.
The CSS custom properties these generate follow the pattern --memberlite--color--{css_var}.
| Setting Key | CSS Variable | Label | Assignment Strategy |
|---|---|---|---|
color_primary | --memberlite--color--primary | Primary | > Brand primary |
color_secondary | --memberlite--color--secondary | Secondary | > Brand secondary |
color_action | --memberlite--color--action | Action | > Brand action/accent |
color_button | --memberlite--color--button | Buttons | > Brand primary or action (depends on contrast) |
color_link | --memberlite--color--link | Links | > Brand primary (must pass contrast on white bg) |
color_meta_link | --memberlite--color--meta-link | Meta Links | > Brand secondary or a muted tone of primary |
color_text | --memberlite--color--text | Text | > Dark text (near-black) |
background_color | --memberlite--color--site-background | Site Background | > White or light brand background |
color_borders | --memberlite--color--borders | Borders | > Light gray (e.g., e0e0e0) or light tint of primary |
header_textcolor | --memberlite--color--header-text | Header Text | > Dark or light depending on header bg |
bgcolor_header | --memberlite--color--header-background | Header Background | > White, light, or brand primary |
bgcolor_site_navigation | --memberlite--color--site-navigation-background | Site Navigation Background | > Matches or complements header bg |
color_site_navigation | --memberlite--color--site-navigation | Site Navigation | > Readable on nav bg; often dark text or white |
bgcolor_page_masthead | --memberlite--color--page-masthead-background | Page Masthead Background | > Brand primary (strong, rich) |
color_page_masthead | --memberlite--color--page-masthead | Page Masthead | > White or light (for contrast on masthead bg) |
bgcolor_footer_widgets | --memberlite--color--footer-widgets-background | Footer Widgets Background | > Dark, light, or brand color |
color_footer_widgets | --memberlite--color--footer-widgets | Footer Widgets | > Readable on footer bg |
Apply these in Appearance > Customize > Colors in WordPress. Enter each hex value (without the #):
Primary: [hex without #]
Secondary: [hex without #]
Action: [hex without #]
Buttons: [hex without #]
Links: [hex without #]
Meta Links: [hex without #]
Text: [hex without #]
Site Background: [hex without #]
Borders: [hex without #]
Header Text: [hex without #]
Header Background: [hex without #]
Site Navigation Background: [hex without #]
Site Navigation: [hex without #]
Page Masthead Background: [hex without #]
Page Masthead: [hex without #]
Footer Widgets Background: [hex without #]
Footer Widgets: [hex without #]
Memberlite ships with 10 preset color schemes. After generating the custom palette, note which built-in scheme it's closest to. This is useful if the user wants a starting point before customizing:
| Scheme | Character |
|---|---|
| Default | Navy primary, teal secondary, orange action |
| Evergreen | Forest greens, vibrant pink action |
| Seaside Linen | Warm tan background, deep blue, chartreuse action |
| Deep Harbor | Cool blue tones, sage green |
| Midnight Violet | Dark mode, purple |
| Cocoa Ash | Dark warm browns, orange action |
| Gotham | Dark blues, peach accent |
| Soft Spruce | Clean grays, green primary, amber action |
| Iron Ember | Charcoal, rust orange |
| Slate Harbor | Deep navy, teal secondary, coral action |
Suggest: "Your palette is closest to [Scheme]. Start with that preset, then apply your custom overrides."
## [Brand Name] — Memberlite Color Scheme
### Extracted Palette
Primary: #[hex] — [description]
Secondary: #[hex] — [description]
Action: #[hex] — [description]
(+ any additional colors)
### Accessibility Check
[List any contrast failures and suggested adjustments]
### Closest Built-In Scheme
[Scheme name + brief note]
### Customizer Values
[17-row table: Label > hex (no #)]