Design tools

About these tools

All 36 tools in this section are free, work in your browser on any device, and need no sign-up.

• HEX to RGB converter: Convert HEX color codes to RGB, and see the same color as HSL, HSV, CMYK, OKLCH and its name.
• RGB to HEX converter: Convert rgb(…) colors to HEX codes, plus every other color format.
• HEX to HSL converter: Convert HEX colors to HSL, with lighter and darker shades.
• Color contrast checker: Check text and background colors against WCAG AA/AAA, and get the nearest colors that pass.
• Color blindness simulator: See an image or your colors the way people with color blindness do.
• Color palette generator: Generate color schemes, lock the colors you like, pull a palette from a photo and check text contrast.
• Gradient background generator: Design linear, radial, conic and mesh gradients, pick from a gallery, copy the CSS or download a wallpaper.
• Glassmorphism generator: Make frosted-glass cards with live preview and copy the CSS.
• Neumorphism generator: Make soft, 3D-looking buttons and cards (soft UI) and copy the CSS.
• CSS pattern generator: Stripes, dots, grids, checkerboards, zigzags and more as pure CSS or SVG backgrounds.
• SVG shape generator: Stars, polygons, badges and bursts as SVG or PNG.
• SVG blob generator: Random organic blob shapes for backgrounds and illustrations, as SVG or PNG.
• SVG wave generator: Layered waves for section dividers and backgrounds, as SVG, PNG or CSS.
• Pixel art maker: Draw pixel art on a grid with mirror mode, fill and undo, and download a sharp PNG.
• ASCII art generator: Turn text into big ASCII letters (many fonts), or turn a photo into ASCII art.
• Favicon & app icon generator: Every icon size from one image: favicon.ico, Apple touch icon, Android and PWA icons, with the HTML code.
• Favicon previewer: See how your icon looks in browser tabs (light and dark), bookmarks, Google results and phone home screens.
• Social media banner maker: Make YouTube, LinkedIn, X and Facebook banners with the exact sizes and safe areas shown.
• Profile picture frame: Add a colored ring and curved text (like HIRING or an event name) around your profile photo.
• Font pairing tool: Hand-picked heading and body font pairs, including Arabic, with live preview and CSS.
• QR code designer: Custom QR codes: colors, gradients, dot and corner shapes, a logo and a “Scan me” frame.
• Logo maker and business logo generator: Make a simple logo from a name, an icon and your colours, and download it as SVG or PNG.
• Tints and shades generator: Lighter tints, darker shades and softer tones of any colour, with CSS variables.
• Colour mixer: Mix two colours in any amount and see the result in HEX, RGB, HSL and OKLCH.
• Colour wheel and harmonies: Complementary, analogous, triadic and other colour schemes from a colour wheel.
• Colour contrast grid: Check every text and background pair in your palette against WCAG at once.
• CSS colour names: All 148 CSS colour names with their codes, and the nearest name for any colour.
• Kelvin to RGB (colour temperature): Turn a light's colour temperature (2700 K, 6500 K…) into its HEX and RGB colour.
• Tailwind colour palette generator: Make a 50–950 Tailwind CSS colour scale from your brand colour, for v3 or v4.
• Material colour palette generator: Material 3 style tonal palettes and light and dark colour roles from one seed colour.
• Shadow scale generator: Make a set of matching box shadows (elevation levels) as CSS variables.
• Colour scale generator: Smooth steps between two colours for charts, maps and gradients.
• Gradient text generator: Make colourful gradient text with CSS, or download it as a transparent PNG.
• Extract colours from an image: Find the main colours of a photo or logo, with how much of each there is.
• Colour-blind safe palette checker: Check whether people with colour blindness can tell your palette's colours apart.
• Random colour generator: Random colours, vivid, pastel, dark or earthy, with names, HEX codes and locks.