UD5 Toolkit
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.
Color Tools - Palette & Picker
99+ toolsScreenshot 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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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 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.
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.
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.
Color to Emotion Reference - Online Psychology Quick Guide
Click any color to see common emotional associations and cultural meanings. Quick design reference.
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.
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.
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.
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.
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.
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.
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.
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.
APCA Contrast Checker - Online New Accessible Perceptual Contrast
Check the Accessible Perceptual Contrast Algorithm (APCA) ratio. The next‑generation contrast method for WCAG 3.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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 Harmony Picker - Online Complementary Split‑Comp
Choose a base color and see its complementary, split‑complementary, triadic, and tetradic harmonies. Copy palettes. Local.
HSL to RGB Converter - Online Precise Translation
Enter HSL values and get the exact RGB representation. Also shows hex. For fine‑tuning design tokens. Client‑side.
RGB to HSL Converter - Online Color Space Translator
Input RGB values and see the HSL equivalent with a color preview. Understand lightness and saturation. 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.
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.
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.
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.
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.
Pixel Art Color Picker - Online Palette for Spriters
A dedicated color picker with common retro gaming palettes (NES, Gameboy). Pick and copy hex codes. For pixel art creators.
Color Name to Hex - Online Official CSS Colors
Type a CSS color name like 'tomato' or 'mediumseagreen' and instantly get its hex code and preview. Complete named colors list.
Gradient Swatch Exporter - Online CSS to PNG Palette
Paste a CSS gradient and export a vertical swatch image. Ideal for design documents. No server needed.
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.