Color picker
A colour can be written several ways that all mean the same thing. Hex and RGB name the amounts of red, green and blue. HSL restates that as hue, saturation and lightness. OKLCH uses a perceptually uniform space, so equal changes in its lightness look equally different to the eye, which sRGB does not manage.
How to use it
The contrast figures are WCAG 2.2 ratios, running from 1 for two identical colours to 21 for black on white. Normal body text needs 4.5, large text needs 3, and the stricter AAA level asks for 7. The catch is that the formula is a poor model of how contrast actually looks — it is generous to mid-greys and harsh on saturated blues, so treat a marginal pass as a reason to look at it, not as a verdict.
Questions
Building colour scales. Because it is perceptually uniform, holding chroma and hue while stepping lightness gives a set of tints that look evenly spaced. Doing the same in HSL does not.
It appears when your browser supports the EyeDropper API; Chrome and Edge do, Safari and Firefox do not at the time of writing.
4.5 for normal text and 3 for text above about 18.5px bold or 24px regular. Those are the WCAG 2.2 AA thresholds.
It fixes hue and saturation and steps the lightness, which is what a tint ramp is. The middle step is closest to the colour you picked.
The text field takes hex. Use the sliders for HSL, and read any format back out from the list.