Colors and contrast
Convert between HEX, RGB and HSL, generate harmonious palettes and gradients, and check that text and background meet accessibility contrast levels.
Design tools
Helpers for designers and front-end work: convert and pick colors, build palettes and gradients, check contrast, compress and resize images, and generate CSS. Images are processed on your device.
30 showing
01 PNG to JPG Flatten a PNG onto white and download a JPEG.converter02 JPG to PNG Re-encode a JPEG as a PNG.converter03 Image to WebP Encode PNG, JPEG or WebP as WebP.converter04 Image to AVIF Encode an image as AVIF right in the browser.converter05 Image Compressor Reduce JPEG or WebP size with a quality slider.converter06 Image Resizer Fit an image inside a width and height.converter07 Image Cropper Drag a rectangle and export that region.converter08 Image Format Information Type, dimensions and file size from the file itself.converter09 QR Code Generator Create a QR code and download the PNG.converter10 Barcode Generator CODE128, CODE39, EAN-13 and UPC.converter11 Color Format Converter HEX, RGB and HSL from one value.developer12 Color Picker Pick a color and read its channels.developer13 Contrast Checker WCAG contrast for two colors.developer14 HTML Playground HTML, CSS and JS in a sandboxed frame.developer15 CSS Gradient Generator Build a linear gradient and copy the CSS.developer16 Box Shadow Generator Tune a shadow and copy the declaration.developer17 Flexbox Playground Direction, wrap, alignment and gap.developer18 Grid Generator Columns, rows and gap as CSS Grid.developer19 Responsive Breakpoint Preview See HTML at phone, tablet and desktop widths.developer20 CSS Unit Converter px, rem, em, pt and percent.developer21 Aspect Ratio Simplify a pixel width and height.developer22 CSS clamp() A clamp() declaration from three lengths.developer23 Type Scale A modular type scale in pixels.developer24 Color Shades Five lighter and darker steps of one hex color.developer25 Complementary Color The opposite hue of a hex color.developer26 Spacing Scale A spacing ramp from a base and a ratio.developer27 SVG Placeholder A small SVG with a label. No image host.developer28 Letter Avatar An SVG avatar from one letter.developer29 CSS Radius A border-radius declaration.developer30 CSS Filter Blur and brightness as a filter declaration.developer
About
Images ready for the web
Compress, resize and convert images in the browser to make pages lighter. The pictures are never uploaded.
FAQ
Frequently asked questions
Can I convert HEX to RGB here?
Yes. The color tools convert between HEX, RGB, HSL and other formats and show a live preview.
Are my images uploaded for compression?
No. Compression and resizing happen in your browser.
Do the tools generate CSS code?
Yes. Gradient, shadow and similar helpers give ready-to-copy CSS.