ToolKit

Design & Media Tools

Free Online Design & Media Tools

Color and design utilities for designers and developers. Generate harmonious color palettes, convert between HEX, RGB, HSL and CMYK, check WCAG contrast, generate favicons, and optimize SVGs — all in your browser.

Color Palette Generator
Generate harmonious color palettes
Live
Username Generator
Creative usernames for social media & gaming
Live
CSS Unit Converter
Convert px, rem, em, vw, vh and more
Live
Color Contrast Checker
WCAG 2.1 AA/AAA contrast ratio checker
Live
Color Converter
Convert between HEX, RGB, HSL, HSV and CMYK
Live
Favicon Generator
Generate favicons from text or emoji
Live
Color Name Finder
Find the nearest CSS color name for any hex
Soon
Image to Base64 Converter
Convert images to Base64 data URLs
Soon
SVG Optimizer
Optimize and compress SVG files
Soon
CSS Gradient Generator
Create CSS gradients with live preview
Soon
Box Shadow Generator
Create CSS box shadows with live preview
Soon

Design and media tools that work in your browser

Good design starts with the right colors. Whether you're building a brand palette, matching colors across formats, or generating usernames for a new product — these tools handle the repetitive parts so you can focus on the creative decisions.

Color conversion between HEX, RGB, HSL, HSV, and CMYK is a constant friction point in design workflows. HEX is what you get from Figma, RGB is what CSS expects, HSL is what makes theming intuitive, and CMYK is what printers require.

All tools run locally in your browser. Colors, palette data, and usernames are never transmitted to any server.

Design & Media best practices

Use HSL for design systems
HSL is the most intuitive format for creating color scales. Adjust only the lightness value to create tints and shades from a single hue — perfect for design tokens.
Verify WCAG contrast before shipping
WCAG 2.2 requires a contrast ratio of 4.5:1 for normal text and 3:1 for large text. Low-contrast designs fail accessibility audits and exclude users with visual impairments.
Design in RGB, export CMYK for print
Always design in RGB (screen) and convert to CMYK only when submitting to a printer. Some vivid RGB colors cannot be reproduced in CMYK.
The 60-30-10 color rule
A balanced palette: 60% dominant color (backgrounds), 30% secondary color (surfaces, cards), 10% accent color (buttons, links, highlights).

FAQ

Common questions

What is the difference between HEX, RGB, and HSL?

HEX (#rrggbb) is shorthand for RGB in base-16, used in HTML and CSS. RGB mixes three light channels (0–255 each). HSL describes colors by hue, saturation, and lightness — more intuitive for design work.

What color harmony modes are available?

The palette generator supports: Analogous (adjacent colors), Complementary (opposite colors), Triadic (three equidistant colors), Split-Complementary, Tetradic (four colors), Monochromatic, and Random.

What is CMYK and when is it used?

CMYK (Cyan, Magenta, Yellow, Black) is a subtractive color model used in print. Unlike RGB which adds light, CMYK subtracts light with ink. Use CMYK values when submitting designs to a printer.

Can I use HSL colors directly in CSS?

Yes. Modern CSS fully supports hsl(h, s%, l%) and the newer space-separated syntax hsl(h s% l%). HSL is preferred for CSS theming because you can create lighter/darker variants by adjusting only the lightness value.

How do I create a consistent username style?

Choose one style and stick to it: professional (firstlast or first.last), minimal (short, single word), fun (adjective + noun), or gamer (compact, no separators). Consistency matters more than creativity for brand usernames.

More tool categories