CSS color workflow
CSS color-mix: independent percentages, alpha and native support
A mix is not just an average of RGB bytes. Choose an interpolation space deliberately and inspect opacity as well as hue.
Content updated: · Maintainer and corrections
Normalize percentages without losing alpha
Both percentages omitted means 50/50. One omitted percentage becomes the complement to 100. Two explicit percentages are normalized by their sum. A sum below 100 also multiplies the result's alpha by sum/100; a zero sum is invalid. Each entered percentage is limited to 0–100.
The editor accepts explicit hex colors including alpha and a small named-color set. It does not resolve currentColor, variables or arbitrary functions, because those need receiving-document context. The tool's restrictions do not mean CSS itself forbids those colors.
Trust support checks, not invented fallback colors
Each swatch uses native color-mix and CSS.supports in the current browser. Unsupported spaces remain explicitly unavailable rather than displaying an approximate sRGB average. Checkerboards reveal transparency, but display gamut, color management and implementation can change appearance.
A color-mix preview does not compute WCAG contrast or certify readable text. Test the actual foreground and background after compositing and in the receiving component. Copying supported CSS is not a cross-browser appearance guarantee.
Data provenance