Designalyse

Drag a box over anything on a page to get its colour palette with hex codes and its fonts, with free download links.

Drag a box over anything on a web page and Designalyse shows you its colour palette and its fonts, ready to copy, download or save as an image. COLOURS • The main colours of your selection, most common first, as paint-chip cards: big hex code, colour name, RGB and how much of the selection each covers. • Click a chip to copy its hex code, or copy them all at once. • Choose how many colours you want, from 2 to 12. GRADIENTS • Gradients get their own row: the page's CSS gradients exactly, and gradients in pictures estimated. Click to copy the CSS. FONTS • Text that's part of the page: the exact font, weight, size, line height, letter spacing and colour, read from the page itself. • Each differently styled part of the text is outlined on your selection with a numbered tab of its details, like a design tool's inspector. • Text inside pictures (logos, banners, posters, screenshots): recognised from the pixels by an AI model that runs on your computer and knows about 1,400 free fonts. Each guess says how sure it is, with close alternatives. • Free fonts get a Download button and a link to Google Fonts. Paid fonts get a search link and a free lookalike. SAVE AND SHARE • Download a PNG card with your selection, the palette and the fonts with their links. PRIVATE BY DESIGN • Everything happens on your computer. Your selection is never uploaded. • Designalyse only runs on a tab when you click its button or press its shortcut: Alt+Shift+D, or Option+Shift+D (⌥⇧D) on a Mac. TIPS • Draw the box tightly around one line of text for the best font match. • Text over busy photos is harder to read than text on a plain background. • Recognition from pictures is a best guess: popular fonts that look alike can be confused.