מערבל צבעים

בחר שני צבעים, גרור את מחוון היחס, וקבל את קוד ה-HEX וה-RGB המדויק של התערובת — בתוספת רצועת גרדיאנט מלאה המציגה כל שלב מ-0% ועד 100%, כדי שתוכל לבחור בדיוק את נקודת האמצע שאתה צריך. שימושי למציאת גוון hover או גוון הדגשה שמתיישב באופן טבעי בין שני צבעי מותג.

מהו הכלי הזה?

מערבל צבעים מבצע אינטרפולציה ליניארית בין ערוצי האדום, הירוק והכחול של שני צבעים ביחס נבחר — אותה מתמטיקה שגרדיאנט משתמש בה באופן פנימי. ב-0% התוצאה היא צבע A, ב-100% היא צבע B, וב-50% היא הממוצע האריתמטי של כל ערוץ RGB.

זה שונה מערבוב צבע פיזי (שהוא חיסורי ותלוי בפיגמנט), וזה גם לא זהה לממוצע במרחב HSL — אינטרפולציה ליניארית ב-RGB היא מה שגרדיאנטים ב-CSS, כלי עיצוב ורוב כלי ה"צבע בין שני צבעים" משתמשים בו, כך שהתוצאה תואמת למה שהיית רואה בגרדיאנט דפדפן בין אותם שני צבעים.

למה להשתמש בו?

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

איך להשתמש

בחר צבע A וצבע B באמצעות בוררי הצבעים או על ידי הקלדת קוד HEX.
גרור את מחוון היחס כדי לקבוע כמה מצבע B לערבב פנימה.
קרא את ערכי ה-HEX וה-RGB המתקבלים מעל דוגמית הצבע.
לחץ על כל דוגמית בסולם 11 השלבים למטה כדי להעתיק את קוד ה-HEX שלה.

דוגמה

קלט

צבע A ‎#3B82F6‎ (כחול), צבע B ‎#F59E0B‎ (ענבר), יחס 50%

פלט

#9B9E7D — rgb(155, 158, 125)

בדיוק ב-50%, כל ערוץ RGB הוא הממוצע האריתמטי של ערוצי שני צבעי הקלט.

שאלות נפוצות

למה זה לא תואם למה שהייתי מקבל מערבוב צבע אמיתי?

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

האם זה זהה ל-linear-gradient ב-CSS בין שני הצבעים?

כן — ‎linear-gradient(colorA, colorB)‎ ב-CSS מבצע אינטרפולציה של ערוצי ה-RGB באותה דרך שהכלי הזה עושה, כך שהצבע שהיית רואה באמצע אותו גרדיאנט תואם לתוצאת ה-50% כאן.

למה הצבע המעורבב לפעמים נראה עכור או אפרפר?

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

האם אני יכול לערבב יותר משני צבעים בבת אחת?

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

האם כדאי לי להשתמש בזה או במחולל גוני הצבע?

אם אתה צריך צבע שמתיישב בין שני צבעים שונים — נניח, גוון מעבר בין הכחול של המותג שלך לבין ענבר הדגשה — השתמש במערבל הזה. אם אתה צריך גרסאות בהירות וכהות יותר של צבע אחד (מצבי hover, רקעים, סולם בסגנון Tailwind מ-50 עד 900), השתמש במקום זאת במחולל גוני הצבע: הוא שומר על הגוון והרוויה קבועים ומשנה רק את הבהירות, כך שכל תוצאה נשארת בבירור באותה משפחת צבעים.

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

שדות הטקסט מקבלים קודי HEX בני 6 ספרות, עם או בלי הסולמית המובילה # (למשל ‎3B82F6‎ או ‎#3B82F6‎). hex מקוצר בן 3 ספרות, סימון ‎rgb()‎ ושמות צבעים של CSS אינם מפוענחים שם — אבל אתה יכול לבחור כל צבע באופן חזותי עם בורר הצבעים המובנה ליד כל שדה, ושדה ה-HEX יתעדכן בהתאם.