UD5 Toolkit
Extract Colors from CSS Gradient - Online Visual
Paste a linear‑gradient CSS value and see all the color stops listed as a palette. Copy individual hex codes. Quick reference.
Gradient Mesh Playground - Online Free‑Form Color
Gradient Mesh
Click: add point | Drag: move | Dbl-click: delete
--
Click canvas to add points
Tips
- Place fewer points for smoother blends
- Higher Blend Spread = tighter color zones
- Use complementary colors for vibrant meshes
- Export as PNG for use in designs
- Toggle mesh lines to see point connections
Image to Gradient Palette - Online Extract CSS Gradient
Upload a photo and extract a smooth CSS gradient that represents its color mood. Copy the linear-gradient code.
System Colors Cheatsheet - Online All CSS System Colors
View all CSS system colors (Canvas, ButtonFace, GrayText) as swatches. Click to copy. For forced‑colors adaptation.
Image to CSS clip‑path - Online Trace Silhouette
Upload a simple shape image and automatically trace its outline to a CSS clip‑path polygon. For creative web design. Local.
Relative Luminance Calculator - Online WCAG Metrics
Enter a hex color and get its relative luminance per WCAG definition. Understand why this matters for contrast.
Scale & Mode Explorer - Online All Keys Fretboard/Piano
Pick a scale (Major, Harmonic Minor, Dorian…) and a root note. Shows the notes and highlights them on piano & guitar fretboard.
Video Multi‑Frame Grabber - Online Extract Still Strips
Take multiple evenly spaced screenshots from a video and combine them into a single filmstrip image. Local canvas.
Unix Permissions Calculator - Online chmod Visual Editor
Check read/write/execute boxes and see the octal and symbolic chmod representation. Learn and compute file permissions.
Quartz Cron to Unix Cron Converter - Online Format Translator
Paste a Quartz cron expression (with seconds field) and translate it to standard Unix cron. For devops migrations.
CSS Color Extractor - Online Find All Hex in Stylesheet
Paste a stylesheet and extract every unique color (hex, rgb, hsl) into a palette. Swatches displayed. Copy as JSON.
Tailwind Color Palette Viewer - Online See All 22 Palettes
Browse every Tailwind default color palette side by side. Click any shade to copy the hex or class. For rapid design.
Canvas Splatter Paint - Online Random Jackson Pollock
Move your mouse or finger to create colorful paint splatters on canvas. Great stress reliever. Download as PNG.
Canvas Sprite Animation - Online Play Sprite Sheet
Load a sprite sheet, define frames, and play an animation on a canvas. Control frame rate and loop. Game dev tool.
HTML to Image Renderer - Online Capture DOM to Canvas
Paste HTML/CSS and render it to a canvas image. Download as PNG. For creating dynamic social share images.
Canvas Pattern Maker - Online Repeat Image Tiles
Upload a small image and see it tiled as a canvas pattern. Export the pattern or copy the JavaScript.
Canvas Gradients Playground - Online Linear & Radial
Create linear and radial gradients on canvas. Adjust stops and colors visually. Copy the JavaScript code.
Pixel Art Drawing Board - Online Retro Sprite Maker
Draw pixel art with a grid, color palette, and eraser. Export as PNG. Perfect for game developers and hobbyists.
Touch Paint Canvas - Online Multi‑Touch Drawing Board
A full‑screen drawing canvas supporting multiple touch points simultaneously. Different colors per finger. Works on mobile.
Canvas Compositing Demo - Online Blend & Clip Visual
Draw shapes and experiment with globalCompositeOperation. See Porter‑Duff operators in action. Great for game devs.
Latin Square Generator - Online Balanced Grid
Create Latin squares for experimental design or tournament scheduling. Visual and copyable. No server required.
Extract Colors from Image URL - Online Palette Generator
Paste a direct link to an image and get its 5 dominant colors with hex codes. No upload, uses canvas with CORS proxy.
Confetti Button - Online Click to Celebrate
A big button that triggers a colourful confetti cannon full‑screen. Use it to celebrate small wins. Pure joy.
Browser Fingerprint Viewer - Online See Your Unique ID
Generate a hash showing how trackers can fingerprint your browser (canvas, WebGL, fonts). Educational and privacy‑aware.
Famous Brand Colors - Online Quick Reference Palette
Search a library of famous company brand colors with hex codes. Copy any color instantly. For designers and marketers.
Live Drawing Board - Online Freehand Sketch & Save
A beautiful full‑screen drawing canvas with variable brush sizes, colors, and an eraser. Export your sketch as PNG. All data stays local.
Flame Test Colors - Online Element Identification Chart
Click a metal ion to see the characteristic flame color and wavelength. Useful for analytical chemistry reference.
Brick Breaker - Online Classic Breakout Arcade
Smash bricks with a ball and paddle. Multiple rows of colored bricks, power‑ups, and score tracking. All built with HTML5 Canvas.
Conway's Game of Life - Online Cellular Automaton Simulator
Run Conway's Game of Life on a canvas grid. Draw patterns, start/stop the evolution, and adjust speed. A mesmerizing zero‑player simulation.
Image Cropper - Online Crop Photo Circle & Rectangle
Crop images into rectangular or circular shapes with interactive handles. Output as PNG or JPEG. A simple, browser-based tool with no uploads required.