CodeKitHubמהו הכלי הזה?
סולם גוונים הוא סדרה של וריאציות של צבע אחד ברמות בהירות שונות, המשמש בעיצוב ממשקי משתמש עבור מצבי ריחוף, מצבים מושבתים, גבולות ורקעים שצריכים להתקשר לצבע המותג מבלי להיות זהים לו.
כלי זה ממיר את צבע הבסיס שלכם ל-HSL, שומר על גוון ורוויה קבועים, ומשנה את הבהירות מכ-95% (גוון קרוב ללבן) עד כ-10% (גוון קרוב לשחור), כאשר הצבע המקורי שלכם ממוקם בעמדתו הטבעית באמצע הסולם.
למה להשתמש בו?
- יוצר סולם בסגנון מערכת עיצוב (כמו סולם 50/100/200...900 של Tailwind) מכל צבע בודד, לא רק מפלטת ברירת מחדל קבועה.
- בחרו 7, 9 או 11 שלבים בהתאם לרמת הדיוק שאתם צריכים בסולם.
- כל שלב מציג את קוד ה-HEX המדויק שלו ואת אחוז הבהירות שלו — לחצו כדי להעתיק.
- שומר על גוון ורוויה קבועים לאורך כל הסולם, כך שכל הגוונים נקראים כקשורים בבירור לצבע הבסיס במקום לנדוד לכיוון אפור.
- חינם, מיידי ופועל באופן מקומי לחלוטין.
איך להשתמש
- בחרו את צבע הבסיס שלכם באמצעות בורר הצבעים או על ידי הקלדת קוד HEX.
- בחרו כמה שלבים תרצו בסולם (7, 9 או 11).
- קראו את קוד ה-HEX ואחוז הבהירות של כל גוון ישירות על הדוגמית שלו.
- לחצו על כל דוגמית כדי להעתיק את קוד ה-HEX שלה.
דוגמה
קלט
#3B82F6 (כחול בינוני), 9 שלביםפלט
9 גוונים מגוון קרוב ללבן (~95% בהירות) עד גוון קרוב לשחור (~10% בהירות), כאשר #3B82F6 עצמו ממוקם כשלב האמצעיהגוון והרוויה נשארים קבועים בכל 9 השלבים — רק הבהירות משתנה — כך שכל גוון נקרא בבירור כחלק מאותה משפחת צבעים.
שאלות נפוצות
האם זו אותה מערכת שבה Tailwind CSS משתמש לסולמות הצבעים שלו?
זהו אותו רעיון בסיסי (גוון/רוויה קבועים, בהירות משתנה) אך לא שכפול מדויק של הפלטה הספציפית של Tailwind — סולמות ה-50-900 של Tailwind כווננו ידנית על ידי מעצבים, ולא נוצרו על ידי נוסחה אחת. כלי זה נותן לכם מבנה דומה שנוצר מכל צבע שתבחרו, שימושי כאשר צבע הבסיס שלכם אינו אחד מברירות המחדל של Tailwind.
למה הצבע שלי נראה כמעט זהה בשני שלבים סמוכים?
זה יכול לקרות ליד הקצוות הבהירים מאוד או הכהים מאוד של הסולם, שבהם הבהירות הנתפסת משתנה לאט יותר ממה שהאחוז המספרי מרמז (תכונה ידועה של תפיסת צבע אנושית, לא ספציפית לכלי זה). בחירה בפחות שלבים (7 במקום 11) מפזרת את ערכי הבהירות רחוק יותר זה מזה ומצמצמת דוגמיות כמעט זהות.
האם אפשר להשתמש בגוונים האלה ישירות כמאפייני CSS מותאמים אישית?
כן — העתיקו כל קוד HEX והדביקו אותו במשתני ה-CSS שלכם (למשל, --color-brand-100 עד --color-brand-900), והתאימו את מיקום הסולם לכל סולם שמות שהפרויקט שלכם משתמש בו.
האם כדאי לי להשתמש בזה או במערבל הצבעים?
אם אתם יוצרים גרסאות בהירות וכהות יותר של צבע אחד — מצבי ריחוף, רקעים עדינים, גבולות שמתקשרים לצבע המותג — השתמשו במחולל הגוונים הזה. אם במקום זאת אתם צריכים את הצבע שבין שני צבעים שונים (למשל, שלב בין הכחול הראשי שלכם לכתום המשני), השתמשו במערבל הצבעים, שמבצע אינטרפולציה בין ערוצי ה-RGB של שני צבעים ביחס כלשהו במקום לשנות את הבהירות של צבע אחד.
מה קורה אם צבע הבסיס שלי כבר בהיר מאוד או כהה מאוד?
צבע הבסיס תמיד יושב בשורה האמצעית, עם גוונים העולים לכ-95% בהירות מעליו וגוונים היורדים לכ-10% מתחתיו. אם צבע הבסיס שלכם כבר קרוב ללבן, מחצית הגוונים הבהירים של הסולם תידחס לטווח בהירות צר (שורות כמעט זהות) בעוד שמחצית הגוונים הכהים תתפזר על פני טווח רחב — ולהפך עבור בסיס כהה מאוד. לסולם המפוזר באופן אחיד ביותר, התחילו מגרסה בעלת בהירות בינונית של הצבע שלכם (בערך 40-60% בהירות).
האם אפשר לייצר גם טונים (הצבע מעורבב עם אפור)?
לא — כלי זה משנה רק את הבהירות תוך שמירה על רוויה קבועה, מה שמייצר גוונים בהירים וכהים אך לא טונים. אם אתם רוצים סולם מעומעם יותר, הפחיתו קודם את הרוויה של צבע הבסיס שלכם (בחרו גרסה אפרפרה יותר שלו בבורר הצבעים) וצרו את הסולם מתוכו; כל שלב יירש את הרוויה הנמוכה יותר.