Swatch creator Free Web App

Generate a 5-swatch palette, see the 60-30-10 breakdown, then preview it in a live web or mobile UI.

Click any swatch to open the bottom editor. Lock up to 2 example colors, then click Fill from Locked to harmonize the rest. The top three swatches (by usage %) flow into the 60-30-10 breakdown and preview below.

60-30-10 Breakdown

Sized by usage. Top three swatches map to dominant / secondary / accent.
60%
30%
10%

Sample preview

See the active palette dressed up in a real interface.

Good morning

Open
12
+3 today
In Progress
5
2 due soon
Done This Week
28
+18%
Today's Tasks
Review color palette proposal Design
Send Q2 budget to finance team Priority
Schedule design review with engineering Meeting
Draft launch announcement copy Marketing