אתרי אינטרנט ואפליקציות
בחר צבעי מותג, רקע והדגשה, ולאחר מכן הדבק אותם ישירות במשתני CSS, ב-Tailwind או בערכת נושא של Android.
מחולל פלטות צבעים — צרו פלטות צבעים תואמות וייצאו אותן כקוד.
בחר צבע בסיס ותבנית צבעים, וקבל פלטת צבעים מאוזנת המכילה בין 3 ל-8 צבעים. קבע את הצבעים שאתה אוהב, בדוק עד כמה הטקסט הלבן והשחור קריא על כל אחד מהם, ואז העתק את הקודים כמשתני CSS, Tailwind, קובץ colors.xml של Android או Jetpack Compose. הכל פועל בדפדפן שלך, ופלטות הצבעים השמורות נשמרות במכשיר שלך.
הכינו לוח צבעים
פועל בדפדפן שלך
הפלטת הצבעים שלך
בחרו את הצבעים שאתם אוהבים, ואז לחצו על "Generate" כדי לשנות את השאר. לחצו על קוד הקסדצימלי כדי להעתיק אותו. לחצו על לוח הצבעים ולחצו על מקש הרווח כדי ליצור.
ייצא כקוד
פלטות שמורות
עדיין אין פלטות שמורות. לחץ על "שמור פלטת צבעים" כדי לשמור אחת במכשיר זה.
המדריך
מדריך לפלטת צבעים: שילובי צבעים, ניגודיות וייצוא לקוד
למדו כיצד פועלות תוכניות צבעים, בדקו את הניגודיות של הטקסט, והשתמשו בפלטת הצבעים שלכם בפרויקט אמיתי.
מהו מחולל פלטת צבעים?
פלטת צבעים היא קבוצה קטנה של צבעים שמשתלבים היטב זה עם זה. מעצבים בונים אותן על בסיס גלגל הצבעים: בוחרים צבע התחלתי אחד, ולאחר מכן בוחרים גוונים אחרים בזוויות קבועות ביחס אליו, כך שהתוצאה נראית מאוזנת ולא אקראית.
This generator does that for you. Choose a base colour and a scheme, lock the colours you like, and export the result as CSS, Tailwind, Android XML or Jetpack Compose code. Each swatch also shows its RGB and HSL values and how readable white and black text would be on it. Hex values are base 16: the Binary to Decimal Converter shows how they relate to ordinary numbers.
מדוע אנשים יוצרים פלטות צבעים
שקופיות, כרזות ומסמכים
השיגו סט צבעים תואם למצגת, לפוסט ברשתות החברתיות או לעיצוב לדפוס, בלי ניחושים.
תרשימים ולוחות מחוונים
צרו צבעים מובחנים אך הרמוניים עבור סדרות הנתונים, ובדקו את הניגודיות כדי שהתוויות יישארו קריאות.
הסבר על ערכות צבעים
| תוכנית | כיצד הוא בנוי | להרגיש ולהשתמש |
|---|---|---|
| אנלוגי | גוונים סמוכים, במרחק של 30° זה מזה | רגוע וטבעי. מתאים לרקעים ולממשק משתמש עדין. |
| מונוכרומטי | גוון אחד, דרגות בהירות שונות | נקי ומגובש. מתאים לעיצובים מינימליסטיים. |
| משלים | שני גוונים מנוגדים, המרוחקים זה מזה ב-180° | ניגודיות גבוהה. מתאים לצבע דומיננטי בולט. |
| משלים מפוצל | גוון בתוספת שני הגוונים הסמוכים לגוון המנוגד לו | ניגוד שבו רמת המתח נמוכה יותר מאשר בניגוד משלים. |
| משולש | שלושה גוונים, במרווח של 120° ביניהם | תוסס ומאוזן. זקוק לצבע דומיננטי אחד. |
| טטרדי (ריבועי) | ארבעה גוונים, במרווחים של 90° זה מזה | עשיר ומגוון. מתאים ביותר לשימוש עם צבע עיקרי אחד. |
כיצד להשתמש במחולל לוח הצבעים
- בחר צבע בסיס באמצעות תיבת הצבעים, או הזן קוד הקסדצימלי. בחר ערכת צבעים ואת מספר הצבעים הרצוי.
- לחץ על "Generate" כדי לנסות בסיס אקראי חדש. לחץ על "Lock" מתחת לכל צבע שברצונך לשמור.
- בדקו את הערות הניגודיות המופיעות על כל דוגמית. השתדלו להגיע ליחס של 4.5:1 או יותר בכל מקום שבו מופיע טקסט על רקע צבעוני.
- לחץ על קוד הקסדצימלי כדי להעתיק אותו, או פתח את האפשרות "ייצא כקוד" ובחר CSS, Tailwind, Android או Compose.
- לחץ על "שמור פלטת צבעים" כדי לשמור אותה במכשיר זה, על "העתק קישור" כדי לשתף אותה, או על "הורד PNG" כדי להוריד תמונה.
ניגודיות צבעים ונגישות
יחס הניגודיות
מספר הנע בין 1:1 (זהה) ל-21:1 (שחור על לבן), המשמש להשוואת הבהירות של שני צבעים.
WCAG AA
לפחות 4.5:1 לטקסט רגיל ו-3:1 לטקסט גדול (כ-24 פיקסלים, או 19 פיקסלים בגופן מודגש). זהו היעד המקובל מבחינה משפטית ומעשית.
WCAG AAA
לפחות יחס של 7:1 עבור טקסט רגיל. רמה מחמירה יותר המסייעת לאנשים עם ראייה לקויה.
אל תסתמכו רק על הצבע
כ-1 מכל 12 גברים סובל מליקוי כלשהו בראיית הצבעים. יש לשלב את הצבעים עם תוויות, סמלים או דפוסים, כדי שהמשמעות לא תאבד.
כיצד נראים פורמטי הייצוא
CSS: --color-1: #1f3a5f;
SCSS: $color-1: #1f3a5f;
Tailwind: 'palette-1': '#1f3a5f',
Android: #1F3A5F
כתיבה: val Palette1 = Color(0xFF1F3A5F)
JSON: ["#1f3a5f", "#ff5733"]
ב-Android Studio, הדביקו את קובץ ה-XML ב- res/values/colors.xml, או הוסף את שורות ה-Compose לקובץ שלך Color.kt . הערך של Compose כולל את קידומת האלפא FF, המציינת אטימות מלאה.
טיפים לבחירת פלטות צבעים מוצלחות
- השתמשו בצבע דומיננטי אחד, בצבע משלים אחד או שניים ובצבע ניטרלי. שילוב של כמויות שוות מכל צבע יוצר בדרך כלל מראה עמוס.
- בדקו את הניגודיות של הטקסט על כל צבע רקע לפני שתבחרו בפלטת צבעים.
- קבעו את צבע המותג שלכם והשתמשו בו כבסיס ליצירת רעיונות ולבחינת אפשרויות.
- הביטו בפלטת הצבעים על מסך אמיתי בגדלים שבהם היא תופיע, ולא רק כדוגמיות.
- בדקו גם במצב כהה: צבע שמתאים על רקע לבן לא בהכרח יתאים על רקע כמעט שחור.
הגבלות ופרטיות
פרטיות
פלטות הצבעים נוצרות בדפדפן שלך. פלטות הצבעים השמורות נשמרות באחסון המקומי של הדפדפן במכשיר שלך, ואינן מועלות לשום מקום.
מגבלות
הצבעים מוצגים במרחב הצבעים sRGB, והמראה עשוי להשתנות בהתאם למסך. לוחות הצבעים הם הצעות המבוססות על תיאוריית הצבעים, ואינן מהוות תחליף לבדיקות עם משתמשים אמיתיים. הכלי אינו בודק את התאמת האתר לאנשים הסובלים מעיוורון צבעים, מלבד רמת הניגודיות.
שאלות נפוצות
שאלות נפוצות על מחולל לוח הצבעים
איך פועל מחולל לוח הצבעים?
בחר צבע בסיס ותמה צבעונית, והכלי יהפוך את הצבע הבסיסי למערך צבעים תואמים באמצעות גלגל הצבעים. לחץ על "צור" כדי לקבל צבע בסיס אקראי חדש, או נעל את הצבעים שאתה אוהב וצור את השאר.
מה ההבדל בין ערכות הצבעים?
בשיטה האנלוגית נעשה שימוש בגוונים סמוכים ליצירת מראה רגוע. בשיטה המשלימה משלבים גוונים מנוגדים ליצירת ניגודיות. בשיטה המשלימה-חלקית ובשיטה המשולשת נעשה שימוש בשלושה גוונים המפוזרים באופן שווה, בשיטה הטטרדית נעשה שימוש בארבעה גוונים, ובשיטה המונוכרומטית נשמרים גוון אחד בלבד ומשתנים רמות הבהירות.
איך אפשר לשמור על צבע מסוים תוך כדי שינוי הצבעים האחרים?
לחץ על "נעילה" מתחת לכל דוגמית. צבעים שננעלו יישארו קבועים גם כשתלחץ על "צור", תשנה את הבסיס או תשנה את ערכת הצבעים. עריכת דוגמית באמצעות כפתור "ערוך" גם היא נועלת אותה.
מה המשמעות של ערכי הניגודיות?
כל דוגמית מציגה את יחס הניגודיות עבור טקסט לבן ועבור טקסט שחור על גבי הצבע הזה. תקן WCAG דורש יחס של לפחות 4.5:1 עבור טקסט רגיל (רמה AA), 7:1 עבור הרמה המחמירה יותר (AAA) ו-3:1 עבור טקסט גדול.
אילו פורמטים לייצוא זמינים?
רשימת HEX, משתני CSS, משתני SCSS, מערך JSON, קובץ תצורה של Tailwind, קובץ colors.xml של Android וערכי צבע של Jetpack Compose, כך שתוכלו להדביק את לוח הצבעים ישירות לתוך פרויקט.
האם אני יכול לשתף או לשמור את לוח הצבעים שלי?
כן. האפשרות "העתק קישור" יוצרת כתובת אינטרנט שפותחת מחדש את אותם הצבעים, האפשרות "הורד PNG" שומרת תמונה של לוח הצבעים, והאפשרות "שמור לוח צבעים" שומרת עד 12 לוחות צבעים בדפדפן זה.
מדוע הצבעים שלי נראים אחרת על מסך אחר?
מסכים נבדלים זה מזה ברמת הבהירות, בדיוק הצבעים ובפרופיל הצבעים. קודי ה-Hex מתארים את הצבע באופן מספרי, אך המראה שלו תלוי במסך. בדקו את הצבעים החשובים במכשירים שבהם ישתמשו המשתמשים שלכם.
כמה צבעים צריכים להיות בפלטה?
עיצובים רבים נראים טוב עם חמישה צבעים: צבע ראשי אחד, צבע משלים אחד או שניים, גוון רקע בהיר וגוון טקסט כהה. כלי זה מאפשר לך לבחור בין 3 ל-8 צבעים.
האם השימוש בגנרטור הוא חינמי, והאם הנתונים שלי נשמרים?
השירות חינמי. לוחות הצבעים נוצרים בדפדפן שלך. לוחות הצבעים השמורים נשמרים במכשיר שלך באחסון המקומי ואינם מועלים לשום מקום.
האם אפשר ליצור קישור לפלטה?
כן. הוסף ?colors=1f3a5f-ff5733-00aa88 לכתובת הדף, עם 2 עד 8 קודי הקסדצימלי מופרדים במקפים, ללא הסימן #.
ממשתמשים בכלי זה
ביקורות
טוען ביקורות…
המשך כך
עוד כלים בארגז
בדף הבית ניתן למצוא עוד עשרות כלים חינמיים שאינם דורשים מפתח API.
ממיר יחידות מידה
המר טקסט לאותיות גדולות, camelCase, title case, snake_case ועוד.
כלי פתוחספירת מילים
ספור מילים, תווים, משפטים וזמן הקריאה תוך כדי ההקלדה.
כלי פתוחמסיר רווחים
הסר רווחים מיותרים ותקן ריווח שורות לא מסודר.
כלי פתוחבודק הבדלים בטקסט
השווה בין שני טקסטים שורה אחר שורה כדי לראות מה השתנה.
כלי פתוח