Colorblind Friendly Palette Checker - Online Simulate & Advise
Enter a color palette and see how it looks for different types of color vision deficiency. Get warnings on conflicting colors.
UD5 Toolkit
Build, simulate & verify colorblind-friendly color schemes for accessible data visualization and UI design.
Bar Chart
Scatter / Line
Heatmap Grid
Enter a color palette and see how it looks for different types of color vision deficiency. Get warnings on conflicting colors.
Discover beautiful color palettes for your projects. Generate random, complementary, or trendy schemes and copy hex codes. Useful for designers and developers.
Start with a base color and generate an extended palette where every shade contrasts properly with white and black. Export tokens.
Mix and save colors using a color picker. Drag to reorder. Export as CSS variables or hex list.
Get a beautiful, hand‑picked color combination instead of purely random. Each palette has a name and copyable hex codes.
Generate single random colors or full palettes. Displays hex, RGB, and copy on click. Great for design inspiration.
Pick a base color and generate a full palette of 10 shades (50 to 900) like Tailwind CSS. Copy as hex or hsl.
Generate a random 5‑color palette where every adjacent pair passes WCAG AA contrast. Safe for inclusive designs.
Pick a source color and generate a complete M3 tonal palette with light/dark schemes. Export as CSS custom properties.
Paste a list of hex colors and generate CSS custom properties for them. Create your design token file instantly.
Paste hex colors, generate a contrast matrix against each other. Identify failing pairs for WCAG.
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.
Use the light‑dark() CSS function to change colors based on color scheme. Build a simple dark mode toggle with one property.
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.
See the Pantone Colors of the Year and popular palettes from past years. Get hex codes. Design inspiration.
Fetch a website's CSS and extract :root custom properties (‑‑color) to reveal its design token palette. For learning and inspiration.
Write modern CSS color functions like oklch(), lab(), hwb() and see the rendered color with fallback. Copy compatible code.
Select emotions (calm, energetic, sad) and generate a harmonious color palette that reflects the mood.
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.
Enter a palette of colors and see a grid showing whether each foreground/background pair passes AA or AAA contrast. Must for designers.
Grid of all 148 named CSS colors. Hover to see detail, click to copy the name or hex. Essential frontend reference.
Select a color and see which cocktails match it roughly. Blue for Blue Lagoon, red for Negroni. Fun bar guide.
Dynamically blend two colors using the CSS color‑mix() function in different color spaces. Copy the exact CSS snippet. No JS required.
Paste a stylesheet and extract every unique color (hex, rgb, hsl) into a palette. Swatches displayed. Copy as JSON.
Test the upcoming contrast‑color() CSS function. Get white or black automatically for a given background. See it live.
Upload an image and instantly get a 6‑color palette with the most dominant shades. Click to copy hex codes. Canvas‑based.
Paste body text and test different font/background combos. See an actual passage rendered, not just a ratio. True feel for legibility.
List up to 10 colors and generate a contrast ratio matrix. See which pairs pass WCAG quickly.
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.
Convert RGB and RGBA color values to their HEX or HEX+alpha representation. Live preview and copy CSS color strings instantly.