מחולל פלטות צבעים
הרמוניית צבעים
Two colors opposite on the color wheel
פלטה שנוצרה
תצוגה מקדימה של הפלטה
ייצוא פלטה
:root {
--color-1: #3b82f6;
--color-2: #f6af3c;
}פרטים טכניים
איך מחולל פלטות הצבעים עובד
מה הכלי עושה
מחולל פלטות הצבעים יוצר סכמות צבעים הרמוניות מכל צבע בסיס באמצעות עקרונות מבוססים של תורת הצבע. בחרו צבע בסיס ובחרו מתוך שישה סוגי הרמוניה — משלימים, אנלוגיים, טריאדיים, טטרדיים, משלימים-מפוצלים או מונוכרומטיים — כדי ליצור מיד פלטה מתואמת. כל צבע שנוצר מציג ערכי HEX, RGB ו-HSL המוכנים להעתקה אל ה-CSS, כלי העיצוב או מדריך הסגנון שלכם.
מקרי שימוש נפוצים למפתחים
מעצבים ומפתחים משתמשים במחוללי פלטות כשמתחילים פרויקטים חדשים, יוצרים מערכות עיצוב או מרעננים צבעי מותג. תרחישים נפוצים כוללים יצירת צבעי הדגשה משלימים לצבע מותג ראשי, יצירת סכמות צבעים אנלוגיות להדמיות נתונים, בניית פלטות טריאדיות לנושאי UI תוססים, וחקר וריאציות מונוכרומטיות לעיצובים מינימליים. הכלי שימושי גם ליצירת סטים של מאפיינים מותאמים אישית ב-CSS וטוקני צבע ב-JSON עבור מערכות עיצוב.
סוגי הרמוניית צבע
הרמוניות צבע מבוססות על גלגל הצבעים. צבעים משלימים נמצאים זה מול זה (180°) ויוצרים ניגודיות גבוהה. צבעים אנלוגיים סמוכים זה לזה (±30°) ומרגישים קוהרנטיים. צבעים טריאדיים מרווחים באופן שווה במרווחים של 120° ליצירת תוססות מאוזנת. טטרדי (מלבן) משתמש בארבעה צבעים במרווחים של 90°. משלים-מפוצל מצמיד צבע בסיס לשני צבעים הסמוכים למשלים שלו. מונוכרומטי משנה את הבהירות והרוויה של גוון יחיד כדי ליצור פלטות עדינות ומאוחדות.
מלכודות נפוצות ומקרי קצה
פלטות שנוצרו הן נקודות התחלה, לא עיצובים סופיים. תמיד בדקו יחסי ניגודיות בין הצבעים שנוצרו כדי להבטיח נגישות. צבעי בסיס רוויים מאוד או כהים מאוד עשויים להפיק פלטות עם קריאות נמוכה. זכרו שצבעים על המסך נראים אחרת בהדפסה. בדקו פלטות מול תוכן אמיתי ורכיבי UI במקום להסתמך רק על תצוגות מקדימות של דוגמיות.
מתי להשתמש בכלי הזה לעומת קוד
השתמשו בכלי הדפדפן הזה לחקירה אינטראקטיבית וליצירת פלטות מהירה במהלך ספרינטים של עיצוב. עבור מערכות עיצוב לפרודקשן, יישמו יצירת פלטות באופן תכנותי באמצעות ספריות כמו chroma.js, culori או polished שיכולות ליצור הרמוניות, לאכוף יחסי ניגודיות ולהשתלב עם צינורות בנייה.