Design and Media Tools
These tools support the visual side of web work: colors, gradients, contrast, CSS effects, and assets that need to look right before they ship.
- Helpful for UI work, brand experiments, and fast front-end styling.
- Covers accessibility, palette building, CSS visuals, and asset prep.
- Designed to help you make decisions without round-tripping through a full design app.
Featured picks in Design and Media Tools
Start with the higher-interest tools below, then browse the full category list if you need a narrower utility.
Aspect Ratio Calculator
Calculate aspect ratios, scale dimensions, and find missing sizes for video, photo, and design work.
Box Shadow Generator
Generate CSS box shadows visually. Stack multiple layers, adjust blur, spread, offset, and color. Copy-ready CSS output.
Color Blindness Simulator
Enter a hex color and see how it looks under four types of color blindness with simulation swatches.
Color Contrast Checker
Check foreground and background color pairs against WCAG AA and AAA accessibility standards instantly.
Color Format Converter
Convert colors between HEX, RGB, HSL, and HSB formats with a live swatch preview and quick presets.
Color Mixer
Blend two colors with a ratio slider and see the result as HEX, RGB, and HSL. Uses linear RGB interpolation.
Related topic hubs
These hubs collect nearby tools by job to be done instead of by internal category.
All Design and Media Tools apps
19 apps currently live in this category.
Aspect Ratio Calculator
Calculate aspect ratios, scale dimensions, and find missing sizes for video, photo, and design work.
Box Shadow Generator
Generate CSS box shadows visually. Stack multiple layers, adjust blur, spread, offset, and color. Copy-ready CSS output.
Color Blindness Simulator
Enter a hex color and see how it looks under four types of color blindness with simulation swatches.
Color Contrast Checker
Check foreground and background color pairs against WCAG AA and AAA accessibility standards instantly.
Color Format Converter
Convert colors between HEX, RGB, HSL, and HSB formats with a live swatch preview and quick presets.
Color Mixer
Blend two colors with a ratio slider and see the result as HEX, RGB, and HSL. Uses linear RGB interpolation.
Color Name Finder
Find the closest CSS named color to any hex value. Shows the 5 nearest named colors with swatches and distances.
Color Palette Generator
Generate complementary, analogous, triadic, and split-complementary color palettes from any base color. Copy HEX values.
CSS Filter Generator
Adjust sliders for blur, brightness, contrast, grayscale, hue-rotate, and more. Live preview. Copy the CSS string.
CSS Gradient Generator
Create linear, radial, and conic CSS gradients visually. Live preview, color stops, presets, and copy-ready CSS code.
CSS Unit Converter
Convert between px, rem, em, vw, vh, pt, cm, and more. Set your viewport and root font size for accurate results.
Gemini TTS Studio
Generate expressive AI speech with directorial tags, multi-speaker dialogue, and custom voice profiles.
Hex Code Color Generator
Generate hex color codes on demand. Pick, explore, and copy colors fast.
Metronome
Browser-based metronome with BPM slider, tap tempo, audio click, and classic tempo marking presets.
Noise Generator
Play white, brown, or pink ambient noise in your browser for focus and sleep. All audio generated locally — no downloads.
Rain Simulator
Watch an adjustable storm scene with tunable rain density, wind drift, and lightning.
Screen Size Checker
See your viewport, screen resolution, device pixel ratio, and orientation live. Updates on resize.
Teleprompter
Free browser teleprompter for video creators. Paste your script, set speed and font size, mirror mode included.
Text to Speech
Convert any text to speech using your browser's built-in voices. Adjust rate, pitch, and volume. No API key required.