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

צבע בסיס
שלב
%
כמה בהיר/כהה יותר כל גוון, בכל שלב (1–25%).
מספר גוונים
כמה גוונים בהירים וכהים לייצר בכל צד של הצבע הבסיסי.
גרדיאנט
גוונים שנוצרו

בחר צבע בסיס, אחוז שלב ומספר — כל גוון בהיר וכהה מחושב מיידית בדפדפן שלך.


אודות גנרטור גוני צבע

מחולל גווני הצבע מרחיב צבע בודד לטווח מלא של גוונים בהירים וכהים. תנו לו צבע בסיס והוא מייצר גוונים בהירים בהדרגה בצד אחד וגוונים כהים בהדרגה בצד השני — סולם הדרגתי קלאסי מסוג 50 עד 900 המשמש במערכות עיצוב מודרניות.

שתי בקרות מעצבות את הפלט: אחוז השלב קובע עד כמה כל גוון הופך בהיר או כהה יותר (1–25% לשלב), והכמות קובעת כמה גוונים בהירים וכהים מופיעים בכל צד של הבסיס, עד עשרה. רצועת גרדיאנט מציגה תצוגה מקדימה של הסולם כולו במבט אחד.

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

כיצד להשתמש ב-גנרטור גוני צבע

  1. בחרו צבע בסיס עם בורר הצבעים או הקלידו ערך; לחצו על "צבע אקראי" לקבלת השראה.
  2. קבעו את אחוז השלב כדי לשלוט עד כמה כל גוון מתבהר או מתכהה.
  3. בחרו את כמות הגוונים כדי להחליט כמה גוונים בהירים וכהים מופיעים בכל צד.
  4. לחצו על גוון כדי להעתיק אותו, או השתמשו ב"העתק הכול" וב"העתק משתני CSS" עבור הסולם המלא.

שאלות נפוצות

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

גוון בהיר הוא צבע הבסיס שלכם מעורבב לכיוון לבן (בהיר יותר), בעוד גוון כהה הוא הבסיס מעורבב לכיוון שחור (כהה יותר). המחולל מייצר את שני הכיוונים בו-זמנית, מסומנים "בהירים (Tints)" ו"כהים (Shades)" סביב צבע הבסיס שלכם.

קבעו את הכמות ל-4 או 5 לכל צד כך שתקבלו תשעה עד אחד עשר גוונים בסך הכול, עם הבסיס באמצע. שלב של כ-8–10% בדרך כלל מעניק ריווח דומה לסולמות 50–900 המשמשים במסגרות עבודה פופולריות.

שלבים קטנים (3–6%) מעניקים וריאציות עדינות למצבי מעבר עכבר וגבולות; שלבים בינוניים (8–12%) מתאימים לסולמות מערכת עיצוב מלאה; שלבים גדולים (15–25%) יוצרים סטים בניגודיות גבוהה בסגנון פוסטר. עקבו אחר תצוגת הגרדיאנט המקדימה — סולם טוב צריך להתכהות באופן אחיד וללא פסים.

כן. "העתק משתני CSS" מפיק את הסולם כולו כמשתני CSS מותאמים בעלי שם, ו"העתק הכול" נותן רשימה פשוטה של ערכים שאפשר להדביק בכל מקום, ממפות SCSS ועד לאובייקטי ערכת נושא ב-JavaScript.

שתף זאת

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

הוסיפו כלי חינמי זה לאתר שלכם — העתיקו והדביקו את הקוד שלהלן.