בורר צבעים אונליין
בחרו צבע בגלגל, כווננו אותו בעדינות בבד הרוויה, וקראו אותו חזרה בכל פורמט שהפרויקט שלכם מדבר בו — מ-#RRGGBB ועד oklch(). הבורר הזה עושה גם את החלקים שכלים אחרים מדלגים עליהם: שלוש גיאומטריות גלגל כולל גלגל הציירים RYB, שכבות הרמוניה שבונות עבורכם פלטה, ערוץ שקיפות, וייצוא בלחיצה אחת של הפלטה כולה כמשתני CSS, SCSS או JSON. הכול מחושב מקומית בדפדפן שלכם.
שלושה גלגלים, לא אחד
בורר מצב גלגל משנה את הגיאומטריה של הגלגל עצמו:
- HSV ו-HSL הם הגלגלים הדיגיטליים — הגוונים מסודרים באופן שבו מסכי RGB מערבבים אור. ההבדל ביניהם הוא איך הבד המרובע מתנהג: הפינה הבהירה ביותר ב-HSV היא הגוון הטהור, בעוד HSL ממקם את הגוונים הטהורים ב-50% בהירות עם לבן מעליהם.
- RYB (ציירים) מסדר את הגוונים כפי שאמנים למדו: אדום, צהוב וכחול כצבעי יסוד, עם כתום, ירוק וסגול ביניהם. הערך המעשי שלו בולט בהרמוניות — בגלגל RYB, המשלים של האדום הוא ירוק והמשלים של הכחול הוא כתום, זוגות הפיגמנט הקלאסיים, בעוד גלגל דיגיטלי מזווג אדום עם ציאן. אם פלטה “משלימה” מבורר רגיל אי פעם נראתה לכם שגויה, זו הסיבה.
הרמוניות שבונות את הפלטה בשבילכם
בחרו כלל תחת הרמוניית צבעים והגלגל מסמן את הצבעים הנלווים, שמופיעים כפלטה מוכנה:
- משלים — צבע נגדי אחד. הניגודיות החזקה ביותר; השתמשו בו למבטא בודד כנגד צבע מותג דומיננטי.
- משלים מפוצל — שני השכנים של הצבע המשלים. כמעט אותה כמות ניגודיות, הרבה יותר קל לאזן.
- טריאדי — שלושה גוונים במרווח שווה. חי אך יציב; תנו לאחד מהם לשלוט והשתמשו בשניים האחרים בצמצום.
- טטרדי (מרובע) — ארבעה גוונים. ערכות עשירות לאיורים ולוויזואליזציית נתונים; קשה לאזן בעבודת ממשק.
- אנלוגי — השכנים המיידיים. מתח נמוך, טוב לרקעים ולמעברי צבע.
- מונוכרומטי — גוון אחד במדרגות בהירות. הבחירה הבטוחה ביותר למצבי ממשק (מעבר עכבר, פעיל, מושבת).
לוח הפלטה מעתיק את כל הסט בלחיצה אחת, בפורמט שתבחרו: HEX, RGB, HSL, OKLCH רגילים, משתני CSS מוכנים להדבקה (--color-1: …), משתני SCSS או JSON למסירה לקוד.
הדביקו כל דבר, קראו הכול
שדות הקלט מקבלים כמעט כל רישום צבע שתזרקו עליהם: #f80, #ff8800, הקס בן 8 ספרות עם אלפא, rgb() / rgba(), hsl(), hwb(), lch(), oklch(), oklab(), cmyk(), 0xFF8800, או שמות צבע של CSS כמו rebeccapurple. יהיה אשר יהיה הקלט, חוזרות שבע תוצאות מסונכרנות: HEX, RGB, HSL, HSV, LCH, OKLCH ו-CMYK, כל אחת עם כפתור העתקה משלה.
שני תגי עזר מתחת לתצוגה המקדימה נותנים שם לצבע עבורכם: שם הצבע הקרוב ביותר של CSS (שימושי לפרוטוטייפים מהירים ולתקשורת על צבעים) והאסימון הקרוב ביותר של Tailwind (למשל orange-500), כדי שתישארו בתוך מערכת העיצוב שלכם במקום להמציא ערכים חד-פעמיים.
גררו את מחוון האלפא מתחת לתצוגה המקדימה והתוצאות עוברות לצורות השקופות שלהן — #RRGGBBAA, rgba(), hsla() — עם התצוגה המקדימה מוצגת על רקע משבצות שח כדי שתוכלו לשפוט את השקיפות.
איזה פורמט כדאי להשתמש בו?
| פורמט | שם מלא | מתי להשתמש? |
|---|---|---|
| HEX | הקסדצימלי | ברירת המחדל של האינטרנט. קומפקטי, נתמך אוניברסלית, קל להעתקה. 8 ספרות מוסיפות אלפא. |
| RGB | אדום, ירוק, כחול | איך שמסכים חושבים. שלושה ערוצי אור, 0–255. הפורמט שרוב ה-API-ים וקוד ה-canvas מצפים לו. |
| HSL | גוון, רוויה, בהירות | לעריכה אנושית ידנית. “קצת יותר בהיר” או “פחות רווי” זה שינוי מספר בודד. |
| HSV | גוון, רוויה, ערך | תוכנות גרפיקה. המודל שמאחורי הבוררים בפוטושופ וב-GIMP. |
| LCH | בהירות, כרומה, גוון | אחיד תפיסתית. צעדים מספריים שווים נראים כצעדים ויזואליים שווים — מה ש-HSL מתיימר להיות. |
| OKLCH | OK בהירות, כרומה, גוון | הבחירה המודרנית ל-CSS. מתקן את הסטיות בגוון הכחול שיש ב-LCH; נתמך בכל הדפדפנים הנוכחיים ואידיאלי למערכות אסימוני עיצוב. |
| CMYK | ציאן, מג’נטה, צהוב, שחור (Key) | כיוון להדפסה. המרה משוערת לתקשורת עם מעצבי דפוס — הערכים הסופיים תמיד מגיעים מפרופיל הצבע של המדפסת. |
דברים קטנים שחוסכים זמן
- ההיסטוריה שומרת את עצמה. 24 הצבעים האחרונים שעבדתם איתם שורדים רענון דף — נשמרים רק באחסון המקומי (local storage) של הדפדפן שלכם, ואף פעם לא מועלים לשום מקום.
- טפטפת (Eyedropper). בדפדפנים עם EyeDropper API (כרום ו-Edge) אתם יכולים לבחור צבע מכל מקום על המסך שלכם, אפילו מחוץ לחלון הדפדפן.
- שליטה במקלדת. הגלגל ובד הרוויה מגיבים למקשי חצים לכוונון מדויק ברמת פיקסל.
- הגדרות קבועות מראש מכסות את צבעי הבסיס הנפוצים כשאתם צריכים רק נקודת התחלה מהירה.
שאלות נפוצות (FAQ)
האם בטוח להשתמש ב-oklch() בייצור?
כן. כל הגרסאות הנוכחיות של Chrome, Edge, Firefox ו-Safari תומכות ב-oklch(), וזה הפך לרישום המועדף עבור אסימוני עיצוב (Tailwind CSS 4 מגדיר את כל הפלטה שלו בפורמט הזה). לדפדפנים ישנים מאוד, הגישו נפילה חוזרת ל-HEX בשורה הקודמת — הכלי הזה נותן לכם את שני הערכים.