באמצעות בוחר הצבעים ניתן לבדוק ולנפות באגים בצבעים אחרים, באיכות HD

Jecelyn Yeen

Sofia Emelianova

בוחר הצבעים מספק ממשק משתמש גרפי לשינוי ההצהרות color ו-*-color, ומאפשר ליצור, להמיר ולפתור באגים בצבעים שאינם HD וצבעים באיכות HD בלחיצה אחת.

ניתוח מעמיק של מרחבי הצבעים החדשים זמין במאמר מדריך לצבעים ב-CSS ברזולוציה גבוהה.

פתיחת בוחר הצבעים ושינוי הצבעים

משתמשים בבוחר הצבעים כדי לשנות את ערכי הצבעים בלחיצה:

1. בוחרים רכיב בחלונית Elements.

2. בחלונית Styles, מחפשים את ההצהרה color או *-color שרוצים לשנות.

   משמאל לכל ערך color או *-color מופיע סמל ריבוע קטן עם תצוגה מקדימה של הצבע הזה.

   

כדי לבדוק את הערך המחושב, משתמשים בחלונית Computed.

1. לוחצים על ריבוע התצוגה המקדימה לצד צבע כדי לפתוח את בורר הצבעים.
2. כדי לשנות את הצבע, משתמשים באחד מרכיבי ממשק המשתמש של בורר הצבעים.

רכיבים של בוחר הצבעים

זהו תיאור של כל אחד מרכיבי ממשק המשתמש של בורר הצבעים:

1. גוונים.
2. כלי לבחירת צבע. איך לבחור צבע מכל מקום באמצעות הטפטפת
3. העתקה ללוח. מעתיקים את ערך התצוגה ללוח.
4. ערך לתצוגה. הארגומנטים של מרחב הצבעים שנבחר.
5. יחס ניגודיות. האפשרות הזו זמינה רק לערכים של color. זהו ההבדל בין color לבין background-color.
6. לוח צבעים. לוחצים על ריבוע כדי לשנות את הצבע לצבע של הריבוע.
7. גבול המגוון. השורה הזו זמינה רק למרחבי הצבעים החדשים ולפונקציה color(). הם יכולים לייצר צבעים באיכות HD וגם באיכות לא HD. הקו מאפשר להבחין בין איכות HD לבין איכות שאינה HD.
8. מעגל צבע. גוררים את המעגל הזה על פני הגוונים כדי לשנות את ערך התצוגה.
9. פס ההזזה לבחירת גוון.
10. פס ההזזה של רמת האטימוּת.
11. מתג להחלפת הערך המוצג. בוחרים מרחב צבע מהרשימה הנפתחת. המרת צבעים
12. מרחיבים את יחס הניגודיות. הקטע המתאים ייפתח, שבו תוכלו לתקן את הניגודיות.

13. מעבר בין לוחות הצבעים. אפשר ללחוץ עליו כדי לעבור בין:

    • פלטת עיצוב של Material.
    • פלטת צבעים בהתאמה אישית. כדי להוסיף ידנית את הצבע הנוכחי ללוח הצבעים הזה, לוחצים על .
    • לוח משתני CSS. רשימה של כל משתני ה-CSS המותאמים אישית (עם הסיומת --) בדף.
    • לוח הצבעים צבעי דף. כדי ליצור את לוח הצבעים הזה, DevTools מחפש את כל הצבעים בגיליונות הסגנונות.

בחירת מרחב צבעים

כדי לבחור מרחב צבע:

1. מקישים על Shift ולוחצים על סמל התצוגה המקדימה לצד ערך הצבע. תיפתח רשימה נפתחת.

   

2. בוחרים באחת ממרחב הצבעים הבאים:

   • #<hex-color>
   • rgb(X X X / .X).
   • hsl(X X X / X).
   • hwb(X X X / .X).

   או אחד מהמרחבים החדשים:

   • lch(X X X / .X)
   • oklch(X X X / .X)
   • lab(X X X / .X)
   • oklab(X X X / .X)

   או מרחב שמוגדר על ידי הפונקציה color(<color_space> X X X).

המרת צבעים

כשעוברים בין מרחבי צבעים באמצעות מתג החלפת ערכי התצוגה, הערכים מומרו באופן אוטומטי על ידי DevTools.

כדי לראות את הערך המקורי, מעבירים את העכבר מעל הסמל.

בסרטון הבא מוצגות המרות בפעולה.

תיקון הניגודיות

כדי לפתור בעיה של ניגודיות בהצהרה color:

1. פותחים את בורר הצבעים לצד הערך color.
2. מרחיבים את הקטע יחס ניגודיות.

3. משתמשים בצבע המוצע שעומד בהנחיה:

   • לוחצים על לצד ההנחיה.
   • בתצוגה המקדימה של הגוונים בחלק העליון, גוררים את מעגל הצבע מתחת לקו המתאים.

כדי לקבל רשימה של כל הבעיות שקשורות לניגודיות בבת אחת, יש לפעול לפי ההוראות במדריך שיפור הקריאוּת של האתר.

איך לבחור צבע מכל מקום באמצעות הטפטפת

אפשר להשתמש בטפטפת כדי לדגום צבעים מהדף ומכל מקום במסך.

כדי לבחור צבע מכל מקום במסך:

1. פותחים את בורר הצבעים ומבצעים אחת מהפעולות הבאות:
   • לוחצים על הלחצן .
   • מקישים על C כדי להפעיל את כלי הדגימה. כדי להשבית את התכונה, מקישים על Escape.
2. כשהכלי טפטפת פעיל, מעבירים את העכבר מעל צבע היעד ולוחצים כדי לבחור דגימה.

בדוגמה הזו, בורר הצבעים מציג ערך צבע נוכחי של rgb(224 255 255 / 15%). הצבע הזה ישתנה לורוד אחרי שתלחצו מחוץ ל-Chrome.