Online Color Replacer – Pick & Swap Hue in Image
Select a color in an image and change it to another hue. Canvas‑based, local processing.
UD5 Toolkit
Shift colors, adjust saturation, brightness & contrast — all in your browser
Hue shifting (or hue rotation) changes the overall color tone of an image by rotating all colors around the color wheel. For example, a 60° shift turns reds into yellows, greens into cyans, and blues into magentas. It's like applying a global color remap while preserving the relationships between different shades. This technique is widely used in photography, graphic design, and digital art to create mood variations or color grade images.
No. All image processing happens entirely in your browser using Canvas and CSS filter APIs. Your images are never uploaded to any server, making this tool 100% private and secure. You can use it offline as well — once the page loads, no internet connection is needed for processing.
Upload: JPG/JPEG, PNG, GIF (static), WebP, SVG, and BMP are all supported. Download: The processed image is exported as a high-quality PNG file to preserve transparency and avoid compression artifacts. If you need JPEG or WebP output, you can use the CSS filter code to recreate the effect in other software.
Hue is the actual color tone (red, blue, green, etc.). Shifting hue rotates all colors around the color wheel. Saturation controls color intensity — 0% makes the image grayscale, 200% makes colors extremely vivid. Brightness adjusts overall lightness — below 100% darkens, above 100% lightens. Contrast controls the difference between light and dark areas — higher contrast creates more dramatic images with deeper shadows and brighter highlights.
Absolutely! The "Copy CSS Filter" button gives you the exact CSS filter property value that replicates the effect. You can paste it directly into your stylesheet or inline style. Example: filter: hue-rotate(45deg) saturate(1.3) brightness(1.1) contrast(1.05);. This works on any HTML element — images, divs, videos, and even text.
Presets are pre-configured combinations of hue, saturation, brightness, and contrast values designed to achieve popular looks: Warm adds golden/orange tones for a cozy feel; Cool shifts toward blue/teal for a crisp look; Vintage reduces saturation and adds warmth for a retro film effect; Vivid boosts saturation for punchy colors; Golden Hour mimics warm sunset lighting; Dramatic increases contrast for cinematic depth; Cyberpunk shifts toward purple/magenta with boosted saturation for a neon aesthetic.
When previewing, CSS filters are applied in real-time at the rendering level — the underlying image data isn't modified, so there's zero quality loss during preview. When downloading, the image is re-rendered through Canvas at the original resolution (or a max of 4096px on the longest side). PNG export ensures lossless compression, so quality is preserved. For best results, start with a high-resolution source image.
Yes! The tool is fully responsive and works on all modern mobile browsers (Safari, Chrome, Firefox). You can upload photos directly from your camera roll, apply adjustments with touch-friendly sliders, and download the result — all from your phone. Clipboard paste is also supported on mobile where available.
Extreme slider values can create striking artistic effects — for example, max saturation (200%) produces hyper-vivid colors, while minimum brightness (30%) creates a heavily darkened, moody image. Hue shifts of ±180° produce a complete color inversion effect. There's no "wrong" setting — experiment freely! Use the Reset button to return to defaults at any time.
Unlike preset-heavy apps, this tool gives you granular, real-time control over individual color parameters. You can fine-tune each aspect (hue, saturation, brightness, contrast) independently, combine them however you like, and instantly see the CSS code behind the effect. It's designed for both casual users who want quick presets and developers/designers who need precise, reproducible color transformations.
Select a color in an image and change it to another hue. Canvas‑based, local processing.
Simulate how a palette looks under daylight, tungsten, or fluorescent light. Understand metamerism. For accurate color work.
Add a soft vignette to your photo. Control radius, darkness, and feathering. Creates a classic photographic look.
Chain multiple CSS filter functions and see the result on an image. Copy the filter string. No upload.
Automatically remove white background from an image and make it transparent. Adjust tolerance. Save as PNG.
Upload an image and get its BlurHash string along with a tiny preview. Use for progressive loading. Pure JavaScript.
Automatically remove the background from any photo using a small on‑device AI model (WASM). No upload. Works offline.
Search and filter all CSS properties that can be animated. See value types and example keyframes. Quick dev reference.
Adjust rotateX/Y/Z and translate to see a 3D box in real time. Copy optimized CSS transform.
Create a looping animated gradient background with multiple color stops. Copy the complete CSS keyframes. Eye‑catching.
Click on a box to set the transform‑origin point and see how rotations and scales change. Copy the CSS.
Create CSS animations and transitions without coding. Define keyframes, easing, and duration. Copy the @keyframes and animation code instantly.
Convert short video clips to GIFs with adjustable resolution, frame rate, and dithering. Preview before download. All local.
Recreate the target CSS linear gradient by adjusting stops and colors. A unique game for front‑end developers to master gradients.
Preview different touch feedback patterns (scale, color, ripple) for mobile buttons. Copy the CSS and HTML. Improve mobile UX.
Try all object‑fit values (fill, contain, cover, scale‑down) on an image. Adjust object‑position. Copy the CSS.
Stack multiple background images and blend them with colors. Create unique textures. Copy the CSS code instantly.
Upload an animated GIF and generate a reversed version. Share the funny backwards motion. Works entirely in your browser via canvas.
Generate dynamic placeholder images by specifying width, height, colors, and text. View instantly as a URL you can embed in mockups. Canvas-based.
Convert a small image into a Base64 data URI and get a Markdown image tag. Perfect for README files and note‑taking apps. Local.
Trim a video clip and convert it into an animated GIF. Adjust frame rate and size. Processing stays on your computer for privacy.
Generate a subtle noise/grain texture as a CSS background pattern. Adjust opacity and size. For that film look.
Drag pucks onto a digital lane to plan offensive and defensive shots. Practice before your next cruise.
Generate a link to an SVG placeholder image with a custom width, height, and text. Use as dummy image src. No server.
Create a reflection effect for images or text using box‑reflect. Adjust direction and offset. Copy the CSS.
Search for common ingredient substitutions (e.g., buttermilk, egg, cornstarch). Quick reference for when you're missing something. Local data.
Easily compute posterior probabilities given prior, likelihood, and marginal likelihood. Visual diagram. All local.
Convert animated GIFs to animated WebP format for smaller file size. Choose quality level. All processing in browser.
Load a sprite sheet, define frames, and play an animation on a canvas. Control frame rate and loop. Game dev tool.
Select emojis and arrange them into a seamless tiling background. Copy the CSS data‑URI or download as image.