Color — אפליקציית PWA לבחירת צבעים מהעולם האמיתי דרך המצלמה. כוון את הקרוסיר לחולצה, פרח, קיר, מסך — וקבל את הצבע במדויק ב-3 פורמטים, עם מחולל פלטה הרמונית מבוססת תיאוריית צבעים.
דגימת צבע חיה
הזרימה הטכנית של דגימת הצבע מהמצלמה:
- getUserMedia עם
facingMode: 'environment'— מצלמה אחורית - Hidden Canvas מצייר את ה-video frame בכל requestAnimationFrame
- getImageData קורא 5×5 pixels סביב מרכז התמונה
- ממוצע נע (average) של 25 הפיקסלים — דגימה יציבה גם ברעידות יד
- עדכון live של HEX, RGB, HSL ב-60fps
הקפא עוצר את הסמפלינג כדי לדגום בלי רעידות. תפוס שומר את הצבע הנוכחי לרצועה.
פלטה הרמונית — תיאוריית צבעים
לחיצה על צבע שתפסת פותחת modal עם 4 סוגי הרמוניה מבוססי גלגל הצבעים:
- משלים (Complement, +180°) — מקסימום ניגודיות, מושך עין
- סמוך (Analogous, ±30°/±60°) — הרמוני, רגוע, טבעי
- משולש (Triadic, +120°/+240°) — חי ומאוזן
- חד-גוני (Monochromatic) — וריאציות בהירות של אותו hue
בנוסף מציג 7 גוונים בהירים יותר (tints) ו-7 צללים כהים יותר (shades) — כל אחד עם ניגודיות הולכת ועולה ב-l מ-HSL.
פיצ'רים
- תפיסה מהירה — כפתור גדול במרכז, vibration feedback
- העתקה ישירה של HEX לקליפבורד
- ניגודיות טקסט אוטומטית — שם הצבע מופיע על הswatch בלבן או שחור לפי luminance (תקן WCAG)
- שמירת פלטות — אסוף 2+ צבעים ושמור כפלטה (IndexedDB)
- ייצוא — לחץ על פלטה שמורה כדי להעתיק את כל ה-HEX-ים
- Desktop fallback — זיהוי mobile/desktop, הצעה לפתוח בטלפון אם אין מצלמה אחורית
טכנולוגיות
- getUserMedia API עם environment camera + Permissions-Policy header
- Canvas getImageData לדגימת פיקסלים בזמן אמת — 60fps עם requestAnimationFrame
- המרות צבע מקוריות — RGB ↔ HEX ↔ HSL מתמטיקה מלאה
- WCAG luminance לחישוב צבע טקסט מתאים על כל רקע
- IndexedDB לשמירת פלטות + Clipboard API להעתקה
- Service Worker + PWA installable
עיצוב
פלטה charcoal-warm + cream — אפור-כהה ניטרלי שמאפשר לצבעים שנדגמים לזרוח. רקע (#1a1614), accent זהב (#fcd34d), טקסט קרם (#fef3c7). הסמל הוא conic-gradient — גלגל הצבעים עצמו.
האפליקציה הזו היא כלי דיזיינר אמיתי — שווה לאפליקציות בתשלום כמו Color Lookup Pro / Adobe Capture, אבל חינם ופועל בדפדפן.
