Skip to content
WoowTools

Free Online Design Tools: Color Palette Generator, Logo Maker and More

Generate color palettes and gradients, check contrast, pick colors from images, and make avatars, mockups, patterns and brand kits.

7 tools

Color Palette GeneratorCreate color palettes from color harmony rules or from a photo. See shades, contrast and gradients, and exportPattern GeneratorCreate seamless background patterns: dots, grid, stripes, checker, zigzag, waves, triangles, plus, hexagons, cContrast CheckerCheck the contrast ratio between text and background colors against WCAG AA and AAA, for normal text, large teAvatar GeneratorCreate default avatars from a name or email: initials, geometric, beam or pixel style, circle, rounded or squaMockup GeneratorPut screenshots into a browser window, laptop, phone or tablet frame on a colored background. Add address bar Brand Kit GeneratorBuild a simple brand kit from your brand name and one color: palette from color harmony, font pairing, corner Image Color PickerPick any colour from an image with a zoom lens and get its HEX, RGB and HSL codes, plus the image's main colou

About Design Tools

Colors, patterns and mockups for your designs

Picking colors that work together, checking that text is readable and showing a screenshot in a device frame are everyday design jobs. These free design tools do them in your browser, with nothing to install.

Color

  • Palettes: the color palette generator builds palettes from color harmony rules or from a photo, with shades and contrast shown.
  • From an image: the image color picker takes any color from a picture with a zoom lens and gives its HEX, RGB and HSL codes.
  • Readability: the contrast checker tests text and background colors against WCAG AA and AAA.

Brand, avatars and backgrounds

Start a look from your name and one color with the brand kit generator, create default profile pictures from a name or email with the avatar generator, and make seamless backgrounds such as dots, grids, stripes and waves with the pattern generator. To present your work, the mockup generator puts screenshots in a browser, laptop, phone or tablet frame.

For photo edits see the image tools.

Tips

  • Check the contrast of every text color you use, not only the main one.
  • Limit a palette to a few main colors plus neutrals so the design stays calm.
  • Save the HEX codes of your brand colors somewhere you can copy them from later.