UD5 Toolkit
Colorblind-Safe Palette Builder - Online Check & Generate Schemes
Build a palette and simulate how it appears to various color deficiencies. Also generate pre-vetted accessible palettes. Local processing.
Colorblind Friendly Palette Checker - Online Simulate & Advise
🎨 Colorblind Friendly Palette Checker
Simulate how your color palette appears to people with different types of color vision deficiency (CVD). Get instant feedback and improve accessibility.
Accessibility Advice
Loading...
Simulated Colors Comparison
Add at least two colors to see comparisons.
Why Colorblind‑Friendly Design Matters
Color vision deficiency (CVD) affects approximately 1 in 12 men and 1 in 200 women. It changes how people perceive colors, making it difficult to distinguish certain hues. The most common types are red‑green (protan/deuteran) and blue‑yellow (tritan) deficiencies.
- Use high contrast in lightness, not just hue.
- Avoid red‑green combinations; prefer blue‑orange or blue‑yellow.
- Test your palette with simulators like this tool.
- Add patterns or labels for important information.
- Use WCAG contrast ratios as a baseline.
Some universally safe palettes rely on lightness differences. Examples: Blue + Yellow, Black + White, or Blue + Orange. Always double‑check with a CVD simulator.
It uses scientifically validated matrices (Brettel, Viénot, Mollon) to approximate dichromatic vision. While not perfect (individual variation exists), it is a reliable guide for accessibility testing. For total color blindness (achromatopsia) we simulate full grayscale.
Color Palette Generator - Online Random & Harmonious Colors
Discover beautiful color palettes for your projects. Generate random, complementary, or trendy schemes and copy hex codes. Useful for designers and developers.
Color Swatch Collector – Online Build Your Own Palette
Mix and save colors using a color picker. Drag to reorder. Export as CSS variables or hex list.
Accessible Color Contrast Matrix – Online Paste Palette & Check
Paste hex colors, generate a contrast matrix against each other. Identify failing pairs for WCAG.
Curated Random Color Palette - Online Designer‑Approved Sets
Get a beautiful, hand‑picked color combination instead of purely random. Each palette has a name and copyable hex codes.
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.
Advanced Color Contrast Matrix – Test All Pairs in Palette
Paste a list of hex colors and see a grid showing the contrast ratio for every combination. Instantly identifies which pairs pass WCAG AA/AAA.
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.
Stepped Color Shade Generator - Online Tailwind‑Style Palette
Pick a base color and generate a full palette of 10 shades (50 to 900) like Tailwind CSS. Copy as hex or hsl.
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.
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.
Color Scale Generator - Online Create Monochromatic Stops
Generate a range of tints and shades from a single hex color. Ideal for data visualization, UI design systems, and Tailwind custom palette creation. Local tool.
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.
Color Swatch to CSS - Online Palette to Variables
Paste a list of hex colors and generate CSS custom properties for them. Create your design token file instantly.
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.
Online Color Picker - Eye Dropper & Color Selection Tool
Pick colors from a palette or use the eye dropper to sample colors from your screen. Converts between HEX, RGB, HSL. An essential tool 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 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.
Emotion to Color Palette – Online Pick Mood & Get Hex
Select emotions (calm, energetic, sad) and generate a harmonious color palette that reflects the mood.
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.
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.
Website Color Theme Extractor - Online Grab Palette from CSS
Fetch a website's CSS and extract :root custom properties (‑‑color) to reveal its design token palette. For learning and inspiration.
Hex Contrast Grid – Online Test All Pair Combinations
List up to 10 colors and generate a contrast ratio matrix. See which pairs pass WCAG quickly.
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.
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.
Cocktail Recipe by Color - Online Pick Your Hue
Select a color and see which cocktails match it roughly. Blue for Blue Lagoon, red for Negroni. Fun bar guide.
HTML Color Names - Online Complete List with Hex & Preview
A complete, searchable list of all 140+ named HTML/CSS colors with their hex codes and color previews. Click to copy code. Essential web reference.
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.
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.
Screen Color Picker - Online Eyedropper with Magnifier
Use the browser's native eyedropper tool to pick any color from the screen. Shows zoomed preview. Quick and easy.