CSS Media Query Generator - Online Quick Syntax Builder
Build a CSS media query by selecting feature, operator, and value. Copy the exact syntax for your stylesheet.
UD5 Toolkit
Online Prettify & Highlight — beautify your SQL instantly
Your formatted SQL will appear here...
Build a CSS media query by selecting feature, operator, and value. Copy the exact syntax for your stylesheet.
Paste a media query and instantly check for syntax errors. See if it's correctly formed. Quick developer tool.
Pick colors from a palette or use the eye dropper to sample colors from your screen. Converts between HEX, RGB, HSL. An essential tool for designers.
Paste media queries and see a visual indicator of which rules apply at current viewport size.
Automatically adjust brightness, contrast, and saturation of a photo. Click to enhance and download. Canvas‑based.
Write a media query and instantly see if it matches your current viewport. Width, height, orientation, and more.
Choose a pre-drawn pixel outline and fill cells with colors. Save your masterpiece. Meditative fun.
Reduce GIF file size by lowering color count and removing duplicate frames. See side‑by‑side preview. All local.
Preview how your page title will appear in Google SERPs. See pixel width and character count. Avoid truncation. Free local tool for SEOs.
Write a media query and see if it matches as you resize the iframe. Understand width, height, and resolution queries.
Upload an image and extract its dominant colors or full color palette. Download as a CSS snippet or color swatch. Entirely client-side, your images stay private.
Quickly adjust the brightness and contrast of an image with live preview sliders. Download the tuned photo. Canvas.
Convert hex or RGB to CIELAB L*a*b* values. Understand perceptual lightness and color opponents. Local math.
Select colors in the OKLCH space with lightness, chroma, and hue. Convert to hex, RGB, and CSS oklch(). Perceptually uniform gradients.
Select two or more clay colors and visually approximate the mixed result. Helps plan canes and blends.
Convert images between popular formats like PNG, JPEG, WEBP, and BMP. No quality loss on conversion when using lossless formats. Private and fast.
Browse the OKLCH color space with sliders for lightness, chroma, and hue. See the CSS oklch() code. Modern and accessible.
Enter the URL of any online image and extract its dominant colors or pick colors with a magnifier. No upload, cross‑origin friendly.
Interactively create colors in HWB space and get the CSS hwb() function. Simplifies tint/shade workflows. Live preview.
See how your page title and description will look in Google SERP. Check pixel width and character count. Local tool.
Enter two hex colors and compute the CIE76, CIE94, and CIEDE2000 color difference. Understand how humans perceive color similarity.
Enter a website URL and apply a protanopia/deuteranopia/tritanopia filter. Test full page accessibility.
Toggle image‑rendering: auto, pixelated, crisp‑edges on a scaled image. Essential for pixel art display.
Enter an image URL and extract its dominant color palette. No download needed. Fast visual analysis.
An interactive color wheel that teaches primary, secondary, tertiary colors, and harmonies. Pick and mix like a pro.
Apply a soft watercolor painting effect to your photo. Adjust brush size and color intensity. Download the result. Local canvas.
Enter an image URL to extract a 5-color dominant palette. Avoids uploading files. Uses canvas to read remote image pixels. Fast and privacy-oriented.
Convert RGBA colors to CIELAB and other advanced color spaces. For fine‑tuning design tokens. Client‑side math.
Convert RGB and hex colors to CIELAB L*a*b* values. Understand perceptual lightness and chromaticity. All local math.
Generate a harmonious three‑color palette with a matching simple favicon shape. Perfect for quick project identity. All local.