איך להשתמש בו

הזינו צבע בסיס או בחרו אחד. ״בסיס אקראי חדש״ בוחר אחד עבורכם.
בחרו הרמוניה. "גוונים כהים ובהירים" יוצר סולם בן 11 שלבים מבהיר מאוד לכהה מאוד.
נעלו כל צבע שברצונכם לשמור, ואז המשיכו לחקור צבעי בסיס אחרים.
בחרו HEX, מאפייני CSS מותאמים אישית או JSON, הגדירו שם והעתיקו את הקוד.

איך זה עובד

הרמוניות מתקבלות על ידי סיבוב הגוון סביב גלגל הצבעים: משלים מוסיף את הגוון הנגדי (180°), אנלוגי מוסיף שכנים במרחק 30° ו-60° בכל צד, טריאדי משתמש בשלושה גוונים במרחק 120° זה מזה, טטראדי בארבעה גוונים במרחק 90° זה מזה, ומשלים מפוצל בשני הגוונים הסמוכים למשלים (150° ו-210°).

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

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

דוגמאות

צבע מותג עם צבע דגש

בסיס #3366cc עם „משלים“ מוסיף #8c6500, אוקרה חמימה עם אותה בהירות OKLCH. צמדי כחול וצהוב-כתום הם בחירה נפוצה להדגשה לצד מותג כחול.

אסימוני עיצוב לספריית רכיבים

בחרו „גוונים כהים ובהירים“, הגדירו את השם „primary“ וייצאו משתני CSS. תקבלו --primary-50 עד --primary-950, מוכנים לרקעים (50–100), גבולות (200–300) וטקסט (700–900).

שמירה על צבע אחד בזמן התנסות

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

שאלות נפוצות

מדוע הצבעים שלי שונים מכלי גלגל צבעים של HSL?

הכלי הזה מסובב גוון ב־OKLCH, מרחב צבע תפיסתי. זוויות הגוון שלו אינן תואמות בדיוק ל־HSL, כך שה״נגדי״ של צבע עשוי להיות בגוון מעט שונה מזה שמציג כלי HSL.

האם אפשר להשתמש ב־JSON ב־Tailwind CSS?

ה־JSON ממפה שמות לערכי HEX, באותו מבנה ש־Tailwind מקבל עבור צבע בהגדרת ה־theme שלו. ב־Tailwind 4 אפשר גם להדביק את משתני ה־CSS בתוך בלוק @theme לאחר שינוי שמם ל־--color-…

האם הפלטות שנוצרות נגישות?

לא באופן אוטומטי. הרמוניה אינה אומרת דבר על ניגודיות בין טקסט לרקע. בדקו כל זוג שאתם מתכננים להשתמש בו בכלי Contrast Checker.

פרטיות

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