prefers‑color‑scheme Live Preview - Online Dark/Light
Toggle between light and dark mode for a demo page. See how to use the media query. Copy the pattern.
UD5 Toolkit
A colorblind-safe palette uses color combinations that remain distinguishable to people with common forms of color vision deficiency (CVD), such as protanopia (red-blind), deuteranopia (green-blind), and tritanopia (blue-blind). These palettes avoid relying solely on red-green distinctions and instead leverage differences in lightness and blue-yellow contrasts. Tools like this simulator help designers verify accessibility before publishing data visualizations.
Approximately 8% of males and 0.5% of females have some form of color vision deficiency—that's over 300 million people worldwide. If your charts, maps, or dashboards rely exclusively on color to convey information, a significant portion of your audience may misinterpret the data. Using colorblind-safe palettes ensures your visualizations are inclusive, accurate, and meet WCAG accessibility guidelines.
Qualitative palettes are for categorical data where no inherent ordering exists (e.g., countries, product types). Colors should be maximally distinct. Sequential palettes show ordered data from low to high (e.g., temperature, population density) using lightness gradients of a single hue or closely related hues. Diverging palettes highlight deviation from a midpoint (e.g., profit/loss, above/below average) using two contrasting hues that diverge from a neutral center. Each type serves a different analytical purpose.
The simulator uses the Viénot–Brettel–Mollon physiological model based on LMS cone response spaces. Each sRGB color is converted to linear RGB, transformed into LMS (long, medium, short wavelength) cone excitation values using the Hunt–Pointer–Estevez matrix, then projected onto reduced-dimension planes that simulate missing cone types. The result is transformed back to sRGB, producing an accurate approximation of how each color appears to individuals with specific CVD types. This method is widely cited in vision science literature.
WCAG 2.1 Level AA requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text (≥18pt or 14pt bold). Level AAA requires 7:1 and 4.5:1 respectively. Our tool calculates the relative luminance per the sRGB standard (BT.709 coefficients) and displays the contrast ratio against a white background (#FFFFFF). A ratio below 3.0 is flagged as potentially hard to read for many users.
Absolutely. You can export your palette as HEX codes, CSS custom properties, or JSON—all formats easily imported into Excel (custom color picker), Tableau (Preferences.tps file or direct HEX entry), Python's matplotlib/seaborn (pass the hex list to the palette parameter), R's ggplot2, Figma, and most design tools. The JSON export follows a simple {"name":"...", "colors":["#..."]} structure.
For qualitative categorical data, research by Wong (2011) and Tol (2021) suggests limiting palettes to 6–8 distinct colors for reliable colorblind-safe discrimination. Beyond 8 colors, even people with normal vision struggle to distinguish categories. If you need more categories, consider combining color with other visual encodings like patterns, labels, or faceting. For sequential and diverging palettes, 5–9 steps provide sufficient perceptual resolution.
Toggle between light and dark mode for a demo page. See how to use the media query. Copy the pattern.
Start from a base color and use `oklch(from color l c h)` to create lighter or darker variants. Copy the code.
Simulate forced‑colors mode and see how your site looks. Adjust CSS system colors. Make your design accessible.
Create a rainbow gradient text animation using pure CSS. Customize speed and colors. Copy the code for your website.
Enter text and see each character's 8‑bit binary laid out in a black‑and‑white grid. Beautiful data art. Local.
Define a set of colors for light and dark themes. Get the CSS custom properties snippet. Toggle live.
Highlight elements with aria‑describedby and see the linked description text. Verify a11y annotations.
Drag and drop light sources, camera, and subject to plan a photo shoot. Export diagram as image. Simple and visual.
Build a vertical timeline by entering events with dates and descriptions. Export as image or HTML. Perfect for project milestones.
View a series of digital Ishihara‑style plates. Not a diagnostic tool, just educational. Read numbers.
Paste a website's HTML and see which text is only visible to screen readers (e.g., .sr‑only). Preview the accessible layer.
Beautify and format your CSS stylesheets instantly. Organize, minify, or prettify CSS code for better readability. Processed securely on client-side.
Stack multiple background images and blend them with colors. Create unique textures. Copy the CSS code instantly.
Visually create the glassmorphism effect: background blur, transparency, and border. Copy the complete CSS. Modern UI design.
Create seamless CSS background patterns like stripes, polka dots, checkerboard. Adjust size and colors. Copy the tiny CSS.
Format your SQL code with consistent indentation. Choose 2 or 4 spaces. No syntax validation, just neat output.
Design a realistic neon sign text with multiple layers of glow. Copy the CSS and HTML. Perfect for headers.
Visually name grid areas in a table and generate grid‑template‑areas CSS. Perfect for complex layouts. Drag‑free.
Drag colored beads onto a virtual thread to design a repeating pattern. See total length. Save locally.
Watch classic sorting algorithms step through a randomized bar chart. Adjust speed and array size. Great for learning algorithm efficiency.
Click to get a random, unique superpower with a description. Perfect for character creation or daydreaming.
Encode a hidden message using zero‑width characters. The message looks like normal text. Decode with the same tool.
Upload a main image and a folder of tile images, and the tool creates a photomosaic. Rendered in canvas. All local.
Create a repeating text pattern from a short string for watermarking documents or images. Download SVG pattern.
Paste rich text and clean it to plain text. Normalize line endings and whitespace. Prepare for code or databases.
Select emojis and arrange them into a seamless tiling background. Copy the CSS data‑URI or download as image.
Create glowing, neon‑style text effects with multiple text‑shadows. Adjust colors and intensity. Copy the CSS.
Build a date format string for SQL by toggling components (YYYY, MM, DD). See a live example for different databases.
Apply dyslexia‑friendly fonts, spacing, and background to any text. Preview and copy the formatted version. Improve readability.
Create a frosted glass card with background blur, border glow, and shadow. Adjust intensity. Copy the CSS.