Utiliome

חילוץ פלטת צבעים מתמונה

חלצו פלטת צבעים הרמונית של 5–12 גוונים מכל תמונה או איור, דגמו פיקסלים מדויקים עם טפטפת, וייצאו משתני CSS, טוקנים ל-Tailwind או כרטיס PNG.

בלי העלאותבלי הרשמהעיבוד באצווה
5–12 Harmonious SwatchesClick-to-Pick EyedropperHEX / RGB / HSL / CSS / TailwindPNG Palette Card Export
הורדה
מנוע לא מקוון מוכןסביבת עבודה פרטית ב-100% בדפדפן • בלי העלאות לענן
כלים שאולי גם תצטרכו

כלים קשורים

חילוץ הצבע הדומיננטי

מצאו צבעים דומיננטיים ואחוזי כיסוי בפיקסלים בכל תמונה, באשכולות K-Means מקומיים. תצוגת ערכות, ניגודיות WCAG ו-HEX/RGB.

מחולל פלטת צבעים

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

בדיקת ניגודיות נגישה

בדקו עמידה בניגודיות WCAG 2.1, דמו עיוורון צבעים ומצאו זוגות צבעים נגישים.

מחולל פלטת Material

צרו פלטות Material Design 3 ו-2, גוונים ותצוגות ממשק מכל צבע או מתמונה שהעליתם.

מחולל גרדיאנט CSS

צרו והתאימו גרדיאנטים יפים ל-CSS באופן חזותי, והעתיקו את הקוד מיד.

המרת SVG ל-PNG

המירו מיד תמונות וקטור SVG לפורמט PNG איכותי, ישירות בדפדפן.

100% פרטי • בלי העלאת קבצים לשרת

למה להשתמש במחלץ פלטת הצבעים והטפטפת של Utiliome?

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

סינון מרחק תפיסתי והרמוניה

מחלץ 5, 6, 8 או 12 דוגמיות צבע נבדלות לפי מרחק RGB תפיסתי, כך שהפלטה תופסת אורות, גווני ביניים וצללים בלי כפילויות קרובות.

טפטפת בלחיצה ישירה על התמונה

לחצו בכל מקום על התמונה כדי לדגום את ערך ה-HEX/RGB/HSL המדויק של הפיקסל, להצמיד אותו לראש הפלטה ולהעתיק ללוח.

מצבי אווירה (חי, פסטל, חם, קר)

סננו את הצבעים שחולצו לפי רוויה, בהירות וזווית גוון ב-HSL, וצרו סכמות Vibrant, פסטל רך, חם או קר מאותה תמונת מקור.

ייצוא CSS, Tailwind, JSON וכרטיס PNG בלחיצה

העתיקו משתני CSS ב-:root, אובייקט colors של Tailwind או מערך JSON בלחיצה, או הורידו כרטיס פלטה PNG ברזולוציה 1200×800 עם התמונה וקודי HEX.

Utiliome מול חלופות ענן מסורתיות

השוו את מנוע ה-WebAssembly המקומי שלנו לכלי ענן ישנים.

מאפיין Utiliome (דפדפן מקומי) ממירי ענן ישנים
טפטפת פיקסלים אינטראקטיבית לחיצה על הקנבס לדגימה והצמדה של צבע פיקסל מדויק דוגמיות אוטומטיות קבועות, בלי בחירת פיקסל ידנית
סינון הרמוניה ואווירה 5–12 דוגמיות ומסנני HSL: מאוזן, חי, פסטל, חם וקר 5 דוגמיות סטטיות שחוזרות על אפורי רקע עכורים
ייצוא למפתחים ולמעצבים HEX, RGB, HSL + משתני CSS :root, Tailwind, JSON וכרטיס PNG העתקת HEX אחת-אחת או ייצוא מאחורי תשלום
פרטיות ומהירות חילוץ מקומי ב-HTML5 Canvas (אפס העלאות לשרת) מעלים לוחות השראה ונכסי לקוח לשרתי ענן
איך זה עובד

