ToolHop.

ADVERT

Flat UI Colors Palette

Browse the Flat UI Colors v1 and v2 palettes. View all swatches and copy hex codes instantly for use in your designs and code.

How to use this tool

  1. Browse palette versions and color families in the swatch grid.
  2. Click any swatch to copy its HEX code to your clipboard.
  3. Use copied values directly in design systems, UI themes, or CSS tokens.

What is included

  • Contains curated Flat UI v1 and v2 color sets in one view.
  • Shows color names and HEX values for rapid reference.
  • Organized by version to preserve original palette context.

Implementation tips

  • Map selected swatches to semantic tokens before production use.
  • Pair accent colors with neutral surfaces for balanced contrast.
  • Validate text readability when using saturated colors as backgrounds.

FAQ

Can I copy HEX codes from each swatch?
Yes. Click any swatch and its HEX value is copied instantly.
Does this include both Flat UI v1 and v2 palettes?
Yes. Both versions are included and displayed as separate groups.
Is this palette suitable for design token systems?
Yes. You can map selected colors into semantic token names for consistent UI theming.

ADVERT

ADVERT