%%{ init: { 'theme': 'dark', 'flowchart': { 'curve': 'stepAfter', 'padding': 30 }, 'themeCSS': '.label foreignObject { overflow: visible; }' } }%%
flowchart LR
    lRGB(<a href='https://en.wikipedia.org/wiki/Rgb'>Linear<br/>sRGB</a>)
    Oklab(<a href='https://oklch.com/'>Oklab</a>)
    Oklch(<a href='https://oklch.com/'>Oklch</a>)
    XYZ(<a href='https://en.wikipedia.org/wiki/XYZ_color'>XYZ</a>)
    Lab(<a href='https://en.wikipedia.org/wiki/Lab_color'>Lab</a>)
    Lch(<a href='https://en.wikipedia.org/wiki/CIELAB_color_space#Cylindrical_model'>Lch</a>)
    sRGB(<a href='https://en.wikipedia.org/wiki/Srgb'>sRGB</a>)
    HWB(<a href='https://en.wikipedia.org/wiki/HWB_color_model'>HWB</a>)
    HSV(<a href='https://en.wikipedia.org/wiki/HSL_and_HSV'>HSV</a>)
    HSL(<a href='https://en.wikipedia.org/wiki/HSL_and_HSV'>HSL</a>)
    GPU <--> lRGB
    lRGB <--<a href='https://bottosson.github.io/posts/oklab/#converting-from-linear-srgb-to-oklab'>Conversion</a>--> Oklab
    Oklab <--<a href='https://bottosson.github.io/posts/oklab/#the-oklab-color-space'>Conversion</a>--> Oklch
    lRGB <--<a href='http://www.brucelindbloom.com/index.html?Eqn_RGB_XYZ_Matrix.html'>Conversion</a>--> XYZ
    XYZ <--<a href='http://www.brucelindbloom.com/index.html?Eqn_XYZ_to_Lab.html'>Conversion</a>--> Lab
    Lab <--<a href='http://www.brucelindbloom.com/index.html?Eqn_Lab_to_LCH.html'>Conversion</a>--> Lch
    lRGB <--<a href='https://en.wikipedia.org/wiki/SRGB#From_sRGB_to_CIE_XYZ'>Conversion</a>--> sRGB
    sRGB <--<a href='http://alvyray.com/Papers/CG/HWB_JGTv208.pdf'>Conversion</a>--> HWB
    HWB <--<a href='http://alvyray.com/Papers/CG/HWB_JGTv208.pdf'>Conversion</a>--> HSV
    HSV <--<a href='https://en.wikipedia.org/wiki/HSL_and_HSV#Interconversion'>Conversion</a>--> HSL