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
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.
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.
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.
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.
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.
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.
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.
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.
HSV Color Picker - Online Traditional Hue Wheel
Classic HSV color wheel with sliders. See hex, RGB, and HSL equivalents. Intuitive for artists. No server interaction.
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 Name Finder - Online Hex to Name Dictionary
Find the official name of any hex color from the extended color dictionary. Search by name to get the hex code. Handy for CSS and design language.
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.
RGB to HEX Converter - Online Color Translator
Convert RGB and RGBA color values to their HEX or HEX+alpha representation. Live preview and copy CSS color strings instantly.
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.
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.
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 Input Explorer - Online Native Picker & Events
Use <input type='color'> and see its change events and value in hex. Understand the native color picker. Quick demo.
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.
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.
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.
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.
CMYK Color Preview - Online See Print vs Screen
Preview how a CMYK value will look on screen (approximate). Compare with its RGB equivalent. Pre‑press check.
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.
RGB to CMYK Converter - Online Print Color Translator
Convert screen RGB colors to print-ready CMYK values. Understand color shifts before printing. Ideal for graphic designers preparing artwork for press.
Image Color Temperature - Online Kelvin Filter
Adjust the color temperature of your image: move slider to make it warmer or cooler. Quick white balance fix. Local canvas.
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.
Color Temperature to RGB - Online Kelvin to Hex Converter
Enter a Kelvin value (1000‑40000) and see the approximate white‑balance color. Photography and lighting reference.