Codxing

Design Hub

Colour, contrast and CSS generators that output code you can paste.

Contrast CheckerWCAG AA and AAA pass/fail for any text and background pair.Palette GeneratorComplementary, analogous, triadic and more from one colour.Colour ConverterHEX, RGB and HSL side by side, plus a tint and shade ramp.Gradient GeneratorLinear, radial and conic gradients with live CSS.Box ShadowStack multiple shadow layers and copy the CSS.Border RadiusRound corners together or one at a time, with a preview.CSS Clamp CalculatorFluid type that scales between two viewport widths.Spacing ScaleBuild a linear or modular scale and export it as variables.

About the Design Hub

The Design Hub outputs code, not just pictures. Every tool shows the CSS or the hex values ready to copy: a contrast ratio with its WCAG pass and fail levels, a colour scheme as custom properties, a gradient as a one-line background, a stacked box-shadow, a fluid clamp() expression for responsive type, and a spacing scale as design tokens. The contrast checker is the one worth using on every project — low contrast is the most common accessibility failure on the web, and it is trivial to avoid once you can see the number.

Questions

What contrast ratio does WCAG require?

4.5:1 for normal body text and 3:1 for large text (18pt, or 14pt bold) and UI components at level AA. Level AAA raises those to 7:1 and 4.5:1.

Why use clamp() instead of media queries for font size?

clamp() scales type smoothly with the viewport rather than jumping at breakpoints, so there is no width where the heading looks wrong. The calculator works out the vw and rem values so you do not have to.

Do these tools work with Tailwind?

Yes. The palette and spacing tools output CSS custom properties, which drop straight into a Tailwind v4 @theme block.