Color Picker מספק כלי eyedropper מדויק ברמת ה-pixel לדגימת צבעים מכל אלמנט בדף אינטרנט — טקסט, רקעים, תמונות, gradients, או כל pixel גלוי. קבל את ערך הצבע המדויק בו-זמנית בפורמטים HEX, RGB ו-HSL, עם תצוגה מוגדלת של ה-pixel לכיוון מדויק. צבעים שנדגמו בעבר נשמרים בשורת היסטוריה לגישה מהירה.
חילוץ ערכי צבע מדויקים מדף אינטרנט הוא משימה שכיחה — התאמת צבע מותג, הפניה לעיצוב, או בדיקת גוון בשימוש באתר מתחרה. DevTools של הדפדפן מציג צבעים בפאנל Styles, אך רק עבור אלמנטים עם מאפייני CSS מפורשים של צבע — לא עבור תמונות, gradients, או צבעים תורשתיים. ה-eyedropper של Color Picker פועל ברמת ה-pixel — הוא קורא את הצבע הממשי המוצג של כל pixel שנמצא תחת הסמן שלך, ללא קשר לאופן שבו הצבע הגיע לשם. לחץ על שמים כחולים בתמונת Hero, נקודת אמצע של gradient, או שכבת-על שקופה למחצה, וקבל את ערך הצבע המורכב המדויק. עיגול התצוגה המוגדלת מציג תצוגה מקרוב של ה-pixels הסובבים כדי שתוכל לכוון לה-pixel המדויק שאתה רוצה. שלושת פורמטי הפלט (HEX, RGB, HSL) מוצגים בו-זמנית — לחץ על כל פורמט להעתקה. מספר הדגימות האחרונות שלך נשמרות בשורת היסטוריית הצבעים בתחתית, כך שתוכל לחזור בקלות לצבע שנדגם קודם.
תצוגה מעגלית מוגדלת מציגה 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 בחינם ופתח 39+ כלי פיתוח לדפדפן שלך.