איך לחלץ פלטת צבעים מתמונה בשלושה צעדים

בלי התקנת תוכנה. הכול רץ ישירות בדפדפן.

1

גררו תמונה אחת או כמה תמונות ואיורים

גררו כל תמונת JPG, PNG, WebP, SVG או AVIF לאזור ההעלאה. Utiliome מפענח פיקסלים מקומית בזיכרון הדפדפן.

2

בחרו מספר דוגמיות, אווירה ופיקסלים

בחרו 5, 6, 8 או 12 דוגמיות, סננו לפי אווירה (מאוזן, חי, פסטל, חם או קר), או לחצו על התמונה כדי להצמיד פיקסלי הדגשה.

3

העתיקו HEX / CSS / Tailwind או הורידו PNG

לחצו על דוגמית כדי להעתיק HEX, RGB או HSL, ייצאו משתני CSS ב-:root או טוקני Tailwind בסרגל הצד, או הורידו כרטיס פלטה PNG לשיתוף.

איך כימות צבע תפיסתי בונה פלטות הרמוניות מתמונות

תשובה קצרה: ספירת פיקסלים פשוטה מחזירה לעיתים שישה גוונים כמעט זהים של כחול שמיים או אפור צל. Utiliome משלב היסטוגרמת RGB תלת-ממדית, סינון מרחק אוקלידי (ΔRGB >= 34) ואילוצי אווירה ב-HSL, כדי שכל דוגמית בפלטה תהיה נבדלת לעין.

כשתצלום מכיל 12 מיליון פיקסלים, יותר מ-70% מהם שייכים לעיתים לגרדיאנט רקע אחד (שמיים כחולים, רקע סטודיו כהה או עלווה). מיון לפי תדירות מייצר פלטה מונוטונית ומפספס את הדגש הצבעוני שמהווה רק 3% מהפריים אבל נותן לו חיים.

מנוע הפלטה ההרמוני של Utiliome פותר את זה בשלושה שלבים:

  1. כימות מרחבי בדגימה של 24 צעדים: דוגם פיקסלים לא שקופים (alpha >= 128) על רשת קנבס מנורמלת וממצע ערכי RGB אמיתיים בכל אשכול, כך שהדוגמיות משקפות גווני צילום אותנטיים ולא נקודות אמצע מלאכותיות.
  2. סינון אווירה וכרומה ב-HSL:ממיר מועמדים לגוון (0°–360°), רוויה (0%–100%) ובהירות (0%–100%), ומאפשר לבודד הרמוניותVibrant(S >= 35%),פסטל רך(L >= 60%, S <= 75%),חם(H <= 70° או H >= 310°) אוקר (70° < H < 310°).
  3. מרחק צבע אוקלידי מינימלי (מנגנון ΔE / ΔRGB): אוכף הפרדה מינימלית בין וקטורי RGB של הדוגמיות, כך שאורות, גווני ביניים והדגשות מיוצגים כולם.

ייצוא פלטות לייצור: משתני CSS, Tailwind וכרטיסי עיצוב

תשובה קצרה: אחרי שחילצתם או דייקתם פלטה עם הטפטפת על הקנבס, אפשר לייצא אותה מיד כמשתני CSS ב-:root, אובייקט theme.extend.colors של Tailwind, מערך JSON או כרטיס מצגת PNG בגודל 1200×800.

המעבר מהשראה חזותית לקוד פרונט-אנד או ללוח השראה ללקוח לא צריך לדרוש העתקה ידנית של שישה קודי hex:

יעד ייצוא פורמט פלט שימוש מומלץ
לחיצה על דוגמית #HEX, rgb(r, g, b) או hsl(h, s%, l%) הדבקת צבע בודד ב-Figma, Photoshop, Canva או Illustrator
משתני CSS (:root) --palette-1: #...; --palette-2: #...; ערכות נושא ב-CSS רגיל, Astro, Svelte ו-Web Components
הגדרות Tailwind CSS colors: { "brand-100": "#...", ... } הדבקה ישירה ב-tailwind.config.mjs או בבלוקי @theme
כרטיס דוגמיות PNG PNG ברזולוציה 1200 × 800 px עם תמונה ותוויות HEX שיתוף לוחות השראה ב-Slack, Notion, מצגות ומדריכי מותג

