Design tools
Open Design tools on Happytails.ai. This view has the same page content and links, with explicit tool capabilities. Read the processing notes before using a tool.
Page guide
Find the right tool and get straight to your task.
No account needed.Color picker
Choose a color and grab its HEX and RGB values.
Palette generator
Build a family of lighter and darker shades from one color.
Collage maker
Arrange your images in a simple collage.
Aspect ratio calculator
Find the simplest ratio for your image or screen dimensions.
Favicon generator
Give your site an ICO favicon made from an image.
RGB to hex
Turn red, green and blue values into a HEX color code.
Contrast checker
Check whether your text and background have enough color contrast.
Hex to RGB
Turn a HEX color code into RGB values.
Word art generator
Give your words display lettering with font, fill, outline and layout controls.
Color palette from image
Pull a palette of dominant colors from an image.
Curved text generator
Bend text around an arc or circle with adjustable spacing.
CSS flexbox
Create CSS for a flexible row or column layout.
CSS grid
Build CSS for a grid with your chosen columns and gaps.
PX to REM converter
Convert CSS pixels and rem units in either direction.
Gradient generator
Build a two-color linear gradient and copy its CSS.
SVG optimizer
Trim SVG markup to reduce its file size.
CSS box shadow
Build a CSS shadow with the position and blur you want.
Color shades
Find lighter and darker versions of your chosen color.
Palette visualizer
See your palette on text, buttons and surfaces before using it.
Business card maker
Compose and preview both sides of a contact card, with physical size, bleed and safe-area controls, then download an RGB print PDF, PNGs and editable source.
Emoji maker
Make your own expression. Pick the eyes, mouth and color, then download your emoji.
Mind Map Editor
Turn an indented outline into a tidy mind map you can download as SVG. The map comes with Markdown and OPML copies of the outline so you can keep editing it.
Motion Easing Visualizer
Compare up to six animation timing curves side by side and export sampled values plus ready-to-use CSS. Springs are converted to a CSS linear() function with the error stated.
About design tools
Designers, developers and social media managers use these free design tools for color, layout and small graphics. The Color picker, Palette generator and Color palette from image help you find and save colors, while RGB to hex and Hex to RGB convert codes. The Contrast checker tests text legibility. For web work there are CSS flexbox, CSS grid, Gradient generator and PX to REM converter tools, plus a Favicon generator and SVG optimizer.
Start with the output you need. If you are building a site, pair the Palette generator with the Contrast checker so your colors work for text. For graphics, the Collage maker, Word art generator and Business card maker produce files you can download right away.
Popular design tools
Common questions
What contrast ratio should my text meet?
WCAG level AA asks for at least 4.5 to 1 for normal text and 3 to 1 for large text. Level AAA asks for 7 to 1 and 4.5 to 1. The Contrast checker shows the ratio for your colors and which levels they pass.
Are my images uploaded to make a collage or favicon?
No. The Collage maker, Favicon generator and Color picker run in your browser. Your images are processed on your device and are not sent to our server when you build or download the result.
Which favicon sizes do I need?
Most sites need a small ICO or PNG for browser tabs and a larger PNG for home screen shortcuts. The Favicon generator creates the common sizes from one image, and you add the provided tags to your page head.