UD5 Toolkit
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.
Visual CSS Specificity Calculator - Online (0,0,1) Style
Visual CSS Specificity Calculator
Instantly calculate and compare CSS selector specificity. See exact (0,0,1,0) scores and understand which rule wins.
Selector Specificity
Quick fill:
Compare Selectors
Frequently Asked Questions
Specificity is the browser’s algorithm to decide which CSS rule applies when multiple rules target the same element. It is usually expressed as a four-part number (a,b,c,d): inline styles (a), IDs (b), classes/attributes/pseudo-classes (c), and element types/pseudo-elements (d). Higher numbers mean higher priority.
The value (0,1,2,3) means 0 inline, 1 ID, 2 classes/attributes/pseudo-classes, and 3 type/pseudo-element selectors. Compare from left to right: the first larger number wins. This tool shows both the breakdown and the total textual representation.
Yes, pseudo-elements (like ::before, ::after, :first-line) count as type selectors (position d). Pseudo‑classes (like :hover, :nth-child()) count as class‑level selectors (position c).
:not() and :is() contribute the specificity of their most specific argument. This tool gives them a single class‑level weight for simplicity — good enough for most everyday selectors. :where() adds zero specificity.!important overrides normal specificity. Inline styles have the highest specificity (a=1,0,0,0) unless !important is used. This calculator focuses on selector-based specificity only.A comma-separated group (e.g.,
.class, #id) contains independent selectors. Each has its own specificity — they aren’t combined. Enter one selector chain at a time to get a meaningful result.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.
Custom Range Slider CSS Generator - Online Styled Input
Style an `<input type='range'>` with custom track and thumb. Cross‑browser CSS. Preview and copy the code.
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() 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.
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.
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 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.
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.
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.
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.
<progress> & <meter> CSS Styler - Online Generator
Style the <progress> and <meter> elements with cross‑browser CSS. Adjust colors and sizes. Copy the final styles.
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.
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 Custom Properties Collector - Online List All :root Vars
Paste your CSS and get a sorted list of all custom properties defined under :root with their values. Quick audit.
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 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.
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.
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.
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.
Custom Radio & Checkbox CSS Generator - Online
Design custom radio buttons and checkboxes using pure CSS. Choose sizes, colors, and animation. Copy the code.
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.
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.
CSS Grid Implicit Tracks Tester - Online Auto‑Rows & Columns
Add grid items beyond defined tracks and see how implicit rows/columns expand. Set sizes interactively. Master the grid.
Accessible Color Contrast Matrix – Online Paste Palette & Check
Paste hex colors, generate a contrast matrix against each other. Identify failing pairs for WCAG.
Sewing Needle Selector – Online Fabric Weight & Type Chart
Choose fabric type and weight to see the ideal needle size and point style. Prevent skipped stitches and snags.
Grid vs Flexbox Layout Tester - Online Choose the Right Tool
Build the same layout with both Grid and Flexbox side by side. See the code differences and visual results.
CSS Container Query Tester - Online @container Playground
Experiment with CSS container queries. Resize a container and see the styles change according to its size, not the viewport. Learn the new spec.
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.