A colour system built in OKLCH, mapped into gamut the way CSS does it, scored for contrast two ways.

Source

Palettedot marks the step that holds your exact colour · ✂ marks steps pulled into gamut by more than one JND

Contrast, primary on primary

In usetokens applied to a real component

Export


    

    

      
Checked

      

      
The conversion is checked against the browser by painting oklch() colours into a canvas and reading the pixels back. Reference values come from Björn Ottosson's OKLab definition, the CSS Color 4 examples, and the APCA and WCAG specifications.