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

Jecelyn Yeen
Sofia Emelianova
Sofia Emelianova
GitHub

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

המרת צבעים

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

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

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

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

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

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

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

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

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

הקטע &#39;יחס ניגודיות מורחב&#39; עם הנחיות Web9 או APCA.

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

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

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

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

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

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

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