Skip to content
Every tutorial here is 100% free — and always will be
LSLovableStudent

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

Website made, maintained and hosted by PromptSites.com

PromptSites logo