מדריך צבעי Tailwind CSS

פלטת ברירת המחדל של Tailwind כוללת 22 משפחות צבעים (slate, gray, zinc, neutral, stone, red, orange, amber, yellow, lime, green, emerald, teal, cyan, sky, blue, indigo, violet, purple, fuchsia, pink, rose), כל אחת עם 11 גוונים מ-50 (הבהיר ביותר) עד 950 (הכהה ביותר) — 242 צבעים בסך הכול. הכלי הזה עובד בשני הכיוונים: הדביקו קוד hex כמו #c4b5fd כדי למצוא את שם המחלקה התואם הקרוב ביותר, או הקלידו מחלקה כמו bg-amber-500 כדי לקבל את ה-hex, RGB והווריאציות האחרות המדויקים שלה. רשת הפלטה המלאה למטה ניתנת לעיון, וכל דוגמית צבע מעתיקה את קוד ה-hex שלה בלחיצה.

מהו הכלי הזה?

Tailwind CSS מספקת סולם צבעים קבוע של ברירת מחדל במקום לאפשר לכם לבחור ערכים שרירותיים לצבעי ממשק משתמש נפוצים. לכל אחת מ-22 המשפחות בעלות השם (כמו amber או slate) יש בדיוק 11 גוונים, ממוספרים מ-50 עד 950, ולכל גוון יש ערך hex רשמי אחד, המתועד על ידי Tailwind עצמה ומשמש באופן זהה בכל ה-utilities מסוג bg-, text-, border- ו-ring-.

המדריך הזה כולל את פלטת ברירת המחדל הרשמית המלאה באופן מקומי, כך שחיפוש צבע או שם מחלקה אינו דורש פתיחת התיעוד של Tailwind, הרצת build, או שליחת המחלקה דרך PurgeCSS רק כדי לראות איך היא נראית. חיפושי hex משתמשים במרחק אוקלידי ב-RGB כדי למצוא את הגוון הרשמי הקרוב ביותר, וחיפושי מחלקה הם מדויקים — כל ערך כאן תואם לערכי ברירת המחדל המתועדים של Tailwind.

למה להשתמש בו?

הדביקו קוד hex מקובץ עיצוב או צילום מסך וקבלו מיד את שם מחלקת ה-Tailwind הקרובה ביותר, במקום לנחש לאיזה גוון ממוספר הוא מתאים.
הקלידו שם מחלקה כמו slate-900 או bg-purple-500 כדי לראות את ערך ה-hex וה-RGB המדויק שלו בלי לחפש בתיעוד של Tailwind.
עיינו בכל הרשת של 22 משפחות x 11 גוונים כדי להשוות גוונים זה לצד זה לפני הבחירה.
קבלו את הווריאציות bg-, text-, border- ו-ring- עבור כל גוון בלחיצה אחת, מכיוון ש-Tailwind משתמשת באותו סולם מספרי בכולן.
חינם, מיידי ולחלוטין מקומי — ללא העלאה, ללא חשבון, ללא שלב build.

איך להשתמש

כדי למצוא שם מחלקה מקוד hex: הקלידו או הדביקו את ערך ה-hex (עם או בלי #) בתיבת החיפוש — הגוון הרשמי הקרוב ביותר של Tailwind יופיע מעל הרשת, יחד עם מרחק הצבע אם זו אינה התאמה מדויקת.
כדי למצוא ערך hex משם מחלקה: הקלידו את שם המחלקה או המשפחה (למשל amber-500, bg-blue-600, או פשוט teal) — התאמה מדויקת מציגה את ה-hex, RGB וכל הווריאציות; שם משפחה בלבד מסנן את הרשת לאותה משפחה.
כדי לעיין בהכול: השאירו את תיבת החיפוש ריקה ולחצו על כל דוגמית צבע ברשת — הפרטים שלה יופיעו בפאנל שמעל, וקוד ה-hex שלה יועתק אוטומטית.
לחצו על כל אחד מכפתורי הווריאציות bg-/text-/border-/ring- בפאנל הפרטים כדי להעתיק את שם המחלקה המדויק.

דוגמה

קלט

#c4b5fd

פלט

violet-300 — התאמה מדויקת, #C4B5FD, rgb(196, 181, 253)

קוד ה-hex הזה הוא אחד מערכי ברירת המחדל המתועדים של Tailwind עצמה, כך שהמרחק הוא 0 וההתאמה מדויקת ולא משוערת.

שאלות נפוצות

האם אלה צבעי ברירת המחדל הרשמיים של Tailwind CSS?

כן — כל 242 ערכי ה-hex (22 משפחות x 11 גוונים) מגיעים מפלטת ברירת המחדל המתועדת של Tailwind עצמה. Tailwind v4 מייצגת צבעים באופן פנימי כ-OKLCH, אך אותה פלטת ברירת מחדל ומקבילות ה-hex המתועדות שלה ללא שינוי מ-v3, כך שהערכים האלה עדכניים עבור שתי הגרסאות.

מה המשמעות כאשר חיפוש hex אינו התאמה מדויקת?

אם תדביקו קוד hex שאינו אחד מ-242 ערכי ברירת המחדל של Tailwind (צבע מותג מותאם אישית, לדוגמה), הכלי מציג את הגוון הרשמי הקרוב ביותר לפי מרחק RGB ומתייג אותו כ-"התאמה קרובה" עם המרחק המוצג — הוא לא יהיה זהה פיקסל-לפיקסל לקלט שלכם, רק הגוון הרשמי הקרוב ביותר של Tailwind.

למה bg-, text-, border- ו-ring- כולם משתמשים באותם מספרים?

Tailwind מיישמת סולם צבעים משותף אחד על פני כל קטגוריות ה-utility, כך ש-bg-amber-500, text-amber-500, border-amber-500 ו-ring-amber-500 הם כולם אותו ערך hex בסיסי המיושם על מאפיין CSS שונה. לכן פאנל הפרטים מציג את כל ארבע הווריאציות יחד עבור כל גוון שתחפשו.

האם אפשר לחפש קבוצת משפחה כמו "blue" בלבד ללא מספר גוון?

כן — הקלדת שם משפחה בלבד (ללא מספר) מסננת את הרשת ל-11 הגוונים של אותה משפחה בלבד, כך שתוכלו להשוות ביניהם זה לצד זה, מבלי לבחור עדיין גוון ספציפי.

האם זה מכסה צבעי ערכת נושא מותאמים אישית של Tailwind שהגדרתי בתצורה שלי?

לא — המדריך הזה מכסה רק את פלטת ברירת המחדל המובנית של Tailwind, לא צבעים שהוספתם או שדרסתם בבלוק tailwind.config.js theme.extend.colors או בבלוק @theme של v4. אם הפרויקט שלכם מתאים אישית את הפלטה, הצבעים המוצגים בפועל בפרויקט שלכם עשויים להיות שונים ממה שמוצג כאן עבור אותו שם מחלקה.