Design & CSS
Convert colors, check WCAG contrast, and translate CSS and mobile units, all privately in your browser.
Color
CSS & Mobile Units
About Design & CSS
Colour and units, the two things that follow a design from a mockup into code. Colour conversion moves between HEX, RGB, HSL, HSV, OKLCH and CMYK; the contrast checker scores a pair against the WCAG thresholds and says which level it reaches.
Contrast is the one with a right answer. Normal body text needs 4.5:1 to pass AA and large text needs 3:1, so a pairing that looks fine on your monitor can still fail for someone else. The checker gives the ratio and the grade rather than a verdict, so you can see how far off you are.
The unit converters handle px to rem and px to dp, which are the same arithmetic against different base sizes: rem depends on the root font size a user may have changed, dp on the screen's density. Both are here because the conversion is trivial and getting the base wrong is not.
Guides
How the design & css calculations work, and where they go wrong.