ಕಲರ್ ಪಿಕರ್ OKLCH ನಲ್ಲಿ ಕೆಲಸ ಮಾಡುತ್ತದೆ; ಇದು ಆಧುನಿಕ CSS ನ, ಕಣ್ಣು ಗ್ರಹಿಸುವ ರೀತಿಗೆ ಅನುಗುಣವಾದ ಕಲರ್ ಸ್ಪೇಸ್. ಬಣ್ಣದ ಪ್ರದೇಶದ ಅಡ್ಡಲಾಗಿ, ವರ್ಣಗಾಢತೆ (chroma) ಬೂದು ಬಣ್ಣದಿಂದ ಆ ಪ್ರಕಾಶದಲ್ಲಿ (lightness) ಪರದೆ ತೋರಿಸಬಲ್ಲ ಗರಿಷ್ಠದವರೆಗೆ ಸಾಗುತ್ತದೆ; ಹಾಗಾಗಿ ಪ್ರತಿಯೊಂದು ಬಿಂದುವೂ ನೀವು ಬಳಸಬಹುದಾದ ಬಣ್ಣ, ಮತ್ತು ವರ್ಣಛಾಯೆ (hue) ಬದಲಾದರೂ ಥಂಬ್ ಅಲುಗಾಡುವುದಿಲ್ಲ.
ಫೀಲ್ಡ್ ಬಣ್ಣಗಳ ಹೆಸರುಗಳೂ ಸೇರಿದಂತೆ ಯಾವುದೇ CSS ಬಣ್ಣವನ್ನು ಸ್ವೀಕರಿಸುತ್ತದೆ, ಮತ್ತು ಫಾರ್ಮ್ಯಾಟ್ ಬಟನ್ ಮೌಲ್ಯವನ್ನು hex, rgb(), hsl(), oklch() ಅಥವಾ color(display-p3) ಆಗಿ ಬರೆಯುತ್ತದೆ. ಒಂದು ಫಾರ್ಮ್ಯಾಟ್ನ ಬಣ್ಣದ ವ್ಯಾಪ್ತಿಯ (gamut) ಹೊರಗಿರುವ ಬಣ್ಣವನ್ನು, ಅದರ ಪ್ರಕಾಶ ಮತ್ತು ವರ್ಣಛಾಯೆ ಬದಲಾಗದಂತೆ, CSS ರೀತಿಯಲ್ಲಿ ಆ ವ್ಯಾಪ್ತಿಯೊಳಗೆ ತರಲಾಗುತ್ತದೆ.
ಆರಿಸಲು swatches ಅನ್ನು, ಮತ್ತು WCAG 2 ಕಾಂಟ್ರಾಸ್ಟ್ ಅಳೆಯುವ ರೀತಿಯಲ್ಲಿ ಬಣ್ಣವನ್ನು ಹಿನ್ನೆಲೆಯ ಎದುರು ಪರಿಶೀಲಿಸಲು contrastWith ಅನ್ನು ಸೇರಿಸಿ. ಬ್ರೌಸರ್ನಲ್ಲಿ ಐಡ್ರಾಪರ್ ಇರುವಲ್ಲಿ, ಒಂದು ಬಟನ್ ಪರದೆಯಿಂದ ಬಣ್ಣವನ್ನು ಆರಿಸುತ್ತದೆ.
ಬ್ರ್ಯಾಂಡ್ ಬಣ್ಣ
ಹೆಸರಿರುವ ಸ್ವಾಚ್ಗಳು, ಮತ್ತು ಬಣ್ಣದ ಮೇಲೆ ಬಿಳಿ ಪಠ್ಯದ ಕಾಂಟ್ರಾಸ್ಟ್: ತಿಳಿ ಬಣ್ಣವನ್ನು ಆರಿಸಿದರೆ AA ವಿಫಲವಾಗುತ್ತದೆ.
#4f46e5
ವಿಶಾಲ ಬಣ್ಣದ ವ್ಯಾಪ್ತಿ
gamut="p3" ಪ್ರದೇಶವನ್ನು Display P3 ಬಣ್ಣಗಳಿಂದ ತುಂಬುತ್ತದೆ, ಮತ್ತು sRGB ಎಲ್ಲಿ ಮುಗಿಯುತ್ತದೆ ಎಂಬುದನ್ನು ತುಂಡುಗೆರೆ ಗುರುತಿಸುತ್ತದೆ. ಮೌಲ್ಯ oklch() ನಲ್ಲೇ ಉಳಿಯುತ್ತದೆ.
ಪಾಪ್ಓವರ್ನಲ್ಲಿ
ಬಣ್ಣವನ್ನು ತೋರಿಸುವ ಬಟನ್, ಪಿಕರ್ ಅನ್ನು ಪಾಪ್ಓವರ್ ನಲ್ಲಿ ತೆರೆಯುತ್ತದೆ.