Guide

From your live website to a new look in your code, in about ten minutes.

1. Capture your website

Sign in with Google, paste your page's address (it must start with https) and click Capture website. Colorit loads it in a real browser, so pages built with JavaScript work too. It usually takes 10–20 seconds.

2. Find your look

  • Click palettes on the left; the preview restyles your page at once. Shuffle for ideas, or generate one.
  • Pick a font pairing to change headings and body text.
  • Switch between Balanced and Expressive to change how strongly the accent color is used.
  • Use Original to compare, and the phone icon to check the mobile view.

3. Export it

Click Export. Palette CSS is free. With Pro you get the full theme for your stack, a prompt for your coding tool and Download all (.zip), which has every file plus a README.

4. Apply it in your project

Commit or back up your project first, so you can compare and undo.

Cursor

  1. Open your project in Cursor and switch the chat to Agent mode.
  2. In Colorit, open Export → AI prompt → Cursor and click Copy prompt.
  3. Paste it into the chat and send. Review the diff, then run your app to check the pages.

Claude Code

  1. Open a terminal in your project and start Claude Code.
  2. In Colorit, choose Export → AI prompt → Claude Code and copy the prompt.
  3. Paste it. Claude Code finds your theme files, plans the change, applies it and runs your lint and build.

Lovable, Bolt and v0

  1. Open your project in the builder.
  2. In Colorit, pick the prompt for that builder. It already contains the exact CSS to paste, in the format the builder uses.
  3. Paste the prompt into the builder's chat and send. Check the preview, then publish.

Any other agent (Windsurf, Copilot, ChatGPT…)

  1. Choose Export → AI prompt → Any agent.
  2. Paste the prompt into your tool together with your theme file (for example globals.css or tailwind.config).

By hand, without an agent

  1. Pick the tab for your stack: shadcn/ui, shadcn (HSL), Tailwind v4, Tailwind v3, CSS variables or JSON tokens.
  2. Follow the note above the code: it says where the code goes and what to merge.
  3. Replace colors that your components hard-code with the new variables.

5. Share it (Pro)

In Export → Review link, save the look as a project and create a link. Anyone with the link can see the restyled page without an account. Links last 7, 14 or 30 days and can have a password.

Tips

  • Each export is one color scheme. If your site has a dark mode, make a separate look for it.
  • After applying, check text contrast on your real pages, especially custom components.
  • The preview is a snapshot with scripts turned off, so menus and animations may not move.