Color Picker מספק כלי eyedropper מדויק ברמת ה-pixel לדגימת צבעים מכל אלמנט בדף אינטרנט — טקסט, רקעים, תמונות, gradients, או כל pixel גלוי. קבל את ערך הצבע המדויק בו-זמנית בפורמטים HEX, RGB ו-HSL, עם תצוגה מוגדלת של ה-pixel לכיוון מדויק. צבעים שנדגמו בעבר נשמרים בשורת היסטוריה לגישה מהירה.
חילוץ ערכי צבע מדויקים מדף אינטרנט הוא משימה נפוצה - התאמת צבע מותג, התייחסות לעיצוב, או בדיקת גוון שבו משתמש אתר מתחרה. DevTools של הדפדפן מציגים צבעים בפאנל הסגנונות, אבל רק עבור אלמנטים עם מאפייני צבע CSS מפורשים - לא עבור תמונות, גרדיאנטים או צבעים בירושה.
הטפטפת (eyedropper) של Color Picker פועלת ברמת הפיקסל - היא קוראת את הצבע המרונדר בפועל של כל פיקסל שנמצא מתחת לסמן שלך, בלי קשר לאיך שהצבע הזה נוצר. לחץ על שמיים כחולים בתמונת גיבור, אמצע של גרדיאנט, או שכבת-על שקופה למחצה, וקבל את ערך הצבע המורכב המדויק. שלושת פורמטי הפלט (HEX, RGB, HSL) מוצגים בו-זמנית - לחץ על כל פורמט כדי להעתיק. הבחירות האחרונות שלך נשמרות ברצועת היסטוריית צבעים בתחתית.
שקיפות אלפא נשמרת בפלט - בחירת שכבת-על שקופה למחצה נותנת לך ערך rgba() או hsla() עם ערוץ אלפא נכון, ולא רק את ה-RGB השטוח שהיית מקבל מכלי צילום מסך. ב-macOS וב-Windows, הטפטפת יכולה להשתמש ביכולת הטפטפת הטבעית של הדפדפן היכן שקיימת, מה שמאפשר לך לדגום צבע מכל מקום על המסך שלך, כולל מחוץ לחלון הדפדפן לגמרי - שימושי כשמתאימים צבע מקובץ עיצוב פתוח באפליקציה אחרת.
תצוגה מעגלית מוגדלת מציגה pixels מוקרבים סביב הסמן שלך, עם כיוון מצלב לבחירת pixel מדויקת. דגום צבעים מטקסט, רקעים, תמונות, gradients, SVGs, או כל pixel גלוי בדף.
כל צבע שנדגם מוצג בשלושת הפורמטים בבת אחת: HEX (#7c3aed), RGB (rgb(124, 58, 237)), ו-HSL (hsl(262, 83%, 58%)). אין צורך לעבור בין פורמטים או להמיר — כל הפורמטים זמינים מיידית.
לחץ על כל שורת פורמט (HEX, RGB, או HSL) להעתקת הערך הספציפי ללוח ההעתקה שלך באופן מיידי. אנימציית "הועתק!" קצרה מאשרת את הפעולה. הדבק ישירות ב-CSS שלך, בכלי העיצוב, או במפרט הצבע.
הצבעים שנדגמו לאחרונה נשמרים בשורת היסטוריה ויזואלית המציגה color swatches. לחץ על כל swatch לבחירה מחדש של אותו צבע וצפייה בערכיו שוב. ההיסטוריה נשמרת במהלך הסשן שלך — דגום צבעים ממספר דפים.
הצבע שנדגם מוצג כ-swatch גדול מעל ערכי הפורמט, מה שמקל על ראיית הצבע ואימותו. ה-swatch גדול מספיק להצגת גוונים עדינים שעשויים להיראות זהים בגדלים קטנים יותר.
דוגם צבעים מכל pixel גלוי: CSS colors, CSS gradients, תמונות (PNG, JPG, SVG), אלמנטי canvas, פריימים של וידאו, שכבות-על שקופות למחצה (דגימת הצבע המורכב), ואפילו iframes. אם אתה יכול לראות זאת, אתה יכול לדגום זאת.
דגום את צבע המותג המדויק מאתר של חברה כדי להבטיח שהעיצוב או התוכן שלך משתמשים בגוון הנכון. קבל את ערך HEX המדויק במקום להתבסס על עין בלבד או לחפש בהנחיות המותג.
דגום צבעים ישירות מתמונות Hero, תמונות מוצר, או איורים. חלץ צבע דומיננטי מתצלום לשימוש כרקע משלים בעיצוב שלך.
מפרט העיצוב אומר שהכפתור צריך להיות #7c3aed. דגום את הצבע מהכפתור הממומש לאימות שהוא תואם. מזהה הבדלי צבע עדינים שאינם נראים לעין בלתי מזוינת.
גלוש באתרי השראת עיצוב ודגום צבעים שתופסים את עינך. שורת ההיסטוריה בונה palette של צבעים שדגמת במהלך הסשן — השתמש בה כנקודת פתיחה לסכמת הצבעים שלך.
דגום צבעים בנקודות שונות לאורך CSS gradient כדי לראות את הצבע המדויק בכל מיקום. שימושי לשכפול gradients או להבנת אופן מיזוג עצירות gradient.
פתח את הדוק הצף של DevSuite Pro ולחץ על סמל Color Picker. הסמן משתנה ל-eyedropper עם עיגול תצוגה מוגדלת.
הזז את הסמן שלך מעל הדף. התצוגה המוגדלת מציגה תצוגה מקרוב של ה-pixels סביב הסמן שלך, עם מצלב המציין את ה-pixel המדויק שבמטרה.
לחץ בכל מקום בדף לדגימת הצבע ב-pixel זה. ה-color swatch וערכי HEX, RGB ו-HSL מתעדכנים כולם באופן מיידי.
לחץ על שורת HEX, RGB, או HSL להעתקת אותו ערך ללוח ההעתקה שלך. אישור "הועתק!" מופיע לזמן קצר.
המשך ללחוץ לדגימת צבעים נוספים. כל דגימה נוספת לשורת ההיסטוריה. לחץ על כל swatch בהיסטוריה לשליפת אותו צבע.
התקן את DevSuite Pro בחינם ופתח 64+ כלי פיתוח לדפדפן שלך.
