גלגל צבעים
בחרו צבע על הגלגל, כווננו אותו במשטח הרוויה והבהירות, וקראו אותו בכל פורמט שהפרויקט שלכם משתמש בו, מ-#RRGGBB ועד oklch(). הכלי כולל גם דברים שבוררי צבעים אחרים מדלגים עליהם: שלוש גיאומטריות גלגל כולל גלגל הציירים המסורתי RYB, הרמוניות שבונות פלטה בשבילכם, ערוץ שקיפות, וייצוא של כל הפלטה בלחיצה אחת כמשתני CSS, SCSS או JSON. הכול מחושב בדפדפן שלכם.
RYB או RGB? שלושה גלגלי צבעים במקום אחד
המתג מצב גלגל משנה את סידור הגוונים על הגלגל:
- HSV ו-HSL הם גלגלים דיגיטליים. הגוונים מסודרים כפי שהאור מתערבב על מסך. ההבדל ביניהם הוא במשטח הריבועי: ב-HSV הפינה הבהירה ביותר היא הגוון הטהור, ואילו HSL ממקם גוונים טהורים באמצע הבהירות עם לבן מעליהם.
- RYB (ציירים) מסדר את הגוונים כפי שציירים מכירים אותם: אדום, צהוב וכחול כצבעי יסוד, עם כתום, ירוק וסגול ביניהם (ראו את מודל הצבעים RYB (באנגלית)). ההבדל בולט בעיקר בהרמוניות. בגלגל RYB המשלים של האדום הוא ירוק והמשלים של הכחול הוא כתום, הזוגות הקלאסיים מהאמנות. גלגל דיגיטלי מזווג אדום עם ציאן. אם פלטה “משלימה” מבורר צבעים רגיל נראתה לכם פעם לא נכונה, זו הסיבה.
הרמוניות צבעים: פלטה שנבנית לבד
בשדה הרמוניית צבעים בחרו כלל. הגלגל מסמן את הצבעים הנלווים ומתחתיו מופיעה פלטה מוכנה:
- משלים: צבע נגדי אחד. הניגודיות החזקה ביותר, מתאים למבטא בודד לצד צבע המותג הראשי.
- משלים מפוצל: שני השכנים של הצבע המשלים. ניגודיות כמעט זהה, אבל קל יותר לאזן.
- טריאדי: שלושה גוונים במרחק שווה על הגלגל. חי אך יציב, כשאחד מהם דומיננטי והשניים האחרים משמשים בצמצום.
- טטרדי (מרובע): ארבעה גוונים. ערכות עשירות לאיורים ולתרשימים, קשה לאזן בממשק אפליקציה.
- אנלוגי: השכנים הקרובים ביותר. שילוב רגוע לרקעים ולמעברים.
- מונוכרומטי: גוון אחד במספר רמות בהירות. הבחירה הבטוחה ביותר למצבי כפתור (מעבר עכבר, פעיל, מושבת).
את כל הפלטה מעתיקים בלחיצה אחת בפורמט שתבחרו: HEX, RGB, HSL, OKLCH רגילים, משתני CSS מוכנים להדבקה (--color-1: …), משתני SCSS או JSON לקוד. כדי לבדוק אם הפלטה שומרת על ניגודיות גם לאנשים שמתקשים להבחין בין גוונים, צלמו מסך והמירו אותו לגווני אפור.
המרת HEX, RGB, HSL, OKLCH ו-CMYK: הדביקו כל דבר, קבלו הכול
שדות הקלט מקבלים כמעט כל רישום צבע: #f80, #ff8800, הקס בן שמונה ספרות עם אלפא, rgb() ו-rgba(), hsl(), hwb(), lch(), oklch(), oklab(), cmyk(), 0xFF8800 וגם שמות צבע של CSS כמו rebeccapurple. לא משנה מה תזינו, תקבלו שבעה פלטים מסונכרנים: HEX, RGB, HSL, HSV, LCH, OKLCH ו-CMYK, כל אחד עם כפתור העתקה משלו.
מחוון אטימות (אלפא) מתחת לתצוגה המקדימה מעביר את הפלטים לצורות השקופות שלהם: #RRGGBBAA, rgba() ו-hsla(). התצוגה המקדימה מצוירת על רקע משבצות שח, כך שרואים את השקיפות מיד.
אסימון Tailwind CSS הקרוב ביותר לכל צבע
שני תגים מתחת לתצוגה המקדימה נותנים שם לצבע: שם צבע ה-CSS הקרוב ביותר (שימושי לפרוטוטייפים מהירים) ואסימון Tailwind הקרוב ביותר, לדוגמה orange-500. כך נשארים בתוך מערכת העיצוב במקום להמציא ערכים חד פעמיים. לחיצה על התג מעתיקה אותו.
זה עונה על השאלה שעולה בכל מסירת עיצוב: מעצב שלח לי קוד הקס, לאיזו מחלקת Tailwind היא הכי קרובה? ההתאמה מחושבת מול הפלטה המובנית של Tailwind CSS 4 (ראו את תיעוד הצבעים של Tailwind (באנגלית)), כך שאפשר להשתמש באסימון ישירות בשם המחלקה.
איזה פורמט צבע כדאי להשתמש בו?
| פורמט | שם מלא | מתי להשתמש בו |
|---|---|---|
| HEX | Hexadecimal | ברירת המחדל לאינטרנט. קצר, נתמך בכל מקום, קל להעתקה. שמונה ספרות מוסיפות אלפא. |
| RGB | Red, Green, Blue | כך מסכים חושבים. שלושה ערוצי אור מ-0 עד 255. הפורמט שרוב ה-API-ים וקוד ה-canvas מצפים לו. |
| HSL | Hue, Saturation, Lightness | לעריכה לפי העין. “קצת יותר בהיר” או “פחות רווי” זה שינוי של מספר אחד בלבד. |
| HSV | Hue, Saturation, Value | תוכנות גרפיקה. המודל שעליו מבוססים בוררי הצבעים ב-Photoshop וב-GIMP. |
| LCH | Lightness, Chroma, Hue | אחיד מבחינה תפיסתית. צעדים מספריים שווים נראים כצעדים חזותיים שווים, מה ש-HSL רק מעמיד פנים שהוא עושה. |
| OKLCH | OK Lightness, Chroma, Hue | הבחירה המודרנית ל-CSS. מתקן את הסטיות בגוון בכחולים שפוגעות ב-LCH. נתמך בכל הדפדפנים הנוכחיים ומתאים לאסימוני עיצוב. |
| CMYK | Cyan, Magenta, Yellow, Key | כיוון להדפסה. המרה משוערת לתיאום עם בית הדפוס, הערכים הסופיים נקבעים לפי פרופיל הצבע שלו. |
למה OKLCH אחיד יותר מבחינה תפיסתית ממודלים ישנים יותר מסביר יוצר מרחב Oklab, ביורן אוטוסון (Björn Ottosson), בהמאמר המקורי (באנגלית). את התחביר והתמיכה בדפדפנים מסכם MDN (באנגלית). איך פועל מודל ההדפסה מוסבר בערך CMYK בוויקיפדיה.
דברים קטנים שחוסכים זמן
- ההיסטוריה נשמרת לבד. 24 הצבעים האחרונים שורדים רענון דף. הם נשארים רק באחסון המקומי של הדפדפן שלכם ואף פעם לא נשלחים לשום מקום.
- טפטפת. בדפדפנים עם EyeDropper API (Chrome ו-Edge) בוחרים צבע מכל מקום על המסך, גם מחוץ לחלון הדפדפן. צבע מתוך תמונה או קובץ לוגו תמצאו בטפטפת צבעים אונליין.
- שליטה במקלדת. הגלגל ומשטח הרוויה והבהירות מגיבים למקשי החצים, כך שאפשר לכוונן צבע בצעדים קטנים.
- הגדרות קבועות מראש מכסות את צבעי הבסיס הנפוצים כשצריך רק נקודת התחלה מהירה.
שאלות נפוצות
איך ממירים OKLCH ל-HEX?
הדביקו ערךoklch() בשדה OKLCH וכל שאר הפלטים, כולל HEX, מתעדכנים מיד. זה עובד גם הפוך: הזינו HEX וקראו את ה-oklch() המתאים. הסתייגות אחת: OKLCH יכול לתאר גם צבעים מחוץ לטווח sRGB, וכאלה נחתכים לגבולות מה ש-sRGB מסוגל להציג. לכן oklch() רווי מאוד לא ייראה זהה לגרסת ה-HEX שלו על מסך עם גמוט רחב.
האם בטוח להשתמש ב-oklch() בקוד CSS בפרודקשן?
כן. כל הגרסאות הנוכחיות של Chrome, Edge, Firefox ו-Safari תומכות ב-oklch(), וזה הפך לרישום פופולרי לאסימוני עיצוב (Tailwind CSS 4 מגדיר את כל הפלטה שלו בפורמט הזה). לדפדפנים ישנים מאוד, הוסיפו שורת גיבוי בפורמט HEX לפניו. הכלי הזה נותן לכם את שני הערכים.