Workflow · Image & design
Design token pass
Prepare hex, OKLCH, radius, spacing and shadows as tokens.
01Convert color
02Note OKLCH
03Scale radius
04Set spacing
Flow
Why this tool chain belongs together.
Prepare hex, OKLCH, radius, spacing and shadows as tokens. The flow is meant for repeatable small work: clean the input first, check the result, then copy it or pass it into the next step.
Starting point
Start with the clearest raw material: text, link, number, list or data snippet. The cleaner the first input, the less rework follows.
Tools
Hex to RGB, OKLCH color note, Radius scale, Fluid spacing scale form the core path. They stay local in the browser and do not change files on your device.
Finish
Check the result before publishing, importing or sharing. Toolwise provides orientation and workflow convenience, not professional approval.
Convert color
Convert hex colors into RGB and HSL.
Hex to RGB öffnenNote OKLCH
Derive a practical OKLCH approximation and CSS line from hex.
OKLCH color note öffnenScale radius
Generate consistent border-radius steps.
Radius scale öffnenSet spacing
Generate multiple clamp spacing values from min and max.
Fluid spacing scale öffnenConvert hex colors into RGB and HSL.
WorkflowDerive a practical OKLCH approximation and CSS line from hex.
WorkflowGenerate consistent border-radius steps.
WorkflowGenerate multiple clamp spacing values from min and max.
WorkflowGenerate a simple shadow CSS line.
Workflow