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

Jecelyn Yeen

Sofia Emelianova

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

למידע מעמיק על מרחבי הצבעים החדשים, אפשר לעיין במדריך לצבעי CSS בהפרדה גבוהה.

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

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

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

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

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

   

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

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

אלמנטים של הכלי לבחירת צבעים

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

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

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

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

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

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

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).

המרת צבעים

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

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

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

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

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

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

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

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

כברירת מחדל, בוחר הצבעים מציע ערכים שתואמים ל-APCA.

אפשרות אחרת היא להגדיר את המערכת להציע ערכים שתואמים להנחיות WebAIM. ב הגדרות > העדפות > רכיבים, מבטלים את הסימון בתיבת הסימון אלגוריתם מתקדם לניגודיות תפיסתית (APCA)....

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

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

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

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

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

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