רוב הפלטות מתחילות בצבע אחד שמישהו כבר אוהב: כחול לגמרי, ירוק של לוגו, דוגמית בד לחתונה החלק הקשה הוא הכל אחרי הבחירה הראשונה הזו אילו צבעים הולכים עם זה, כמה אתה צריך, ולמה סט שנראה מאוזן בכלי עיצוב מתפרק ברגע שהטקסט יושב עליו?
צבע הרמוניה עונה על שתי השאלות הראשונות עם גיאומטריה פשוטה על גלגל צבעים ניגודיות עונה על השלישית, והיא זו שאנשים מדלגים מדריך זה מכסה את שניהם, עם ערכי HEX אמיתיים שאתה יכול לבדוק, ומראה כיצד החינמי מחולל לוחות צבעים הופך צבע בסיס אחד לשישה סוגים של פלטה.
TL;DR: מחולל פלטת צבעים מסובב צבע בסיס' גוון s סביב גלגל הצבעים HSL בזוויות קבועות (180 מעלות עבור משלים, 120 עבור טריאדי, 90 עבור טטראדי, 30 ו-60 עבור אנלוגי) או מזיז את הקלילות שלו כדי ליצור גוונים, גוונים וערכות מונוכרומטיות מחולל פלטת הצבעים Toolz עושה זאת בצד הלקוח, בחינם, ללא הרשמה: בחר בסיס, בחר אחד משישה מצבים, לחץ על דוגמית כדי להעתיק את קוד ה-HEX שלו, או העתק את כל הסט כמאפיינים מותאמים אישית של CSS. HSL אינו אחיד מבחינה תפיסתית, אז בדוק כל צמד טקסט ורקע מול יחסי ניגודיות של WCAG לפני שאתה שולח אותו.
מהו מחולל לוחות צבעים?
מחולל פלטת צבעים הוא כלי שלוקח צבע התחלתי אחד ומחשב ממנו צבעים קשורים באמצעות כללים קבועים, כך שהסט נראה מתואם ללא ניסוי וטעייה הכללים מגיעים מגלגל הצבעים: צבעים מנוגדים זה לזה ניגודיות, צבעים זה ליד זה מתמזגים, וצבעים מרווחים באופן שווה סביב איזון הגלגלים.
מחולל Toolz עובד בHSL, המתאר צבע כגוון, רוויה ובהירות הגוון הוא זווית מ 0 עד 360 מעלות סביב הגלגל (אדום ב 0, ירוק ב 120, כחול ב 240) רוויה היא כמה חי הצבע, מ 0% אפור ל 100% צבע מלא בהירות פועל מ 0% שחור ל 100% לבן מוגדר HSL עבור הרשת ב מודול צבע CSS רמה 4 מפרט, וכל דפדפן ממיר אותו לאותם ערכי RGB.
עבודה בHSL עושה כללי הרמוניה קל להביע צבע משלים הוא אותה רוויה וקלילות עם 180 הוסיף את הגוון זה תוספת אחת במקום הרבה להתעסק עם מחוונים RGB.
מהם ששת מצבי ההרמוניה?
כל מצב הוא מתכון להתרחקות מצבע הבסיס הנה בדיוק מה שעושה מחולל Toolz בכל אחד, שנלקח מקוד המקור שלו.
| מצב | מה משתנה | דוגמיות | עמדות גוון |
|---|---|---|---|
| גוונים & amp; גוונים | קלות בלבד, מוגדרת ל-90, 75, 60, ערך הבסיס, 35, 22 ו-12 | 7 | גוון בסיס |
| מונוכרומטי | קלילות ורוויה ביחד | 5 | גוון בסיס |
| משלים | גוון מתהפך ב-180 מעלות, עם בסיס בהיר יותר והשלמה כהה יותר | 4 | בסיס, בסיס + 180 |
| אנלוגי | צעדי גוון 30 מעלות לכל כיוון | 5 | -60, -30, בסיס, +30, +60 |
| טריאדי | גוון מרווח שליש מהמעגל זה מזה | 3 | בסיס, +120, +240 |
| טטראדי | הגוון מרווח רבע מהמעגל זה מזה | 4 | בסיס, +90, +180, +270 |
שני פרטים חשובים בפועל.Analogous, triadic ו tetradic לשמור על צבע הבסיס & #39;s רוויה ובהירות על כל דוגמית, אז הם רק לשנות גוון. Shades & amp; גוונים ומונוכרומטיים לשמור על הגוון ולשנות בהירות, כך שהם מייצרים גרסאות בהירות וכהות של צבע אחד.
דוגמה עובדת: כל מצב מ-#4466ee
הגנרטור נפתח עם #4466ee, כחול בינוני.הומר לHSL זה גוון 228, רוויה 83%, קלילות 60% הנה מה שכל מצב מחזיר לאותו בסיס אלו הם קודי HEX הכלי מדפיס, ותוכלו לשחזר אותם עם המרת HSL לRGB הסטנדרטית במפרט CSS.
טריאדי מוסיף 120 ו-240 לגוון: 228, אחר כך 348, ואז 108 (468 עוטף ל-108).
#4466ee hsl(228, 83%, 60%) blue
#ee4466 hsl(348, 83%, 60%) pink-red
#66ee44 hsl(108, 83%, 60%) green
שימו לב לתבנית. באותה רוויה וקלילות, סיבוב בשליש מהגלגל מערבב מחדש את אותם שלושת ערכי ערוצי RGB: 44, 66 ומקומות סחר ee.
משלים מוסיף 180, שנוחת על גוון 48, צהוב חם המצב כולל גם גרסה בהירה יותר של הבסיס וגרסה כהה יותר של המשלים, כך שתקבל ארבע דוגמיות: #8aa0f4, #4466ee, #eecc44 ו-#d2ac14.
אנלוגי צעדים 30 מעלות בכל פעם מ-168 עד 288: #44eecc, #44bbee, #4466ee, #7744ee, #cc44ee. זה נקרא כלהקה מצהבהב דרך כחול ועד סגול.
טטראדי מוסיף 90, 180 ו-270: #4466ee, #ee44bb, #eecc44, #44ee77.
מונוכרומטי שומר על גוון 228 ומחליף רוויה בקלילות בשני הכיוונים: #c4cded, #879ae8, #4466ee, #0936ec, #0225b1.
גוונים & amp; גוונים מגדיר את הקלילות ל-90, 75, 60, ערך הבסיס, 35, 22 ו-12: #d0d9fb, #8aa0f4, #4466ee, #4466ee, #0f2da3, #0a1c67, #050f38.
האחרון מראה מוזרות שכדאי לדעת סולם הגוונים משתמש בשלבי קלילות קבועים בתוספת הבסיס & #39;s קלילות משלו כאשר הבסיס יושב במקרה בדיוק 90, 75, 60, 35, 22 או 12 אחוזי קלילות, כפי שעושה #4466ee ב-60, שתי דוגמיות יוצאות זהות. דחף את קלילות הבסיס בשלב אחד אם אתה רוצה שבעה צבעים ברורים.
איך בוחרים את ההרמוניה הנכונה לעבודה?
בחר את ההרמוניה לפי כמה ניגודיות העיצוב צריך. סכימות ניגודיות נמוכות מרגישות רגועות וקל לשמור עליהן עקביות; סכימות ניגודיות גבוהות מושכות תשומת לב וקל להגזים בהן.
| מטרה | מצב התחלה טוב | למה |
|---|---|---|
| סולם צבעים של ממשק משתמש (100 עד 700) | גוונים & amp; גוונים | גוון אחד, צעדים קלים עד אפלים צפויים |
| מותג מינימלי, מגובש | מונוכרומטי | הכל חולק גוון, שום דבר לא מתנגש |
| קריאה לפעולה שבולטת | משלים | הגוון ההפוך הוא הניגוד החזק ביותר |
| מראה רך, טבעי | אנלוגי | גוונים שכנים מתמזגים |
| סט שובב, מאוזן | טריאדי | שלושה גוונים מרווחים באופן שווה, אף אחד לא דומיננטי |
| תרשימים עם מספר סדרות | טטראדי | ארבעה גוונים ברורים שעדיין מתייחסים |
כלל אצבע נפוץ לפריסות הוא לתת לצבע אחד לכסות את רוב השטח, שני לקחת נתח קטן יותר, ומבטא להופיע במשורה זה עובד היטב עם פלטות משלימות וטריאדיות, שבהן מתן מרחב שווה לכל הצבעים נוטה להיראות חזק.
למה פלטה נראית מאוזנת אבל קוראת רע?
פלטה יכולה להיראות מאוזנת ב-HSL ועדיין להיכשל על המסך מכיוון שקלילות HSL היא לא עד כמה צבע נראה בהיר לאדם. HSL מתייחס לכל גוון ב-60% בהירות כאל קל באותה מידה. הראייה האנושית לא.
הדוגמה המשלימה לעיל הופכת את זה לקונקרטי. #4466ee ו-#eecc44 שניהם בעלי בהירות HSL של 60%. הבהירות היחסית שלהם, המדד שבו משתמשות הנחיות הנגישות לתוכן אינטרנט עבור בהירות נתפסת, שונה מאוד: כ-0.17 עבור הכחול וכ-0.62 עבור הצהוב. הצהוב בהיר פי כמה לעין.
הפער הזה מופיע כניגודיות. באמצעות נוסחת WCAG, יחס ניגודיות = (L1 + 0.05) / (L2 + 0.05), כאשר L1 הוא הצבע הבהיר יותר ' בהירות:
| זוג | יחס ניגודיות | WCAG AA עבור טקסט רגיל (4.5:1) |
|---|---|---|
| טקסט לבן ב-#4466ee | בערך 4.77:1 | עובר |
| טקסט לבן ב-#eecc44 | בערך 1.57:1 | נכשל |
| טקסט שחור ב-#eecc44 | בערך 13.4:1 | עובר |
הגנרטור עצמו כבר מגיב לכך: כל דוגמית בוחרת טקסט תווית כהה או לבן מתוך אומדן בהירות, וזו הסיבה שהדוגמיות הצהובות מקבלות תוויות כהות. לעיצובים אמיתיים, הפעל את צמדי הטקסט והרקע שבהם אתה מתכנן להשתמש באמצעות א בודק ניגודיות צבעים. הספים מגיעים מ WCAG 2.2: 4.5:1 עבור טקסט רגיל ו-3:1 עבור טקסט גדול ברמה AA. ה מדריך ניגודיות צבעים עובר דרך מתמטיקה זוהר צעד אחר צעד.
איך מייצאים פלטה כמשתני CSS?
לחץ על העתק CSS והמחולל שם את הפלטה הנוכחית בלוח שלך כמאפיינים מותאמים אישית של CSS :root. השמות ממוספרים בשלבים של 100 בסדר דוגמיות. לדוגמא הטריאדית:
:root {
--color-100: #4466ee;
--color-200: #ee4466;
--color-300: #66ee44;
}
הדבק את זה בחלק העליון של גיליון סגנונות והפנה לצבעים בכל מקום:
.button-primary {
background: var(--color-100);
color: #ffffff;
}
המספור עוקב אחר סדר הדוגמיות, לא בהירות. בגוונים ומגבר; מצב גוונים שבמקרה עובר בהיר עד כהה, אז --color-100 הוא הגוון הקל ביותר במצב טריאדי או אנלוגי המספרים הם רק מיקומים שנה את שם המשתנים למשהו בעל משמעות כגון --brand, --accent ו --surface ברגע שבחרת, כי --color-200 לא אומר כלום לאדם הבא שקורא את ה-CSS שלך.
כדי להעתיק צבע בודד במקום זאת, לחץ על הדוגמית שלו. קוד HEX עובר ללוח והדוגמית מציגה את "Copied" לרגע.
אתה יכול לעשות חתונה או פלטת פסטל עם זה?
כן, כל עוד אתה מביא את צבע ההתחלה אין הגדרות קבועות מראש לחתונה או ערכות נושא שנאספו, כך שהפלטה טובה רק כמו הבסיס שאתה בוחר.
לחתונה לוקחים צבע ממשהו אמיתי: הפרחים, מלאי כרטיס ההזמנה, בד שמלת שושבינה הזן את קוד ה-HEX שלו ונסה כל מצב החל מירוק מרווה, #9caf88, החזרות משלימות #c2ceb6, #9caf88, לבנדר מאובק #9b88af ו-#755e8d עמוק יותר. הלבנדר הזה נגד מרווה הוא זיווג קלאסי, והמתמטיקה מצאה אותו בקליק אחד.
עבור פסטלים, התחל מבסיס חיוור ורווי רך כגון #a7c7e7. אנלוגי, טריאדי וטטראדי שומרים על הבהירות והרוויה הזו על כל דוגמית, כך שכל הסט נשאר רך. גוונים ומגבר; גוונים ומונוכרומטיים מזיזים בכוונה בהירות, כך שהם מוסיפים צבעים כהים, עד #0d1f30 עבור הכחול הזה. אין מחוון בהירות נפרד; צבע הבסיס הוא השליטה.
צבעי המסך והצבעים המודפסים שונים צג מערבב אור אדום, ירוק וכחול, בעוד שמדפסת מניחה דיו ציאן, מגנטה, צהוב ושחור על נייר, ולכמה צבעי מסך בהירים אין שווה ערך דיו מדויק אם פלטה עוברת על נייר מכתבים, הזמינו הוכחה מודפסת לפני הפעלה מלאה.
מהן הטעויות הנפוצות ומקרי השגיאה?
רוב בעיות הפלטה מגיעות מהקלט או מאמון במתמטיקה רחוק מדי.
הפלטה הופכת לכחולה בזמן שאתה מקליד. עד שתיבת הטקסט מחזיקה קוד HEX חוקי, המחולל נופל בחזרה ל #4466ee.ערך חצי מודפס כמו #9c או #9caf8 מציג את לוח ברירת המחדל הכחול השדה מקבל שלוש או שש ספרות hex, עם או בלי #, אז #9ca בדרכו אל #9caf88 מציג בקצרה פלטה עבור #99ccaa.
דוגמית הבסיס נמצאת במרחק צעד אחד. צבעים מעוגלים למספרי HSL שלמים לפני המרה חזרה, כך שחלק מהבסיסים לא עושים הלוך ושוב בדיוק. #c08081, למשל, חוזר בתור #c18182. ההבדל הוא יחידה אחת לכל ערוץ ובלתי נראה, אבל זה משנה אם אתה מתאים בדיוק לקוד מותג: שמור את ה-HEX הרשמי עבור הבסיס והשתמש באלה שנוצרו עבור השאר.
שימוש בכל צבע בכל מקום. פלטה אנלוגית של חמישה צבעים היא טווח לבחירה, לא חמישה צבעים שכולם צריכים עבודה.
דילוג על ניגודיות. כפי שמוצג לעיל, שני צבעים באותה בהירות HSL יכולים להיות שונים יותר מפי שלושה בבהירות. בדוק צמדי טקסט.
מצפה לאחידות תפיסתית. שלבי צל הם אפילו בקלילות HSL, לא באור שהם נראים אם אתה צריך סולם שנראה אחיד, התאם צעדים בודדים לפי עין או עבוד במרחב תפיסתי כמו OKLCH, שגם CSS Color 4 מגדיר.
איך זה בהשוואה לכלי צבע אחרים?
יצירת פלטות היא שלב אחד בזרימת עבודה ארוכה יותר הטבלה מציגה איזה כלי מתאים לכל שלב.
| משימה | כלי | מה זה נותן לך |
|---|---|---|
| מצא או דגום צבע התחלתי | בוחר צבעים | HEX, RGB ו-HSL לכל צבע |
| בנה סט מתואם | מחולל פלטת צבעים | שישה מצבי הרמוניה, ייצוא CSS |
| צור סולם עדין של צבע אחד | מחולל גווני צבע | רמפת גוון וצל ייעודית |
| מערבבים שני צבעים | מערבל צבעים | צבעי ביניים בין שתי כניסות |
| בדוק את קריאות הטקסט | בודק ניגודיות צבעים | יחס WCAG ולעבור או להיכשל |
אם הסולם חשוב יותר מההרמוניה, ה מדריך ליצירת גוונים וגוונים מעמיק יותר בבניית 50 עד 900 רמפות. כל כלי צבע רשום ב- רכזת כלים צבעוניים.
האם הגנרטור פרטי והאם הוא עובד במצב לא מקוון?
כן. כל המתמטיקה והעיבוד של HSL פועלים בדפדפן שלך עם JavaScript. שום דבר שאתה מקליד לא מועלה, ולאחר שהדף טוען את מחולל פלטות ממשיך לעבוד ללא חיבור לרשת העתקת דוגמית או ה-CSS נחשבת למגבלת שימוש יומית, שמתעדת את המצב שבו היית, לא את הצבעים שלך.
