color extraction and picking
Picking a color does not end with grabbing one value, it ends with resolving six formats at once, generating a tone scale from it, and knowing whether the text on top should be white or black, three different technical problems hiding behind a single click.
The six values describe the same color through six different lenses; note that HSB (85% brightness) is not equal to HSL (46% lightness), they are brightness axes computed in distinct ways.
The original color occupies the step whose OKLCH lightness target is closest to its own (0.80 at step 300, a gap of just 0.005); the other steps are recalculated, not interpolated in RGB.
The gap between the two verdicts is wide because this cyan has mid-range luminance: it sits too close to white for white text to work, but far enough from black to yield near-maximum contrast.
Six, all copyable in one click: HEX, RGB, HSL, OKLCH, HSB and CMYK. The first four can be pasted straight into CSS; HSB is the graphics-editor format and CMYK is for print, so both are flagged as not CSS. They all describe the same color, just in different coordinate systems.
Because lightening in RGB or HSL adds value to the channels linearly, which distorts hues unevenly, especially yellow (darkens too fast) and blue (oversaturates too fast). Scales built in OKLCH avoid this because they fix the perceptual lightness target and adjust chroma, without touching the R, G, B channels directly.
OKLCH is a perceptually uniform color space created by Björn Ottosson and adopted by CSS Color 4, with lightness (L), chroma (C) and hue (H) separated in a way that approximates how the human eye perceives color difference. Design token scales use this space because varying only lightness preserves hue consistently across different colors, something RGB and HSL do not guarantee.
Calculate the WCAG contrast ratio of the background color against white and against black, and pick whichever reaches at least 4.5:1; mid-luminance colors, like a medium cyan, often fail against white and pass comfortably against black, so the choice is not intuitive without the calculation.
Yes, mostly at high chroma in the OKLCH space: there are hue and chroma combinations no sRGB monitor can display. When that happens, the alternative to clipping each channel individually is reducing chroma while keeping hue and lightness fixed, which preserves the look of the requested color instead of distorting it.
#14b8a6Everything runs in your browser: the image you open never leaves the device, and the saved palette stays on this machine only.