ਕਲਰ ਪਿਕਰ OKLCH ਵਿੱਚ ਕੰਮ ਕਰਦਾ ਹੈ, ਜੋ ਆਧੁਨਿਕ CSS ਦਾ ਪਰਸੈਪਚੁਅਲ ਕਲਰ ਸਪੇਸ ਹੈ। ਰੰਗ-ਖੇਤਰ ਵਿੱਚ ਖੱਬੇ ਤੋਂ ਸੱਜੇ ਕ੍ਰੋਮਾ ਸਲੇਟੀ ਤੋਂ ਸ਼ੁਰੂ ਹੋ ਕੇ ਉੱਥੇ ਤੱਕ ਜਾਂਦਾ ਹੈ, ਜਿੱਥੇ ਤੱਕ ਸਕ੍ਰੀਨ ਉਸ ਲਾਈਟਨੈੱਸ ’ਤੇ ਦਿਖਾ ਸਕਦੀ ਹੈ, ਇਸ ਲਈ ਹਰ ਬਿੰਦੂ ਵਰਤਣਯੋਗ ਰੰਗ ਹੈ, ਅਤੇ ਹਿਊ ਬਦਲਣ ’ਤੇ ਵੀ ਮਾਰਕਰ ਆਪਣੀ ਥਾਂ ’ਤੇ ਰਹਿੰਦਾ ਹੈ।
ਫ਼ੀਲਡ ਕੋਈ ਵੀ CSS ਰੰਗ ਲੈਂਦਾ ਹੈ, ਰੰਗਾਂ ਦੇ ਨਾਮ ਵੀ, ਅਤੇ ਫ਼ਾਰਮੈਟ ਬਟਨ ਵੈਲਿਊ ਨੂੰ hex, rgb(), hsl(), oklch() ਜਾਂ color(display-p3) ਵਿੱਚ ਲਿਖਦਾ ਹੈ। ਕਿਸੇ ਫ਼ਾਰਮੈਟ ਦੇ ਗੈਮਟ ਤੋਂ ਬਾਹਰਲਾ ਰੰਗ CSS ਦੇ ਤਰੀਕੇ ਨਾਲ ਉਸ ਦੇ ਅੰਦਰ ਲਿਆਂਦਾ ਜਾਂਦਾ ਹੈ, ਅਤੇ ਉਸ ਦੀ ਲਾਈਟਨੈੱਸ ਅਤੇ ਹਿਊ ਉਹੀ ਰਹਿੰਦੇ ਹਨ।
ਚੁਣਨ ਲਈ swatches ਜੋੜੋ, ਅਤੇ ਰੰਗ ਨੂੰ ਕਿਸੇ ਬੈਕਗ੍ਰਾਊਂਡ ਦੇ ਮੁਕਾਬਲੇ WCAG 2 ਦੇ ਕੰਟ੍ਰਾਸਟ ਮਾਪ ਨਾਲ ਜਾਂਚਣ ਲਈ contrastWith। ਜਿਸ ਬ੍ਰਾਊਜ਼ਰ ਵਿੱਚ ਆਈਡ੍ਰੌਪਰ ਹੈ, ਉੱਥੇ ਇੱਕ ਬਟਨ ਸਕ੍ਰੀਨ ਤੋਂ ਰੰਗ ਚੁੱਕ ਲੈਂਦਾ ਹੈ।
ਬ੍ਰਾਂਡ ਦਾ ਰੰਗ
ਨਾਮ ਵਾਲੇ ਰੰਗ-ਨਮੂਨੇ, ਅਤੇ ਰੰਗ ’ਤੇ ਚਿੱਟੇ ਟੈਕਸਟ ਦਾ ਕੰਟ੍ਰਾਸਟ: ਹਲਕਾ ਰੰਗ ਚੁਣੋ, ਤਾਂ AA ਫ਼ੇਲ੍ਹ ਹੋ ਜਾਂਦਾ ਹੈ।
#4f46e5
ਵਾਈਡ ਗੈਮਟ
gamut="p3" ਰੰਗ-ਖੇਤਰ ਨੂੰ Display P3 ਰੰਗਾਂ ਨਾਲ ਭਰਦਾ ਹੈ, ਅਤੇ ਇੱਕ ਡੈਸ਼ ਵਾਲੀ ਲਕੀਰ ਦੱਸਦੀ ਹੈ ਕਿ sRGB ਕਿੱਥੇ ਖ਼ਤਮ ਹੁੰਦਾ ਹੈ। ਵੈਲਿਊ oklch() ਵਿੱਚ ਹੀ ਰਹਿੰਦੀ ਹੈ।
ਪੌਪਓਵਰ ਵਿੱਚ
ਰੰਗ ਦਿਖਾਉਣ ਵਾਲਾ ਬਟਨ ਪਿਕਰ ਨੂੰ ਇੱਕ ਪੌਪਓਵਰ ਵਿੱਚ ਖੋਲ੍ਹਦਾ ਹੈ।