Documentation-based practice example; check the controls in your installed Oxygen version.
Start with the problem in front of you
Pick a tool when it answers a concrete design question. The four helpers on this site calculate useful values; the related guides explain how to apply and test them in a real layout. Each example below uses the actual working tool rather than an invented product workflow.
Problem: a heading is too small on desktop
Use the CSS Clamp Generator when you want smooth scaling between two widths. Enter 32–64px across 320–1440px with a 16px root.
clamp(2rem, 1.428571rem + 2.857143vw, 4rem)Apply it to a heading class, then inspect a long title and browser zoom. The calculation chooses a size; your content determines whether that size is readable.
Problem: a design value is in pixels but your system uses rem
Use the PX / REM Converter. At a 16px root, 48px equals 3rem. At a 20px root, the same 48px equals 2.4rem. Enter the root size used by your project instead of assuming it is always 16.
Use the result for an intentional spacing or type value. Rem is relative to the root; changing the root affects what it means in pixels.
Problem: every card has slightly different spacing
Use the Spacing Scale Generator. An 8px start, ratio 2 and three steps at a 16px root generates 0.5rem, 1rem and 2rem. Give those values names and reuse them for clear layout roles.
A geometric scale is only a proposal. Refine it when actual paragraphs and headings need a different rhythm, and use shared classes rather than unrelated local adjustments.
Problem: you are unsure whether text colors have enough contrast
Use the Color Contrast Checker for two solid, opaque colors. Black on white returns 21:1; equal colors return 1:1. The checker reports AA/AAA text thresholds using the unrounded ratio.
It does not evaluate text over gradients or images, transparency, keyboard access or your whole page’s accessibility. Use it to answer the color-ratio question, then test the rest of the interface separately.
A useful workflow: calculate, apply, inspect
- Identify one visible problem in the actual design.
- Choose the relevant tool and enter project-specific values.
- Copy the result into the intended class or stylesheet.
- Preview a normal example, a long-content example and a narrow screen.
- Adjust the design when the calculated result does not serve the content.
The tools were checked for normal inputs and invalid-value states. Their outputs are design aids, not evidence that every layout using them is automatically correct.
Troubleshooting: choosing and applying a result
- The question is about two colors: use the contrast checker, not the spacing or typography tools.
- The result is rejected: inspect the tool’s input message and correct the root size, hex format or viewport order.
- The CSS has no visible effect: check the target class, computed styles and competing rules in the actual page.
- The calculated value looks wrong: revisit the design inputs. Mathematical validity and readable content are separate checks.