Free Online Designer Tools
Color picker, HEX to RGB, palettes and CSS gradients — 13 free tools for designers.
this category
Explore other categories
About
About Designer Tools
Toolapt's 13 free online designer tools cover the colour work behind every layout, brand and UI. Pick an exact colour from an image or anywhere on your screen with the Color Picker, convert colour codes between HEX, RGB, HSL, HSV and CMYK, and turn HEX into RGB or back in one step. Build a palette from a base colour using colour-wheel harmonies, generate tints and shades, pull the dominant colours out of a photo, grab a random colour for inspiration, and design linear or radial CSS gradients with the code ready to copy. Shape your components with the Box Shadow Generator and Border Radius Generator, both with sliders and a live preview. Before you ship, check text and background colours against WCAG contrast ratios and preview how an image looks to people with colour blindness. Designers, front-end developers and brand teams use them every day — no account, no install and no limit.
FAQ
Frequently asked questions
Quick answers to the questions people ask most.
How do I pick a colour from an image?
Upload the image to the Color Picker and click any point to get its exact colour as HEX, RGB and HSL. It can also pick a colour from anywhere on your screen in browsers that support it.
How do I convert HEX to RGB?
Paste the HEX code (like #e2553f) into the HEX to RGB Converter to get its RGB and RGBA values. The RGB to HEX Converter does the reverse, and the Colour Converter also handles HSL, HSV and CMYK.
How do I create a colour palette?
Pick a base colour in the Colour Palette Generator and it builds a palette from classic colour-wheel relationships such as complementary, analogous and triadic. To get lighter and darker versions of one colour, use the Colour Shades and Tints Generator.
How do I get the colours from a photo?
Upload the photo to the Image Colour Palette Extractor. It pulls out the dominant colours with their HEX codes ready to copy.
How do I make a CSS gradient?
Open the CSS Gradient Generator, choose linear or radial, add your colour stops and angle, and copy the finished CSS background code.
How do I create a CSS box shadow or rounded corners?
Use the Box Shadow Generator to set offset, blur, spread, colour and opacity with sliders, and the Border Radius Generator to round each corner in px or %. Both show a live preview and give you the CSS to copy.
How do I check if my text colour has enough contrast?
Enter the text and background colours into the Colour Contrast Checker. It calculates the WCAG contrast ratio and shows whether the pair passes the AA and AAA levels for normal and large text.
Can I see how my design looks to colour-blind users?
Yes. Upload a screenshot or image to the Colour Blindness Simulator to preview it under common types of colour vision deficiency.
Are these designer tools free? Do I need to sign up?
All 13 designer tools are completely free, with no account and no limit on how often you use them. They work in any modern browser on phone, tablet and desktop.
Are my images uploaded anywhere?
No. Every designer tool runs in your own browser — the Color Picker, palette extractor and colour blindness simulator read your image on your device, and nothing is uploaded to Toolapt.