How do I give Lovable my brand colours?
Last checked 31 Aug 2026
Short answer
Give exact hex codes in your prompt or Project knowledge, name which role each colour plays (primary, accent, background), and ask Lovable to apply them via the Tailwind/shadcn theme, not one-off styles.
Give hex codes, not colour names
"Use a nice blue" is ambiguous; "#1A56DB" is not. Provide the full palette with a role for each:
Brand colours: primary #1A56DB (buttons, links), secondary #0F172A (headings), background #F8FAFC, accent #F59E0B (highlights, badges). Apply these through the Tailwind theme so every component picks them up automatically.
Ask for theme-level changes, not scattered edits
Lovable apps use Tailwind CSS and shadcn/ui, which centralise colours in a theme configuration. Asking Lovable to update the theme means every button, badge and link updates consistently, instead of one page at a time. If colours only change on the page you were looking at, ask explicitly: "apply this to the global theme, not just this page."
Store the palette in Project knowledge
Add the palette once to Project knowledge so it's applied automatically to new pages and features without you repeating it in every prompt:
Design system: primary #1A56DB, secondary #0F172A, background #F8FAFC, accent #F59E0B. Always use these via the theme, never hardcoded hex values in components.
What usually goes wrong
- Colours applied inconsistently because they were set per-component instead of at theme level — ask Lovable to move any hardcoded colours into the shared theme.
- Low-contrast combinations — a light accent on a light background can fail accessibility contrast checks; ask Lovable to check contrast if you're unsure, especially for text on buttons.
- Dark mode not accounted for — if your app supports light/dark themes, specify both palettes, since a colour that works in light mode may not read well in dark mode.
- Only naming colours, not roles — "add #1A56DB" without saying what it's for leaves Lovable to guess whether it's a background, text or border colour.
See /questions/how-do-i-get-lovable-to-follow-my-design-properly for how this fits into a broader design brief.
Sources
Was this answer helpful?
Related questions
- AnswerHow do I upload images to Lovable?Attach images directly in the chat message box — Lovable can use them as design references or as assets to place in your app (e.g. a logo or product photo).
- AnswerShould I use screenshots when prompting Lovable?Yes, for layout and visual matching — a screenshot removes ambiguity that words leave open, especially for spacing, alignment and component styling.
- AnswerHow do I give Lovable a website to use as inspiration?Paste the site's URL in your prompt and describe which parts to borrow — layout, spacing, tone — Lovable can't literally browse and clone it, so be specific about what you want copied.
- AnswerHow do I get Lovable to follow my design properly?Give Lovable concrete references — a screenshot, a site to draw from, exact colours and fonts — and store them in Project knowledge so every prompt is checked against the same design rules.
You might also need
- GuideHow to Improve a Lovable Build PromptTake a weak prompt and rewrite it into one that produces a predictable build — with before and after examples.
- GuideHow to Write a Good Lovable PromptThe structure of a build prompt that gets a usable result first time: context, scope, behaviour, constraints and acceptance criteria.