Workflow · Image & design
Design token pass
Prepare hex, OKLCH, radius, spacing and shadows as tokens.
01Convert color
02Note OKLCH
03Scale radius
04Set spacing
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