יוצר לוח צבעים - צור שילובי צבעים הרמוניים

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

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

כיצד הכלי בונה פלטה

הכלי ממיר את הצבע הראשי מקוד הקסדצימלי (כמו #3B82F6) למודל הצבעים HSL. HSL מתאר צבע באמצעות שלושה מספרים:

• גוון: מיקום הצבע בגלגל צבעים בעל 360 מעלות (0° הוא אדום, 120° הוא ירוק, 240° הוא כחול).
• רוויה: מידת העוצמה של הצבע, מ־0% (אפור) עד 100% (צבע טהור).
• בהירות: מידת הקרבה של הצבע לשחור או ללבן, מ־0% (שחור) עד 100% (לבן).

כל סוג הרמוניה מזיז את הגוון, את הבהירות או את שניהם, ואז ממיר את התוצאה בחזרה לקוד הקסדצימלי.

כיצד לחשב צבעים משלימים

הנוסחה:

$h' = (h + 180) \bmod 360$

כאשר h הוא גוון הצבע הראשי במעלות ו־h′ הוא הגוון החדש. פעולת mod מחזירה תוצאה שעברה סיבוב מלא אל הגלגל.

הרוויה והבהירות נשארות זהות.

דוגמה מחושבת: לכחול טהור, #0000FF, יש גוון של 240°, רוויה של 100% ובהירות של 50%. הוספת 180° נותנת גוון של 60°. המרת גוון 60° בחזרה להקסדצימלי, באותה רוויה ובאותה בהירות, מפיקה #FFFF00, שהוא צהוב. לכן הכלי מצמיד כחול לצהוב, ולא לכתום.

הדבר עלול לבלבל, משום שבשיעורי אמנות מלמדים לעיתים קרובות גלגל צבעים אחר, גלגל הפיגמנטים RYB (אדום־צהוב־כחול), שבו הצבע הנגדי לכחול הוא כתום. כלי זה פועל על גלגל HSL המבוסס על RGB ומשמש במסכים, ולכן זוגות הצבעים המשלימים שלו שונים מגלגל ערבוב הצבעים.

כיצד לחשב צבעים אנלוגיים

צבעים אנלוגיים נמצאים בקרבת הצבע הראשי על הגלגל. הכלי יוצר שני גוונים במרחק של 30° ושני גוונים במרחק של 60° מהגוון הראשי, כולם באותה רוויה ובאותה בהירות.

$h \pm 30^{\circ}, \qquad h \pm 60^{\circ}$

כאשר h הוא גוון הצבע הראשי.

דוגמה מחושבת: כחול, #0000FF (גוון 240°), מפיק גוון 270° (#8000FF), גוון 210° (#0080FF), גוון 300° (#FF00FF) וגוון 180° (#00FFFF). יחד עם הצבע הראשי, הפלטה כוללת חמישה צבעים.

כיצד לחשב צבעים טריאדיים

צבעים טריאדיים נמצאים במרחק של 120° זה מזה על הגלגל, ויוצרים שלישייה בעלת מרווחים שווים עם הצבע הראשי.

$h + 120^{\circ}, \qquad h + 240^{\circ}$

דוגמה מחושבת: אדום, #FF0000 (גוון 0°), מפיק גוון 120° (#00FF00, ירוק) וגוון 240° (#0000FF, כחול). שלישיית הצבעים היא אדום, ירוק וכחול — אותם שלושה גוונים המשמשים כצבעי יסוד במסכים דיגיטליים.

כיצד לחשב צבעים מונוכרומטיים

צבעים מונוכרומטיים שומרים על אותו גוון ועל אותה רוויה ומשנים רק את הבהירות. הכלי מזיז את הבהירות ב־15 וב־30 נקודות אחוז לכל כיוון, ומגביל אותה לטווח שבין 5% ל־95%.

$l \pm 15, \qquad l \pm 30$

כאשר l היא הבהירות של הצבע הראשי, בנקודות אחוז.

דוגמה מחושבת: כחול, #0000FF (בהירות 50%), מפיק בהירות 65% (#4D4DFF), בהירות 35% (#0000B3), בהירות 80% (#9999FF) ובהירות 20% (#000066).

בגלל מגבלות 5% ו־95%, צבע ראשי שכבר בהיר מאוד או כהה מאוד עלול להגיע לאותה מגבלה פעמיים. שחור, #000000, מפיק בהירות 15% (#262626), 5% (#0D0D0D), 30% (#4D4D4D) ושוב 5% (#0D0D0D), ולכן צבע אחד חוזר על עצמו.

שימוש בכלי

1. בוחרים צבע ראשי באמצעות בורר הצבעים, או מקלידים קוד הקסדצימלי כגון #3B82F6.
2. בוחרים סוג הרמוניה: משלים, אנלוגי, טריאדי או מונוכרומטי.
3. קוראים את הפלטה שנוצרה. כל דוגמית מציגה את הקוד ההקסדצימלי שלה על גבי כפתור.
4. לוחצים על הכפתור כדי להעתיק את הקוד ההקסדצימלי, או משתמשים ב־"העתקת כל הצבעים" כדי להעתיק את הפלטה כולה בבת אחת.

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

כל דוגמית צבע מציגה שתי תגיות קטנות: אחת לניגודיות מול לבן ואחת לניגודיות מול שחור. הכלי מחשב יחס ניגודיות באמצעות נוסחת WCAG (הנחיות לנגישות תוכן אינטרנט):

$C = \frac{L_{1} + 0.05}{L_{2} + 0.05}$

כאשר C הוא יחס הניגודיות.

L1 היא הבהירות היחסית של הצבע הבהיר יותר, ו־L2 היא הבהירות היחסית של הצבע הכהה יותר. הבהירות נגזרת מערכי האדום, הירוק והכחול של הצבע. תגית מציגה "AA" כאשר היחס הוא 4.5 ומעלה, שהוא המינימום של WCAG עבור טקסט בגודל רגיל. היא מציגה "!" כאשר היחס נמוך מ־4.5. ריחוף מעל תגית מציג את היחס המדויק. טקסט שחור על רקע לבן מקבל יחס של 21, הערך הגבוה ביותר האפשרי.

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

שאלות נפוצות

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

מדוע הכלי מצמיד כחול לצהוב במקום לכתום בצבעים משלימים? הכלי מסובב את הגוון ב־180° על גלגל HSL, המבוסס על האופן שבו מסכים מערבבים אור אדום, ירוק וכחול. גלגל הצבעים אדום־צהוב־כחול שלומדים בשיעורי אמנות מפיק זוגות משלימים שונים, משום שהוא מערבב פיגמנטים ולא אור.

כמה צבעים מפיק כל סוג הרמוניה? הרמוניה משלימה מפיקה 2 צבעים בסך הכול, כולל הצבע הראשי. הרמוניה טריאדית מפיקה 3. הרמוניה אנלוגית מפיקה 5. הרמוניה מונוכרומטית מפיקה 5.

באיזה מודל צבעים הכלי משתמש באופן פנימי? HSL (גוון, רוויה ובהירות). הוא ממיר את קוד הקסדצימלי שהוזן ל־HSL, מבצע את החישוב ואז ממיר את התוצאה בחזרה להקסדצימלי.

האם הכלי בודק אם הצבעים נגישים? כן. כל דוגמית מציגה אם יש לה ניגודיות מספקת מול לבן ומול שחור כדי לעמוד בתקן WCAG AA עבור טקסט רגיל, הדורש יחס של לפחות 4.5.

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

פורמטים של צבעים

הכלי כותב כל צבע שנוצר כקוד הקסדצימלי בן שש ספרות, שלפניו הסימן # (לדוגמה #ff0000 עבור אדום). קודים הקסדצימליים ממופים ישירות לערכי אדום, ירוק וכחול בטווח שבין 0 ל־255 עבור כל ערוץ. הצבע הראשי מוצג בדיוק כפי שהוזן, ולכן קיצור בן שלוש ספרות כגון #F00 נשאר בצורה הקצרה. קודים בני שלוש ספרות מייצגים את אותו צבע כמו הצורה בת שש הספרות: כל ספרה מוכפלת, ולכן #F00 הוא #FF0000. HSL הוא דרך חלופית לתיאור אותם צבעים, באמצעות גוון, רוויה ובהירות במקום כמויות של אדום, ירוק וכחול.