חילוץ פלטת צבעים מול מחלץ הצבע הדומיננטי: מה לבחור?

תשובה קצרה: השתמשו בחילוץ פלטת צבעים כשאתם רוצים סכמה מאוזנת של 5–12 צבעים, מסנני אווירה, טפטפת פיקסלים וייצוא ל-CSS/Tailwind. השתמשו במחלץ הצבע הדומיננטי כשצריך אחוזי כיסוי סטטיסטיים של K-Means וניתוח ניגודיות WCAG לממשק.

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

יכולת / מטרה חילוץ פלטת צבעים (הכלי הזה) מחלץ הצבע הדומיננטי
אלגוריתם ליבה גיוון לפי מרחק תפיסתי + סינון אווירה ב-HSL (Balanced, Vibrant, Pastel, Warm, Cool) אשכול K-Means לא מפוקח (k = 3..8) שמודד אחוז כיסוי שטח %
טפטפת פיקסלים ידנית לחיצה על התמונה לדגימה והצמדה של צבע מדויק מרכזי אשכול סטטיסטיים אוטומטיים
פלט עיקרי 5–12 דוגמיות הרמוניות + CSS :root / Tailwind + כרטיס PNG תרשים כיסוי מדורג ב-% + תצוגת כרטיס UI ראשי/משני/הדגשה + יחס ניגודיות WCAG
מתאים ל מעצבים גרפיים, מאיירים, לוחות מותג ויצירת פלטה ל-CSS/Tailwind ערכות נושא דינמיות, ביקורת רקע בצילום מוצר וניתוח התפלגות צבע
שאלות נפוצות

שאלות נפוצות על חילוץ פלטת צבעים וטוקנים לעיצוב

כל מה שצריך לדעת על חילוץ פלטת צבעים מתמונה החינמי של Utiliome.

איך בוחרים צבע מדויק מפרט קטן בתמונה?

פשוט לחצו על האזור הזה בתוך הקנבס. הטפטפת המובנית דוגמת את הפיקסל 1×1 שמתחת לסמן, מצמידה אותו כדוגמית הראשונה בפלטה ומעתיקה את קוד הצבע ללוח.

מה ההבדל בין המסננים מאוזן, חי ופסטל?

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

אפשר לייצא את הפלטה ישירות ל-Tailwind CSS או למשתני CSS?

כן. בסרגל הימני תחת '3. פורמט קוד והעתקת ייצוא', לחצו על 'העתקת משתני CSS (:root)' או 'העתקת הגדרות Tailwind' כדי להעתיק בלוק מוכן להדבקה עם כל הדוגמיות.

מה מייצר 'הורדת כרטיס פלטה PNG'?

הוא מרנדר כרטיס מצגת נקי בגודל 1200×800 פיקסלים: היצירה שהעליתם על קנבס סטודיו כהה, ומעליה שורת דוגמיות מעוגלות עם קודי HEX מדויקים — מוכן למצגות, Notion או פוסטים.

מתי להשתמש בחילוץ פלטה ומתי במחלץ הצבע הדומיננטי?

השתמשו בחילוץ פלטה כשאתם רוצים סכמת עיצוב של 5–12 דוגמיות, סינון אווירה וטפטפת. השתמשו במחלץ הצבע הדומיננטי כשחשוב לדעת את האחוז הסטטיסטי המדויק של כל אשכול צבע באמצעות K-Means.

התמונות נשלחות לשרת כדי לחלץ צבעים?

לעולם לא. כל דגימת הפיקסלים, כימות ההיסטוגרמה ורינדור כרטיס ה-PNG מתבצעים מקומית בדפדפן דרך HTML5 Canvas 2D API.