UD5 Toolkit
Screenshot Color Picker - Online Upload & Pick Hex
Upload a screenshot or image and use the magnifying glass to pick exact colors. Get hex, RGB, and HSL. Simple.
Color Tools - Palette & Picker
99+ toolsCSS 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.
CMYK to Pantone Converter - Online Approximate Match
Enter CMYK values and find the closest Pantone Solid Coated color. For print design reference. Client‑side lookup.
Relative Color Syntax Visualizer - Online Adjust Lightness/Chroma
Start from a base color and use `oklch(from color l c h)` to create lighter or darker variants. Copy the code.
CSS color‑mix() Transparency Demo - Online Alpha Blend
Mix colors with different alpha channels using color‑mix(). See how transparent colors combine. Copy the CSS.
color() Display‑P3 Generator - Online Wide Gamut CSS
Pick a color in the Display‑P3 space and get the CSS color() function. See the difference from sRGB. For modern design.
Hex Color Guessing Game - Online Guess the Hex Code
See a color swatch and guess its hex code. Get scored on accuracy. Improve your color intuition. Fun for designers.
WCAG Safe Palette Builder - Online Accessible Color Sets
Start with a base color and generate an extended palette where every shade contrasts properly with white and black. Export tokens.
Color to Emotion Visualizer - Online Interactive Wheel
Click colors on an interactive wheel and see the common emotions and meanings associated with them. A design resource.
Text to Color Palette - Online Emotion to Hex
Type a word like 'sunset' or 'calm' and generate a color palette inspired by that mood. Simple associative mapping.
Swatch Match Finder - Online Find Images Matching a Palette
Pick a color palette and the tool shows sample images that match it. Great for moodboard and brand inspiration. Static dataset.
Random Accessible Palette Generator - Online WCAG Safe
Generate a random 5‑color palette where every adjacent pair passes WCAG AA contrast. Safe for inclusive designs.
Material Design 3 Color Generator - Online Dynamic Tonal Palettes
Pick a source color and generate a complete M3 tonal palette with light/dark schemes. Export as CSS custom properties.
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.
Live Site Contrast Checker - Online Audit By URL
Enter a URL and fetch its text/background colors to perform a bulk contrast check. See warnings for WCAG violations.
CSS HWB Color Generator - Online Whiteness/Blackness Picker
Interactively create colors in HWB space and get the CSS hwb() function. Simplifies tint/shade workflows. Live preview.
RGBA to CIELAB Converter - Online Full Color Translation
Convert RGBA colors to CIELAB and other advanced color spaces. For fine‑tuning design tokens. Client‑side math.
Color Distance ΔE Calculator - Online Perceptual Difference
Enter two hex colors and compute the CIE76, CIE94, and CIEDE2000 color difference. Understand how humans perceive color similarity.
Extract Perceptual Palette - Online LAB Quantization
Extract a color palette from an image using CIELAB k‑means quantization. Results are perceptually more accurate than RGB methods.
CIELAB Gradient Generator - Online Perceptually Uniform CSS
Create color gradients that are perceptually uniform by interpolating in CIELAB space. Get the CSS linear‑gradient code. Visually superior.
Gradient Color Blindness Simulator - Online Test Palettes
Upload a gradient or enter a palette and simulate how it appears with different types of color vision deficiency. Ensure inclusive data visualization.
Color to Tailwind Class Converter - Online Map Hex to closest
Enter any hex color and find the nearest Tailwind CSS color class. Also shows the Tailwind palette shade.
Real‑Sample Contrast Checker - Online See Paragraph
See how a full paragraph looks with your chosen text and background colors. Not just a ratio; the real appearance.
Accessible Color Pair Grid - Online WCAG Matrix for Vision Deficiencies
Enter foreground and background colors and see a matrix of how each pair works for normal, protanopia, deuteranopia, and tritanopia.
HWB Color Picker - Online Whiteness & Blackness Model
Pick colors using the HWB (Hue‑Whiteness‑Blackness) model. Get the CSS hwb() function code. Simpler than HSL for some.
OKLCH Color Explorer - Online Perceptually Uniform Space
Browse the OKLCH color space with sliders for lightness, chroma, and hue. See the CSS oklch() code. Modern and accessible.
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.
Hex Color to Name Finder - Online Identify Closest Hue
Paste a hex code and get the closest official CSS color name and a list of similar Pantone-like shades. Design reference.
APCA Contrast Checker - Online New Accessible Perceptual Contrast
Check the Accessible Perceptual Contrast Algorithm (APCA) ratio. The next‑generation contrast method for WCAG 3.
Relative Luminance Calculator - Online WCAG Metrics
Enter a hex color and get its relative luminance per WCAG definition. Understand why this matters for contrast.
CSS Color Function Explorer - Online Write Modern Colors
Write modern CSS color functions like oklch(), lab(), hwb() and see the rendered color with fallback. Copy compatible code.
Color to Emotion Reference - Online Psychology Quick Guide
Click any color to see common emotional associations and cultural meanings. Quick design reference.
CSS Relative Color Playground - Online Manipulate Colors
Write CSS like `oklch(from red l c h)` to modify colors dynamically. Preview the output and copy the code.
3D Color Space Viewer - Online Explore RGB Cube
Rotate and explore the RGB color space as a 3D cube. Pick colors directly from the volume. Interactive Three.js.
CIELAB to RGB Converter - Online Bring Color Back
Enter L*a*b* values and see the corresponding RGB and hex color. Useful for advanced color manipulation.
RGB to CIELAB Converter - Online Perceptual Color Space
Convert RGB and hex colors to CIELAB L*a*b* values. Understand perceptual lightness and chromaticity. All local math.
HDR Color Preview - Online See Wide Gamut Colors
Test if your display supports HDR colors by rendering a gradient in Rec.2020 space. See what you're missing. Canvas based.
Color Contrast Ratio Tester - Online WCAG AA/AAA Check
Enter foreground and background colors to instantly see the contrast ratio and pass/fail for AA and AAA. Simple and fast.
Image Color Palette Extractor - Online Upload & Get Hex
Upload an image and instantly get a 6‑color palette with the most dominant shades. Click to copy hex codes. Canvas‑based.
CSS color‑mix() Visualizer - Online Blend in sRGB & OKLCH
Pick two colors and mix them in different color spaces with sliders. See the difference between sRGB and OKLCH mixing. Copy the code.
CSS Relative Color Syntax Playground - Online from a Base Color
Write CSS like `oklch(from red l c h)` to modify colors. Preview the output and copy. Modern color manipulation.
Enhanced Color Blindness Simulator - Image & UI Combined
Upload an image and also see a UI mockup under different deficiencies side‑by‑side. Powerful for inclusive design.
Colorblind‑Safe Palette Creator - Online for Data Viz
Generate a palette of N colors that are maximally distinguishable for common color vision deficiencies. Copy the hex codes.
Webcam Color Detector - Online Live Hue Picker
Point your camera at an object and see the dominant color in real time. Click to copy the hex. Fun tool for designers.
Accessible Color Scale Builder - Online Generate Tints/Shades with Contrast
Pick a base color and generate a 10‑step scale where each step meets a specific contrast ratio against white or black. Export as CSS custom properties.
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.
Named CSS Colors Explorer - Online Preview All 148
Grid of all 148 named CSS colors. Hover to see detail, click to copy the name or hex. Essential frontend reference.
Color Swatch Image Generator - Online PNG Palette
Enter hex codes and download a PNG swatch image with color names. Useful for design spec documents. Built via canvas.
HSV Color Picker - Online Traditional Hue Wheel
Classic HSV color wheel with sliders. See hex, RGB, and HSL equivalents. Intuitive for artists. No server interaction.
OKLCH Color Picker & Converter - Online Perceptive Color
Select colors in the OKLCH space with lightness, chroma, and hue. Convert to hex, RGB, and CSS oklch(). Perceptually uniform gradients.
Color Readability Tester - Online Visual Contrast Meter
Paste body text and test different font/background combos. See an actual passage rendered, not just a ratio. True feel for legibility.
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.
light‑dark() Function Tester - Online Color Switch
Use the light‑dark() CSS function to change colors based on color scheme. Build a simple dark mode toggle with one property.
contrast‑color() Preview - Online Automatic Text Color
Test the upcoming contrast‑color() CSS function. Get white or black automatically for a given background. See it live.
EyeDropper API - Online Pick Any Screen Color
Use the EyeDropper API to sample a color from anywhere on your screen. Click, select, and copy the hex. No extensions needed.
Gradient Mesh Playground - Online Free‑Form Color
Place colored points on a canvas and see a smooth gradient mesh interpolate between them. Experimental and beautiful. Download PNG.
Bulk Color Contrast Checker - Online WCAG Validation
Paste a list of foreground/background color pairs and instantly see which pass AA/AAA. Perfect for checking entire style guides.
CSS color‑mix() Function Playground - Online Tester
Dynamically blend two colors using the CSS color‑mix() function in different color spaces. Copy the exact CSS snippet. No JS required.
Color to OKLCH Converter - Online Perceptually Uniform
Convert hex, RGB, or HSL into the modern OKLCH color space. See the preview and copy CSS oklch() value. Local.
Random Color Naming Challenge - Online Eye Test
See a random color and type its name. Score based on accuracy. Fun for designers. Local.