אני מבלה כמות מפתיעה של היום שלי איפשהו בין קובץ עיצוב לגיליון סגנונות, דוחף צבע אחד לכיוון אחר עד שמצב ריחוף, גבול או עצירת שיפוע נראים נכון. במשך שנים עשיתי את החשבון בראש או גלגלתי אותו בבורר, וזה בסדר עד שאתה צריך את הצבע המדויק באמצע הדרך בין כחול מותג לנייטרלי חם ואתה צריך את זה כקוד משושה שאתה יכול להדביק אז בניתי א מערבל צבעים על Toolz.dev המשלב שני צבעים עם יחס שאתה שולט בו, מציע את אותם מצבי מיזוג שעורך תמונות משתמש בו, ומעביר לך את התוצאה ב-HEX, RGB ו-HSL. זה המדריך אליו ולמה " ערבוב צבעים" פירושו על מסך.
TL;DR: מערבל צבעים ממזג שני צבעים לאחד.The Toolz מערבל צבעים אינטרפולציה שני צבעים עם יחס מתכוונן, תומך W3C מצבי תערובת להפרדה (כפל, מסך, שכבת-על, להכהות, להבהיר, הבדל, ממוצע), בונה שיפוע של שלבי ביניים בין הצבעים, ומוציא כל תוצאה כמו HEX, RGB, ו HSL.זה מקבל hex, rgb (), hsl (), ו CSS שמות צבע, והוא פועל לחלוטין בצד הלקוח.
איך מערבבים שני צבעים על מסך?
התשובה הפשוטה היא ממוצע משוקלל של שני הצבעים' ערוצים אדום, ירוק וכחול. לערבב אדום (255, 0, 0) וכחול (0, 0, 255) בחלקים שווים, אתה ממוצע כל ערוץ: אדום הופך (255+0)/2 = 128, ירוק נשאר 0, כחול הופך (0+255)/2 = 128, נותן (128, 0, 128), שהוא המשושה #800080, סגול מוצק העבר את המשקל לכיוון צד אחד ואתה מחליק לאורך הקו בין שני הצבעים זה בדיוק מה שמחוון היחס עושה: ב-0 אחוז אתה שומר על הצבע הראשון, ב-100 אחוז אתה נוחת על השני, ו-50 אחוז הוא הפיצול הזוגי.
זוהי אותה אינטרפולציה שבה משתמש שיפוע CSS של שתי עצירות, וזו הסיבה שנקודת האמצע של linear-gradient(red, blue) האם זה סגול המיקסר הופך את הקשר למפורש גם על ידי ציור השיפוע בין שני הצבעים שלך כרצועה של דוגמיות, שכל אחת מהן תוכל להעתיק כעצירת ביניים אם אי פעם רצית "שלושה צבעים מרווחים באופן שווה בין שני אלה," רצועת השיפוע היא הדרך המהירה ביותר להשיג אותם.
אזהרה כנה אחת, כי זה מפתיע אנשים: ממוצע ערוצי RGB הוא לא איך פיגמנטים מתערבבים. על מסך, הצבעים קלים ומשתלבים באופן תוסף; בערכת צבעים, הם פיגמנט ומשתלבים באופן חיסור. ערבוב מגמות אור אדום וירוק לעבר זית עמום ולא הצהוב החי שהיית מקבל מצבע, כי אתה ממוצע ערכי אור, לא ממזג פיגמנט. זה לא באג בכלי, זה הטבע של sRGB, והתיקון כשאתה רוצה תוצאה חיה יותר הוא לערבב גוונים שיושבים קרוב יותר זה לזה על הגלגל ממיר צבע שימושי לצד המיקסר כאשר אתה רוצה לראות את אותו צבע מבוטא בפורמטים בזמן שאתה חושב על גוון.
מה ההבדל בין מצבי מיקס למיזוג?
מיקס הוא הממוצע המשוקלל שתואר לעיל: הוא תמיד נוחת איפשהו על הקו הישר בין שני הצבעים מצבי המיזוג הם משהו אחר לגמרי. הן פעולות מיזוג השכבות של עורכי תמונות, המתוקנות עבור האינטרנט ב- W3C קומפוזיציה ומיזוג רמה 1 מפרט, וכל אחד משלב את הערוצים עם נוסחה שונה ולא ממוצע פשוט.
| מצב | נוסחה לכל ערוץ (ערכים 0 עד 1) | השפעה |
|---|---|---|
| מיקס | b (משוקלל לפי יחס) |
ממוצע משוקלל, נוחת בין שני הצבעים |
| להכפיל | a x b |
תמיד כהה יותר; לבן משאיר צבע ללא שינוי, שחור מאלץ שחור |
| מסך | a + b - a x b |
תמיד קל יותר; היפוך של הכפל |
| שכבת-על | הכפל או מסך לפי בסיס | מגביר ניגודיות |
| לְהַחשִׁיך | min(a, b) |
שומר על הערוץ הכהה יותר |
| לְהַבהִיר | max(a, b) |
שומר על הערוץ המצית |
| הבדל | abs(a - b) |
מרחק ערוץ; צבעים זהים נותנים שחור |
| ממוצע | (a + b) / 2 |
הממוצע הלא משוקלל של שניהם |
האינטואיציה שכדאי לשאת: הכפל תמיד מתכהה כי הכפלת שני שברים נותנת שבר קטן יותר, אז אדום כפול כחול הוא שחור (לכל צבע חסר הערוץ שיש לשני) המסך תמיד מתבהר כי הוא מוחל כפול על הערכים ההפוכים ההבדל נותן לך את המרחק ערוץ אחר ערוץ, וזו הסיבה ערבוב צבע עם עצמו תחת הבדל מייצר שחור טהור במיקסר, מחוון היחס מתנהג אז כמו אטימות שכבה: הוא דוהה את התוצאה המעורבת על פני הצבע הראשון, כך שתוכל לחייג את האפקט מעדין למלא.
במה שולט מחוון היחס?
היחס קובע עד כמה הצבע השני, או התוצאה המשולבת של המצב הנבחר, מוחל על הצבע הראשון. תחשוב על זה כעל אטימות בשכבה העליונה. ב-0 אחוז, השכבה העליונה בלתי נראית ואתה רואה את הצבע הראשון ללא נגיעה. ב-100 אחוז, השכבה העליונה אטומה לחלוטין ואתה מקבל את התערובת המלאה למצב הזה. ב-50 אחוז, אתה מקבל פיצול אחיד. עבור מיקס רגיל, זה מצטמצם לממוצע המשוקלל המוכר; עבור מצב כמו Multiply, זה מאפשר לך להחיל כהה עדינה ולא את האפקט המלא.
המודל המאוחד הזה הוא מכוון, כי זה אומר שמחוון אחד עושה את אותה עבודה רעיונית בכל מצב. בפועל אני משתמש ביחסים נמוכים כדי לדחוף מעט צבע לכיוון אחר (מצב ריחוף שהוא " הכפתור, אבל 15 אחוז לכיוון black") ויחסים גבוהים כשאני רוצה את התערובת המלאה מחולל גרדיאנט ממשיך היכן שהמיקסר עוזב כאשר אתה רוצה להפוך זוג צבעים מעורבים לשיפוע CSS מלא מרובה עצירות.
איך אני מקבל את הצבע המדויק באמצע הדרך בין שני צבעים?
הגדר את המצב לערבב ואת היחס ל-50, והתוצאה היא נקודת האמצע המדויקת. אתה יכול גם לקרוא אותו ישר מרצועת השיפוע: הדוגמית המרכזית היא צבע חצי הדרך. כאשר אתה צריך מספר צבעים מרווחים באופן שווה בין שתי נקודות קצה, העלה את ספירת צעדי השיפוע והעתק את הדוגמיות במיקומים שאתה רוצה. זו המשימה היומיומית שעבורה נבנה המיקסר, בין אם אתה מייצר גוונים לפלטה, מרווח בין צבעי ויזואליזציה של נתונים, או מציאת הנייטרלי שיושב בין שני צבעי מותג.
לבניית משפחות שלמות בצבע יחיד במקום מיזוג שתיים, ה מחולל גווני צבע האם ההתאמה הטובה יותר, מכיוון שהוא מערבב צבע אחד לכיוון לבן, שחור ואפור כדי לייצר גוונים, גוונים וגוונים. וכשאתה בוחר צבעים לטקסט או לממשק משתמש, הפעל את התוצאה דרך בוחר צבעים ובדיקת ניגודיות, כי צבע שמתערבב יפה עדיין יכול להיכשל בסף קריאות. זרימת העבודה הרחבה יותר, מקטיף לבדיקה ועד משלוח, מונחת ב- ערכת כלים למפתחי אינטרנט מדריך.
מדוע הצבעים המעורבים שלי נראים לפעמים בוציים או כהים?
שני דברים גורמים לכך, ושניהם עוסקים במרחב הצבעים ולא בכלי הראשון הוא חוסר ההתאמה התוסף מול החיסור שכבר הוזכר: ממוצע גוונים מרוחקים ב-RGB נסחף לכיוון אפור, אז צבעים הפוכים בגלגל מתערבבים למשהו משעמם השני הוא שערכי sRGB מקודדים בגמא, לא אור ליניארי ממוצע פיזי אמיתי של אור ימיר תחילה למרחב ליניארי, ממוצע, ואז ימיר בחזרה, מה ששומר על נקודות אמצע בהירות יותר רוב הכלים, שיפועי CSS ועורכי תמונות יתערבבו ישירות ב-sRGB מקודד גמא מכיוון שהוא מהיר, צפוי ותואם למה שמעצבים מצפים משיפוע, אז המיקסר הזה עושה את אותו הדבר אם אתה רוצה תערובת בהירה יותר, מערבבים גוונים קרובים יותר, נשען על מצב המסך, או להגיע למרחב אחיד מבחינה תפיסתית כמו OKLCH ב-CSS הסופי שלך כלים מקוונים לפרטיות נתונים המדריך מסביר מדוע, נקודות אמצע בוציות או לא, ביצוע מתמטיקה זו בדפדפן שלך במקום בשרת היא ברירת המחדל הנכונה לעבודת עיצוב שאתה מעדיף לשמור מקומית.
שאלות נפוצות
איך מערבבים שני צבעים?
כדי לערבב שני צבעים אתה ממוצע שלהם אדום, ירוק, וכחול ערוצים, משוקלל על ידי כמה של כל צבע שאתה רוצה.50/50 לערבב של אדום (255, 0, 0) וכחול (0, 0, 255) ממוצעים ל (128, 0, 128), שהוא סגול כלי זה עושה את האינטרפולציה הזאת בשבילך ומאפשר לך להעביר את המשקל עם המחוון יחס, כך שאתה יכול לנחות בכל מקום בין שני הצבעים במקום רק את נקודת האמצע המדויקת.
מה ההבדל בין Mix ל-Multiply?
מיקס הוא ממוצע משוקלל שנוחת בין שני הצבעים, כך ערבוב אדום וכחול נותן סגול Multiply משלב אותם כמו דיו חופפים או מסנני אור עושים, מכפיל את ערכי הערוץ, כך שהוא תמיד מייצר צבע כהה כמו או כהה יותר משני הכניסות הכפלת אדום וכחול נותן שחור, כי כל צבע חסר הערוץ שיש לשני Multiply הוא מצב מיזוג מעריכת תמונה, לא ממוצע פשוט.
מדוע ערבוב של שני צבעים בהירים נותן לפעמים תוצאה בוצית?
מכיוון שממוצע ערוצי RGB מזיז את התוצאה לכיוון אפור בכל פעם ששני הצבעים יושבים רחוק זה מזה בגלגל הצבעים. אדום וירוק ממוצעים לחום-זית עמום ולא לצהוב חי, מכיוון שצבעי המסך מתערבבים כאור בעוד שהצהוב החי שאתה עשוי לצפות מגיע מערבוב פיגמנטים. לתערובת חיה יותר, ערבבו צבעים קרובים יותר בגוון, או נסו את מצב המסך, ששומר על התוצאות בהירות יותר.
האם אני יכול לערבב צבעים ב-HSL במקום RGB?
מערבל זה אינטרפולציה ב-RGB, וזה מה שעושים שיפוע CSS ועורכי תמונות כברירת מחדל, והוא מדווח על התוצאה גם ב-HSL. ערבוב ב-RGB הוא צפוי ותואם לאופן שבו שיפוע CSS דו-עצירות מעבד. גוון אינטרפולציה ב-HSL יכול לנוע לאורך זמן סביב גלגל הצבעים ולייצר גוונים בלתי צפויים בין גוונים, וזו הסיבה שאינטרפולציה של RGB היא ברירת המחדל הבטוחה יותר עבור תערובת למטרות כלליות.
מה משתנה מחוון היחס?
היחס קובע עד כמה הצבע השני, או התוצאה המשולבת, מוחל על הראשון. ב-0 אחוז אתה מקבל את הצבע הראשון ללא שינוי, ב-100 אחוז אתה מקבל את הצבע השני המלא או התערובת המלאה עבור המצב הנבחר, וב-50 אחוז אתה מקבל פיצול אחיד. עבור מצבי המיזוג הוא מתנהג כמו אטימות שכבה בעורך תמונה, דוהה את הצבע המעורב מעל הבסיס.
איך אני מקבל את הצבע באמצע הדרך בין שני צבעים?
הגדר את המצב לערבב ואת היחס ל-50 אחוז, והתוצאה היא נקודת האמצע המדויקת. אתה יכול גם לקרוא אותו מרצועת השיפוע, כאשר הדוגמית האמצעית היא צבע חצי הדרך. לשליטה עדינה יותר, הוסף עוד שלבים לשיפוע והעתק את דוגמית הביניים המתאימה למיקום שאתה צריך בין שני הצבעים.
למה משמשים מצבי מיזוג כמו מסך ושכבת-על?
הם מצבי מיזוג השכבות מעורכי תמונות, המוגדרים עבור הרשת במפרט W3C Compositing and Blending.מסך מבהיר ומשמש לזוהרים והדגשות, Multiply darkens ומשמש לצללים וגוונים, ו-Overlay מגביר את הניגודיות על ידי שילוב של השניים. תצוגה מקדימה שלהם במיקסר מאפשרת לך לחזות כיצד שתי שכבות צבעוניות ישתלבו לפני שתחיל זאת ב-CSS או בכלי עיצוב.
אילו פורמטים של צבע המיקסר מקבל?
המיקסר מקבל קודי hex (שלוש, שש או שמונה ספרות), ערכי rgb () ו-rgba (), ערכי hsl () ו-hsla (), ושמות צבעי CSS נפוצים כמו coral או rebeccapurple. לכל קלט יש דוגמית צבע מקורית שתוכל ללחוץ כדי לבחור באופן ויזואלי, וכל תוצאה מוצגת ב-HEX, RGB ו-HSL כך שתוכל להעתיק את הפורמט שגיליון הסגנונות שלך צריך.
האם מערבל הצבעים חופשי ופרטי?
כן מערבל הצבעים הוא לגמרי בחינם ללא הרשמה, ללא סימני מים וללא מגבלות שימוש, וכל חישוב קורה בדפדפן שלך הצבעים שאתה מזין לעולם לא מועלים, כך ששום דבר שאתה מערבב לא עוזב את המכשיר שלך, ומכיוון שהמתמטיקה פועלת באופן מקומי הכלי ממשיך לעבוד אם אתה מאבד את החיבור שלך לאחר טעינת הדף.
