UD5 Toolkit
Text Contrast Validator - Online WCAG AAA Checker
Enter a text color and background color and instantly see if the combination passes WCAG AA and AAA ratio. Safe colors.
Color Tools - Palette & Picker
99+ toolsAccessible 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.
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.
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.
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.
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 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.
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.
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 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.
Color to Emotion Reference - Online Psychology Quick Guide
Click any color to see common emotional associations and cultural meanings. Quick design reference.
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.
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.
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.
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() 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.
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.
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.
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.
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.
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.
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.
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‑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.
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.
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.
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.
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.
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.
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.
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.
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 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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
Dominant Color Detector - Online Find Main Hue
Upload an image and instantly see its most dominant color as a hex swatch. Uses color quantization. Local.
Color Scheme from Image - Online Extract Palette
Upload any picture and instantly get a 5‑color palette. Useful for UI design themes. Canvas‑based extraction.
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.
Hex Color Darken/Lighten - Online Shade & Tint Calculator
Input a hex color and adjust its lightness by a percentage. Get tristimulus shades for CSS. Quick and visual.
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.
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.
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.
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.
APCA Contrast Checker - Online New Accessible Perceptual Contrast
Check the Accessible Perceptual Contrast Algorithm (APCA) ratio. The next‑generation contrast method for WCAG 3.
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.
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.