Chromatic Adaptation Demo - Online See Color Under Different Lights
Simulate how a palette looks under daylight, tungsten, or fluorescent light. Understand metamerism. For accurate color work.
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.
Simulate how a palette looks under daylight, tungsten, or fluorescent light. Understand metamerism. For accurate color work.
Select a color in an image and completely remove it or make it transparent. Great for background removal experiments. Local.
Apply real-time CSS filters or canvas effects to a video and download the processed output. Experiment with video post-processing locally.
Keep one selected color and turn the rest of the image to grayscale. Eye‑catching selective color effect. Pure canvas.
Shift the pitch of any audio clip by semitones without affecting playback speed. Perfect for music transposition. Local Web Audio.
Add a soft vignette to your photo. Control radius, darkness, and feathering. Creates a classic photographic look.
Mix two or more colors using subtractive (CMYK‑like) blending. See what happens when you combine real paints. Brush effect canvas.
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.
Adjust a brightness threshold slider and see the live vector trace of an image. Export as SVG. Potrace‑style.
Apply a blur effect to image background while keeping the subject sharp. Simple brush selection for area to keep sharp. CSS+Canvas implementation, local only.
Add a dramatic fire or flame overlay to any image. Realistic blending. Adjust intensity. Download the hot result.
Click on a box to set the transform‑origin point and see how rotations and scales change. Copy the CSS.
Create a looping animated gradient background with multiple color stops. Copy the complete CSS keyframes. Eye‑catching.
Apply a realistic oil painting texture to your photo. Adjust brush size and roughness. Brush stroke simulation.
Preview different touch feedback patterns (scale, color, ripple) for mobile buttons. Copy the CSS and HTML. Improve mobile UX.
Enter a CSS selector and see its specificity broken down into A,B,C columns with a visual weight comparison. Learn specificity.
Create beautiful, syntax-highlighted screenshots of your code snippets. Choose themes and export as PNG. All client-side canvas rendering.
Generate dynamic placeholder images by specifying width, height, colors, and text. View instantly as a URL you can embed in mockups. Canvas-based.
Recreate the target CSS linear gradient by adjusting stops and colors. A unique game for front‑end developers to master gradients.
Search for common ingredient substitutions (e.g., buttermilk, egg, cornstarch). Quick reference for when you're missing something. Local data.
Automatically remove the background from any photo using a small on‑device AI model (WASM). No upload. Works offline.
Limit browser gestures on an element: pan‑x, pinch‑zoom, manipulation. Draw on a canvas to test. Mobile dev helper.
Generate a subtle noise/grain texture as a CSS background pattern. Adjust opacity and size. For that film look.
Try all object‑fit values (fill, contain, cover, scale‑down) on an image. Adjust object‑position. Copy the CSS.
Convert a small image into a Base64 data URI and get a Markdown image tag. Perfect for README files and note‑taking apps. Local.
Move your mouse to create colorful ink swirls in a simulated fluid. Beautiful and mesmerizing. No install. Just WebGL.
Generate a subtle or heavy noise/grain texture as a CSS background. Adjust intensity and color. Copy the small code.
Generate truly random numbers within a specified range. Useful for contests, game decisions, and sampling. Runs locally, no hidden algorithms.
Enter two URLs and see if they resolve to the same canonical form after normalization. Find duplicate content issues.