This post contains an affiliate link to Base44. If you sign up through it, we may earn a commission at no extra cost to you.
You Have the Palette — Now Build the Site
You spent twenty minutes perfecting your palette: a dominant color, a secondary, an accent, and text colors that pass every contrast check. Then you hit the real wall — turning three hex codes into an actual website. This guide shows you how to apply the 60-30-10 color rule to a website built in Base44, the Wix-owned AI builder that turns plain-English prompts into working sites. Here's the catch most tutorials skip: left alone, Base44 picks its own colors, and they trend toward generic sameness. The fix is knowing exactly what to paste into the prompt box.
Whether you're a designer, indie founder, or side-project builder, you'll learn what Base44 does well, why it defaults to bland palettes, the copy-paste prompt that overrides that habit, and how to keep your contrast accessible through every AI edit.
Quick Recap: What Your 60-30-10 Palette Gives You
If you used a 60-30-10 generator, you're holding a complete color specification, not just three pretty swatches. Your dominant color (60%) sets the mood across backgrounds and large surfaces. Your secondary color (30%) structures navigation, cards, and content sections. Your accent color (10%) is reserved for buttons, links, and the moments you want eyes to land. New to the ratio? Start with the complete guide to the 60-30-10 rule before you build.
A good generator also hands you WCAG-checked text colors for light and dark backgrounds. Together, that's a reusable spec you can feed into any tool — and precision matters the moment you leave the generator. "Blue" is a guess; #2B5CE6 is an instruction.
Why Hex Codes Beat Color Names
AI builders interpret vague color names loosely, but they honor exact hex values. Before you open Base44, have these six values ready:
- Dominant / background (60%): your primary hex code
- Secondary / structure (30%): your supporting hex code
- Accent / CTA (10%): your highlight hex code
- Text on light: a WCAG-safe dark text color
- Text on dark: a WCAG-safe light text color
- Optional: a tint or shade of your dominant for hover states
What Base44 Actually Is (and Isn't)
Base44 is an AI-powered vibe-coding platform: you describe an app or website in plain English, and it generates the front-end, back-end, databases, authentication, and deployment automatically — no manual coding required. That capability list isn't marketing copy; it's how Wix describes the platform in its own SEC annual report.
The backstory is remarkable. Maor Shlomo launched Base44 in early 2025 as a solo side project in Tel Aviv, and Wix acquired it in June 2025 for roughly $80 million upfront plus earn-out payments — a deal TechCrunch covered as one of the fastest solo-founder exits in tech. (For accuracy's sake: Wix's SEC filing later put the total accounting value near $92 million after the earn-out liability was revalued — not new cash, just accounting.) Companies like eToro and SimilarWeb were already using it at acquisition.
The Credentials That Matter
Every number below is attributed to a date, because this platform moves fast:
- 250,000 users in its first six months as a standalone company (June 2025)
- Roughly 2 million users and $150 million in annual recurring revenue by May 2026
- Base1, its own purpose-built AI model, launched June 29, 2026
Honest Limits Up Front
Base44 shines for landing pages, portfolios, MVPs, internal tools, and prototypes. It's a weaker fit for complex, SEO-dependent, or production-scale software: it generates single-page apps without server-side rendering, and its backend and database are hard to export later. We'll map exactly when to use it — and when not to — near the end.
The Catch Most People Miss: Base44 Picks Its Own Colors
Ask Base44 to "build a portfolio site" with no color instructions, and its AI invents a palette for you. The results trend toward the same look everyone else gets. Don't take our word for it — Base44's own CEO described the problem when explaining why the company built its Base1 model:
Beige backgrounds… the same rounded sans-serif type… same button placement.
When the vendor itself concedes that default AI output looks generic, that's your cue to take control. And the problem goes beyond first drafts. In one documented non-developer build, Base44 ignored an explicit "no white on a white background" instruction and pushed off-theme output even after being handed fonts and hex codes — a phenomenon we call color drift.
The fix, and the thesis of this article: feed Base44 your exact hex codes, state the 60-30-10 ratio explicitly, and add a "do not change the color scheme" instruction. Here's the step-by-step.
Step-by-Step: Bring Your 60-30-10 Palette Into Base44
To use your own colors in Base44, give it your exact hex codes in the prompt and state the 60-30-10 ratio — dominant for backgrounds, secondary for navigation, accent only for buttons. Then lock those values in the Theme panel and add "do not change the color scheme" so future edits don't override them. Here's each step in detail.
Step 1 — Gather Your Six Values
Copy the six values from the recap list above into a note you can paste from: three palette hex codes plus your light and dark text colors. Keep them in one place — you'll reuse this spec on every future edit.
Step 2 — Describe the Site in Plain English
Tell Base44 what you're building before you talk about styling. For example: "A portfolio landing page for a freelance photographer, with a hero section, gallery, about section, and contact form." Structure first, colors second — this keeps the AI focused on one job at a time.
Step 3 — Paste the Palette Prompt
This is the centerpiece. Once the structure exists, paste a prompt like this, with your own hex values filled in:
Use this exact color system: background #F5F2EC (60%),
secondary/navigation #1E3A5F (30%), accent/CTA #E8552F (10%),
with text colors #1A1A1A on light and #FAFAF7 on dark.
Apply the 60-30-10 rule — dominant for backgrounds, secondary
for nav and cards, accent only for buttons and highlights.
Do not change this color scheme in future edits.
That final sentence is a negative prompt — an instruction about what not to do — and it's the part most tutorials skip. To translate your ratio into Base44's own vocabulary, use this mapping:
Mapping Base44 Theme Roles to 60-30-10
| Base44 Theme role | 60-30-10 bucket | What it controls | |---|---|---| | Background | Dominant (60%) | Page backgrounds, large sections | | Foreground / Card | Secondary (30%) | Navigation, cards, panels | | Primary / Accent | Accent (10%) | Buttons, links, highlights |
Step 4 — Lock It in the Theme Panel
Prompts steer the AI; the Theme panel enforces the result. In Base44's Theme panel, set the background, foreground, card, and primary roles using the hex field or eyedropper, then hit Save & Apply to propagate your colors site-wide. Now your palette lives in the app's settings, not just in a chat message.
Step 5 — Iterate Without Drift
Base44 references your earlier prompts on every new edit, which means a later request can quietly override an earlier design decision. Protect your palette by ending every follow-up prompt with the negative instruction: "Do not change the existing color scheme." It feels repetitive. It works.
Step 6 — Preview and Publish
Preview the site across pages and layouts, then publish with Base44's built-in hosting or connect a custom domain. Before you ship, run this quick check:
What good looks like: backgrounds read as one dominant color; navigation and cards clearly use the secondary; the accent appears only on buttons and key highlights; and every text-background pairing still matches the values you specified.
Keeping It Accessible: Don't Lose Your WCAG Contrast
Your generator checked your text pairings against WCAG standards — but AI can shift shades during generation, so you must re-verify after every build. The WCAG 2.2 contrast thresholds are 4.5:1 for normal text and 3:1 for large text and UI elements, and they don't round: 4.499:1 fails.
This matters more than most builders realize. WebAIM's Million report (February 2026), which audits the top one million home pages, found low-contrast text on 83.9% of them — the single most common accessibility failure on the web. And hitting the ratio alone isn't enough. Nielsen Norman Group notes that an earlier UberEats design "followed the 60-30-10 rule decently", yet its green logo vibrated against the orange background and was hard to read.
So after each generation, paste your hex pairs into the WebAIM Contrast Checker and confirm nothing drifted. For a deeper look at why proportion and legibility are separate problems, see our guide to balancing color harmony and contrast.
When Base44 Is the Right Call — and When It Isn't
Base44 converts a palette into a product faster than almost anything else, but honest scoping beats hype. A portfolio is a perfect Base44 project; a content-marketing site that must rank in search is not, because single-page apps without server-side rendering start at an SEO disadvantage.
Quick Decision Guide
Reach for Base44 when you're building:
- Landing pages and portfolios
- MVPs and prototypes you need live this week
- Internal tools and dashboards
Reach for hand-coded sites or templates when you need:
- Heavy custom logic or long-term scalability
- SEO-dependent content that must rank
- Full ownership and export of your backend
If you land in the second column, a designer-to-developer handoff is the sturdier path — our breakdown of Figma-to-code AI workflows in 2026 walks through those options.
Turn Your 60-30-10 Colors Into a Live Website Today
A palette is a plan; Base44 turns it into a product in an afternoon — but only if you stay in charge. Hand the AI your exact hex codes with the 60-30-10 ratio spelled out, lock the values in the Theme panel, repeat your "do not change the color scheme" instruction on every edit, and re-verify contrast after each generation.
Your next step takes minutes: gather your six values and paste the prompt template above. Ready to go from palette to product? Try Base44 free and paste in your colors — or, if you don't have your three hex codes yet, generate them instantly with our 60-30-10 color generator and start building a balanced website in seconds.