Color format converter
Convert HEX, RGB and HSL colors with alpha transparency, preview the swatch and copy ready-to-use CSS color values.
Fluid font-size clamp() generator
Create responsive font-size CSS from size and viewport limits, with px/rem output and a live size preview.
rem is calculated using the specified root size. Check browser zoom and larger text settings in your final design.
Good typography makes every word easier to read.
CSS
About this tool
Set the smallest and largest heading sizes, then inspect how the size changes between mobile and desktop widths.
How to use
Enter minimum and maximum font sizes and their corresponding viewport widths, then choose px or rem. Move the simulated viewport slider to inspect the calculated size and copy or download font-size: clamp(...). Widths must increase, and the minimum font size cannot exceed the maximum.
The font scales linearly between the chosen widths and stays within its size limits outside that range. For rem output, set the root font size to match your page. The formula follows viewport width, not container width, and does not adjust the rest of your typography.
Common questions
Why must I specify the root size for rem?
The preview uses that size to convert rem to pixels. Match it to your page. The generated formula responds to viewport width; a different root size changes its behavior.
What settings produce 16px on mobile and 32px on desktop?
For 16px at a 400px viewport and 32px at 1200px, choose px and enter those two size and width pairs. The result is clamp(16px, 8px + 2vw, 32px): it gives 24px at 800px and holds the limits outside the chosen range. It follows viewport width, not container width.
Related tools
Opens in a new tab
Comments
0