UD5 Toolkit
CSS Variable Theme Switcher - Online Dark/Light Generator
Design a light and dark theme by picking colors for backgrounds, text, and links. Get the CSS for both themes. Local.
light‑dark() Function Tester - Online Color Switch
light-dark() Function Tester
Test and preview the CSS light-dark() color function.
Define colors for light & dark modes, preview them side-by-side, and copy ready-to-use CSS code.
Chrome 123+
Firefox 120+
Safari 17.5+
Edge 123+
IE ❌
Light
Dark
Apply as:
Light Mode
Preview
Sample Card
This text adapts to your chosen color.
Action Button
Bordered element
Dark Mode
Preview
Sample Card
This text adapts to your chosen color.
Action Button
Bordered element
Preset Color Schemes
Generated CSS
background-color: light-dark(#ffffff, #1a1a1a);
Tip: Use light-dark() inside elements that have color-scheme: light dark set on them (or an ancestor).
Frequently Asked Questions
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.
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.
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.
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.
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.
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.
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.
accent‑color Tester - Online Form Control Styling
Set a custom accent color for checkboxes, radios, range, and progress. See the browser’s rendering. Copy the CSS.
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.
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.
Accessible Color Contrast Matrix – Online Paste Palette & Check
Paste hex colors, generate a contrast matrix against each other. Identify failing pairs for WCAG.
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.
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.
Color Name to Hex - Online Official CSS Colors
Type a CSS color name like 'tomato' or 'mediumseagreen' and instantly get its hex code and preview. Complete named colors list.
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.
Visual CSS Specificity Calculator - Online (0,0,1) Style
Enter a CSS selector and see its specificity broken down into A,B,C columns with a visual weight comparison. Learn specificity.
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.
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.
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.
CSS Color Converter All-in-One: Hex, RGB, HSL, OKLCH
Enter color in any CSS format and see all other representations. Live preview. Swatch history.
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.
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.
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.
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.
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.
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.
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.
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.