è²å½©ç©ºé´
è²å½©ç©ºé´æ¯å¯¹è²å½©çå½åç»ç»æ¹å¼ï¼ç¨äºåºäºåæ çè²å½©æåçåºæ¬è²å½©æ¨¡åãè²å½©æ¨¡åå®ä¹äºè²å½©çç»æé¨åï¼ä¾å¦ hwb() è²å½©ç hãw å b ééï¼ä¸è²å½©ç©ºé´ä¹é´çå
³ç³»ã夿°è²å½©ç©ºé´æ¯è¡¨ç¤ºè²å½©çä¸ç»´æåç»´ç½æ ¼ï¼å
¶ä¸å维度ï¼è½´ï¼å¯¹åºè²å½©ç©ºé´ä¸çä¸ä¸ªééãä¸ä¸ªè²å½©å¯ä»¥å¨ä¿æçèµ·æ¥ä»ç¶ä¸æ ·çæ
åµä¸å¨å¤ä¸ªè²å½©ç©ºé´ä¸è¡¨è¾¾ï¼æè
ä»ä¸ä¸ªè²å½©ç©ºé´è½¬æ¢å°å¦ä¸ä¸ªè²å½©ç©ºé´ã
è²å½©ç©ºé´å¯¹ç¹å®èå´çè²å½©è¿è¡åç±»åå®ä¹ãæ¯ä¸ªè²å½©ç©ºé´ç±æ°å¦æ¨¡ååç¸å ³çè§åéå®ä¹ãæ¯ä¸ªè²å½©ç©ºé´é½æä¸ä¸ªå®ä¹å¥½çè²åï¼å®æçæ¯å®è½è¡¨ç¤ºçç¹å®èå´çè²å½©ï¼ãè¿äºè§å使å¾è·¨ä¸å设å¤å软件çè²å½©è¡¨ç°ä¸è´ä¸å¯éç°ã
sRGB è²å½©ç©ºé´ï¼æ å红绿èï¼æ¯ä¸º Web å建çï¼ä½æä»¬ä¸åå±éäºè¿ä¸ªè²å½©ç©ºé´ãCSS è²å½©æ¨¡å第 4 çæå®äºå ç§é¢å®ä¹çè²å½©ç©ºé´ï¼è CSS è²å½©æ¨¡å第 5 çåè¿ä¸æ¥è§å®äºç¨äºå®ä¹èªå®ä¹è²å½©ç©ºé´çç¹æ§ã
å ·åè²å½©ç©ºé´
é¢å®ä¹ç RGB è²å½©ç©ºé´å
æ¬ srgbãsrgb-linearãdisplay-p3ãa98-rgbãprophoto-rgb å rec2020ãé¢å®ä¹ç CIELAB è²å½©ç©ºé´å
æ¬ lab-d50 å lab-d65ãé¢å®ä¹ç XYZ è²å½©ç©ºé´å
æ¬ xyz-d50 å xyz-d65ï¼ä»¥åä½ä¸ºå
¶å«åç xyzï¼ã
è²å½©ç©ºé´å¯ä»¥æ¯ç©å½¢ææåæ çãç©å½¢è²å½©ç©ºé´å
æ¬ srgbãsrgb-linearãdisplay-p3ãa98-rgbãprophoto-rgbãrec2020ãlabãoklabãxyz-d50 å xyz-d65ï¼æ xyzï¼ãæåæ è²å½©ç©ºé´å
æ¬ hslãhwbãlch å oklchã
RGB è²å½©ç©ºé´
RGB æ¯ä¸ç§è²å½©æ¨¡åï¼å°è²å½©è¡¨ç¤ºä¸ºä¸ä¸ªåºæ¬æåï¼çº¢è²ã绿è²åèè²è²å½©ééï¼çæ··åï¼äº§çåç§è²è°ãsRGBï¼æ å RGBï¼æ¯ RGB è²å½©çåºå±è²å½©ç©ºé´ãsRGB æ¨å¨ç¼çºä¸ªäººçµèåä¸ç»´ç½æåç³»ç»çæ¾ç¤ºè§èãç®åï¼sRGB é常æ¯é£äºæ²¡ææ è®°ææ²¡æåµå ¥è²å½©é ç½®æä»¶çé»è®¤è²å½©ç©ºé´ã
RGB è²å½©ç©ºé´æå ç§ï¼å¦å¯ä»¥è¡¨ç¤ºæ¯ sRGB è²å½©ç©ºé´æ´å¹¿æ³çè²åç Adobe RGB è²å½©ç©ºé´ãsRGB å Adobe RGBï¼a98-rgbï¼ä¸çåæ æ¯ä¸åçãæå¾å¤ç§æ¹å¼æ¥æè¿°è²å½©ç RGB æåï¼å¨ CSS ä¸ï¼è²å½©å¯ä»¥è¡¨ç¤ºä¸ºåå
è¿å¶è¡¨ç¤ºæ³çå个 24 使´æ°ï¼å¦æ·¡èè² #add8e6ï¼ï¼æè
å¨ rgb() 彿°è¡¨ç¤ºæ³ä¸è¡¨ç¤ºä¸º 0 å° 255 ä¹é´çä¸ä¸ªç¬ç«æ°åï¼å¦ï¼rgb(46 139.5 87)ï¼ã
å¨ sRGB è²å½©ç©ºé´ä¸ï¼CSS <color> å¼å
æ¬åå
è¿å¶è²å½©ãå
·åè²å½©ãrgb()ãhsl()ï¼è²è°ã饱å度ã亮度ï¼åhwb()ï¼è²è°ãç½åº¦ãé»åº¦ï¼ãcolor 彿°è¿æ¯æ srgbãsrgb-linearãa98-rgb å prophoto-rgb è²å½©ç©ºé´ã
HSVï¼è²è°ã饱å度åå¼ï¼è²å½©ç©ºé´åå
¶åä¹è¯ HSBï¼è²è°ã饱å度å亮度ï¼å¨ CSS ä¸é½ç¨ hwb() 表示ãå½åè²å½©åªæ¯ä¸ç¹å®åå
è¿å¶å¼ç¸å¯¹åºçå
³é®åãå°è¿äºä¸åçè²å½©è¡¨ç¤ºæ³è½¬æ¢ä¸º sRGB çæ°å¦æ¹æ³æ¯ç´è§çã请注æï¼currentcolor å¯ä»¥æ¯ä»»ä½è²å½©ï¼èä¸ä»
éäº sRGB è²å½©ç©ºé´ã
rgb è²å½©å½æ°ä¸æ¯å¯ä»¥ç¨äºè¡¨ç¤º sRGB è²å½©ç©ºé´çå¯ä¸è²å½©å½æ°ãåæ±åæ ç³»ï¼å¦ HSLï¼è²è°â饱å度âäº®åº¦ï¼æ HWBï¼è²è°âç½åº¦âé»åº¦ï¼è²å½©æ¨¡åä¹ç¨äºå¨ Web ä¸è¡¨ç¤º sRGB è²å½©ã
sRGBè²å½©ç©ºé´-
sRGB è²å½©ç©ºé´ï¼âæ å RGBâï¼ï¼æ¯æ åç RGBï¼çº¢ã绿ãèï¼è²å½©ç©ºé´ï¼ç¨äºæ¾ç¤ºå¨ãæå°æºå Web ä¸ã宿¯ä½¿ç¨æå¹¿æ³çè²å½©ç©ºé´ï¼åå°å¤§å¤æ°æä½ç³»ç»ã软件ç¨åºãæ¾ç¤ºå¨åæå°æºçæ¯æãsRGB 以
rãgåb为åºç¡ï¼è²åèå´ä¸º0è³1ãå®çç½ç¹ä¸º D65ã srgb-linearè²å½©ç©ºé´-
é¢å®ä¹ç线æ§å sRGB è²å½©ç©ºé´
srgb-linearä¸srgbç¸åï¼åªæ¯ä¼ è¾å½æ°æ¯æ²¡æä¼½çç¼ç ç线æ§å ãsrgb-linearè²å½©ç©ºé´æ¥åä¸ä¸ªrãgåbå¼ä½ä¸ºæ°å¼åæ°ï¼è²åèå´ä¸º0è³1ãå®çç½ç¹ä¸º D65ã display-p3è²å½©ç©ºé´-
Display P3 è²å½©ç©ºé´ç±è¹æå ¬å¸å®ä¹ï¼ç»åäº DCI-P3 è²åãD65 ç½ç¹å sRGB 伽马æ²çº¿ã宿¯ä¸ç§å ¸åç宽è²å空é´ï¼éç¨äºå½åç宽è²åæ¾ç¤ºå¨ï¼è½åç°åºæ¯ sRGB è²åæ´é²è³ç绿è²å红è²ã
display-p3åºäºrãgåbï¼ä¼½çå¼èå´ä¸º0è³1ãå®çç½ç¹ä¸º D65ã a98-rgbè²å½©ç©ºé´-
a98-rgbæ¯ Adobe® 1998 RGB è²å½©ç©ºé´ï¼æ¨å¨å°ææ CMYK é¢è²è¡¨ç¤ºä¸º RGBãå®å¯å®ç° CIELab è²å½©ç©ºé´æå®ç约 50% çå¯è§è²å½©ï¼æ¯å ¶ä» RGB è²å½©ç©ºé´å 嫿´å¤çé绿è²è°ãä¼½çå çrãgåbå¼èå´ä»0å°1ãå®çä¼ è¾æ²çº¿æ¯ä¸ä¸ªä¼½é©¬å½æ°ï¼ä¸å®å ¨å°æ¥è¿äº 1/2.2ãå®çç½ç¹ä¸º D65ã prophoto-rgb-
prophotoo-rgbè²å½©ç©ºé´ç±æ¯è¾¾å ¬å¸å¼åï¼å¯ä»¥è¡¨ç¤ºèªç¶çä¸å¯è½åºç°çææé¢è²å大约 90% ç CIElab é¢è²ãè²åèå´çrãgåbå¼èå´ä»0è³1ã转移æ²çº¿æ¯ä¸ä¸ªä¼½é©¬å½æ°ï¼å¼ä¸º 1/1.8ï¼å ¶ä¸å¨é»è²éè¿æä¸å°æ®µçº¿æ§ãå®çç½ç¹ä¸º D50ï¼ä¸ CIELab 使ç¨çç½ç¹ç¸åã rec2020-
rec2020æ¯è¶ 髿¸ 4k å 8k çµè§ç广æè¡ä¸æ åãè¶ å®½è²å空é´è½å¤åç°ç°å®ä¸çä¸å 乿æå¯è§çé¢è²ï¼è¶ åºäºç®å大夿°æ¾ç¤ºå¨çè½åãéçæ¾ç¤ºå¨ç䏿æ¹è¿ï¼é¢è®¡è¦çèå´ä¼éæ¸æ©å¤§ãè²åå çrãgåbå¼ä»0è³1ãå®çç½ç¹ä¸º D65ã
夿³¨ï¼CSS è§è䏿²¡æçå
¶ä»åæ±å½¢ RGB 空é´ï¼å¦ HSIï¼è²è°ã饱å度å强度ï¼ãOkhsvãOkhslãHSLuvãHPLuv å Cubehelixã
CIELAB è²å½©ç©ºé´
CIELABï¼æ CIELabï¼è²å½©ç©ºé´ï¼ä¹ç§°ä¸º L*a*b*ï¼ç®ç§° Lab*ï¼ï¼è¡¨ç¤ºäººç±»å¯ä»¥çå°çææè²å½©èå´ãè¿ä¸ªè²å½©ç©ºé´æ¯ç±å½é ç §æå§åä¼ï¼CIEï¼å®ä¹çãå®å°è²å½©è¡¨ç¤ºä¸ºä¸ä¸ªå¼ï¼L* 表示æç¥äº®åº¦ï¼a* å b* 表示人类è§è§çåç§ç¬ç¹è²å½©ï¼çº¢ã绿ãèåé»ã
Lab æ¯ä¸ä¸ªç©å½¢åæ ç³»ç»ï¼æä¸ä¸ªä¸å¤®ç亮度 L è½´ãa è½´ä¸çæ£å¼æ¯ç´«çº¢è²ï¼èè´å¼æ¯å
¶è¡¥è²ç»¿è²ãb è½´ä¸çæ£å¼æ¯é»è²ï¼è´å¼æ¯èè²/ç´«ç½å
°è²ãä¸é¥±åçè²å½©å
·æå°ç a å b å¼ï¼èç»å¯¹å¼æ´å¤§çæ´é¥±åã
CIELAB è²å½©å½æ°å
æ¬ lab()ï¼äº®åº¦ãa è½´ãb è½´ï¼å lch()ï¼äº®åº¦ãè²åº¦ãè²è°ï¼ï¼ä»¥å oklab() å oklch()ãå®ä»¬çäº®åº¦å¼æ¯ç¸åçï¼ä½æ¯ lch() å oklch æ¯ä¸ä¸ª Cï¼è²åº¦ï¼å Hï¼è²è°ï¼ä½¿ç¨æåæ è䏿¯è½´çæåæ æ±é¢åæ ç³»ç»ã
夿³¨ï¼å½æ° lch() å oklch ä¸çè²è°åäº®åº¦ä¸ hsl() æå
¶ä» sRGB è²å½©ç©ºé´ä¸ååå¼ä¸åã
CIELab è²å½©ç©ºé´å æ¬ LabãLchãOklab å Oklchï¼æ¯è®¾å¤æ å ³çè²å½©ç©ºé´ã
lab-d50è²å½©ç©ºé´-
å°è²å½©è¡¨ç¤ºä¸º
Lå¨0å°100èå´å ï¼å¹¶ä¸aåbèå´å¨-125å°125ä¹é´çè²å½©ç©ºé´ãaåbè½´ä¸åè¿äºèå´å¼çéå¶ï¼è¿äºå¼æ¯å¨ä¸Display P3è²å½©ç©ºé´ç¸å ³çç¾åæ¯è¾å ¥åè¾åºä¸ä½¿ç¨çåèç¹ãå®çç½ç¹æ¯ D50ã lab-d65è²å½©ç©ºé´-
é¤ä½¿ç¨ D65 ä½ä¸ºç½ç¹å¤ï¼ä¸
lab-d50ç¸åã oklabè²å½©ç©ºé´-
类似äº
lab-d65ï¼ä½Lçèå´æ¯0å°1ï¼aåbçèå´æ¯-0.4å°0.4ã
XYZ è²å½©ç©ºé´
尽管红ã绿åèçç»åå¨å±å¹ä¸è¡¨ç¤ºè²å½©ææå¾å¥½ï¼ä½ sRGB å¹¶ä¸ç´æ¥å¯¹åºäºäººç±»æç¥çè²å½©ãCIEXYZï¼æ XYZï¼è²å½©ç©ºé´æ¯ç±å½é ç §æå§åä¼ï¼CIEï¼å¨ 1931 å¹´å®ä¹çã宿¯çµç£å¯è§å è°±ä¸æ³¢é¿åå¸ä¸äººç±»è§è§ä¸æç¥è²å½©ä¹é´ç第ä¸ä¸ªå®ä¹çå®éèç³»ã
è§åæ£å¸¸ç人æä¸ç§å¯¹ä¸åæ³¢é¿çå
è°±å
·æå³°å¼ææåº¦çæå
é¥ç»èãCIE XãY å Z 忰坹åºäºä¸ç§è§é¥ç»èçåºæ¿æ°´å¹³ï¼ååä¸å¯ä»¥æè¿°æ¯ä¸ç§å¯è§å
é¢è²ãY éé代表ä¸ç§é¢è²ç亮度ãZ ééåæ é¢è²ä¸èè²çå«éï¼ä½ä¸ RGB ä¸ç B ä¸åï¼ãX è½´ä¸ XYZ è²å½©ä¸ç»´åæ ç³»ç Y è½´å Z è½´æ£äº¤ã
xyzåxyz-d65è²å½©ç©ºé´-
xyzæ è¯ç¬¦æ¯xyz-d65è²å½©ç©ºé´çåä¹è¯ãç±äºè²å½©ç©ºé´ä¸éäºæ¤èå´ï¼å èè½´ä¸éäº0å°1çèå´ï¼è¿äºå¼åªå¨å®ä¹è¾å ¥è¾åºçç¾åæ¯æ¶ä½¿ç¨ä½ä¸ºåèç¹ãå®çç½ç¹æ¯ D65ã xyz-d50è²å½©ç©ºé´-
é¤ä½¿ç¨
d50ä½ä¸ºç½ç¹å¤ï¼ä¸xyz-d65ç¸åã
åè§
color-gamut@mediaç¹æ§- CSS æ°æ®ç±»åï¼
<color> - sRGB è²å½©ç©ºé´
- ç»´åºç¾ç§ä¸ç CIELAB è²å½©ç©ºé´
- ç»´åºç¾ç§ä¸ç CIE 1931 è²å½©ç©ºé´
- Oklab è²å½©ç©ºé´