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+ toolsSwatch 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() 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.
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.
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.
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.
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.
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.
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.
Color to Emotion Reference - Online Psychology Quick Guide
Click any color to see common emotional associations and cultural meanings. Quick design reference.
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.
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.
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.
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() 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.
HSL to HEX Converter - Online Hue Saturation Lightness to Hex
Convert HSL and HSLA color specifications back to standard HEX codes. Useful when extracting colors from CSS preprocessors. Instant client-side conversion.
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.
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.
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.
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.
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.
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.
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.
Hex to RGBA Converter - Online Add Alpha Channel
Convert a hex color to RGBA and add an opacity slider. Get the exact CSS string for modern transparent designs.
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.
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.
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.
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.
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 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.
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 Contrast Grid - Online Test Combinations
Enter a palette of colors and see a grid showing whether each foreground/background pair passes AA or AAA contrast. Must for designers.
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.
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.
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.
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 Trend Inspector - Online Pick Year & See Palette
See the Pantone Colors of the Year and popular palettes from past years. Get hex codes. Design inspiration.
Random Color Generator - Online Hex & RGB Palette
Generate single random colors or full palettes. Displays hex, RGB, and copy on click. Great for design inspiration.
Color Curves Editor - Online Adjust RGB & Brightness
Manipulate RGB and brightness curves with interactive splines. Apply professional color grading to your images. Fully in-browser.
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.
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.
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.
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.
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.
Tint & Shade Generator - Online Lighter & Darker Colors
Generate tints (add white) and shades (add black) for any base hex color. Copy values for design systems. Instant local generation.
HEX to RGB Converter - Online Color Code Translator
Quickly convert HEX color codes to RGB values and vice versa. See the color preview. Indispensable for web developers and graphic designers.
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.
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.
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.
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.
Color Harmony Picker - Online Complementary Split‑Comp
Choose a base color and see its complementary, split‑complementary, triadic, and tetradic harmonies. Copy palettes. Local.
Hue Rotation Calculator - Online Shift CSS Filter Value
Enter original and target color to compute the exact CSS hue‑rotate(deg) filter needed. For precise icon and image tinting.