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

ג'סלין יין
ג'סלין יין
Twitter GitHub דף הבית
סופיה אמליאנובה
סופיה אמליאנובה
GitHub

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

כדי לקבל סקירה מפורטת של מרחבי הצבעים החדשים, אפשר לעיין במדריך הצבעים ב-CSS באיכות HD.

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

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

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

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

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

    תצוגה מקדימה של הצבע.

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

הערך המחושב של color-mix().

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

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

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

בוחר הצבעים, עם הערות.

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

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

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

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

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

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

    הרשימה הנפתחת עם כל מרחבי הצבעים הנתמכים.

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

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

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

המרת צבעים

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

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

סמל אזהרה שמציין חיתוך סולם והסבר קצר עם הערך המקורי.

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

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

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

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

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

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

הקטע של יחס הניגודיות המורחב בהתאם להנחיות של WebAIM או APCA.

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

דוגמים צבע בכל מקום באמצעות הטפטפת

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

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

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

שימוש בטפטפת בכל מקום במסך.

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