מה זה ממיר צבעים?
A Color Converter transforms colors between HEX, RGB, and HSL color models. חיוני for web developers and designers working with CSS, design tools, and color theory. Includes a live preview swatch.
מתי להשתמש במחשבון זה
- כשמתרגמים מפרטי צבע של מעצב מ-Figma או Sketch לערכים תואמי CSS
- כשבונים מערכת עיצוב וצריך ערכי צבע עקביים בפורמטים HEX, RGB ו-HSL
- כשיוצרים פלטות או ערכות צבעים באמצעות HSL כדי לשמור על רוויה ובהירות עקביות
- כשבודקים ניגודיות צבעים לעמידה בתקני נגישות (WCAG AA/AAA)
- כשממירים ערכי צבע ישנים בקוד קיים לפורמט אחר לשם עקביות
- כשמתקנים בעיות צבע ב-CSS על ידי בדיקת איך הצבע נראה בפועל בפורמטים שונים
שלבים:
- הזן ערך צבע בפורמט HEX, RGB או HSL.
- בחר את פורמט הקלט באמצעות הכרטיסיות.
- הצג את הערכים המומרים בכל שלושת הפורמטים.
- ראה דוגמית תצוגה מקדימה חיה של הצבע.
- בדקו את badges של ניגודיות WCAG כדי לאמת עמידה ב-accessibilityif אתם משלבים את הצבע הזה עם טקסט
נוסחה
HEX → RGB: פיצול #RRGGBB לערכים עשרוניים
RGB → HSL: נרמול RGB → חישוב גוון/רוויה/בהירות
HSL → RGB: המרה באמצעות נוסחאות כרומה
HEX: #RRGGBB (0-255 לכל ערוץ)
RGB: rgb(R, G, B) (0-255)
HSL: hsl(H°, S%, L%) (H: 0-360, S/L: 0-100)
מקרי שימוש
- המרת ערכי צבע ב-CSS
- יצירת ערכות צבעים מצבעי בסיס
- התאמה design system colors
- הבנת קשרי צבע באמצעות HSL
יתרונות מרכזיים
- המר צבעים בין 3 פורמטים ברגע
- ראה תצוגה מקדימה חיה
- העתק כל פורמט בלחיצה אחת
- חינם ללא צורך בהרשמה
- העתקו כל פורמט בלחיצה אחת, והשתמשו בכלי eyedropper כדי לבחור צבעים ישירותfrom your screen for instant conversion
- עובד entirely בדפדפן שלכםWithout data sent to any server, keeping your design work completely private and available offline
טיפים מקצועיים
- השתמש ב-HSL להתאמות צבע אינטואיטיביות
- השתמש ב-HEX לתאימות עם CSS
- השתמש בתצוגה המקדימה כדי לוודא את הצבע לפני השימוש
- שמור רשימת עזר של המרות צבע נפוצות
- זכרוthat HEX values are case-insensitive (#ff5733 and #FF5733 produce the same color), but using uppercase is a common convention that improves readability in stylesheets
טעויות נפוצות שיש להימנע מהן
- שכחת הקידומת # לצבעי HEX
- שימוש בערכי RGB מעל 255 או מתחת ל-0
- בלבול בין טווח הגוון של HSL (0-360) ל-RGB (0-255)
- מניחים ש-HSL lightness ו-RGB brightness זהים — HSL lightness הוא מדד תפיסתי שבו 50% הוא הגרסה הבהירה ביותר של כל גוון, בעוד RGB brightness הוא העוצמה הגולמית של שלושת הערוצים המשולבים
מונחי מפתח מוסברים
- HEX: ייצוג הקסדצימלי של RGB
- RGB: מודל צבעים של אדום ירוק כחול
- HSL: Hue רוויה Lightness model
- מרחב צבע: מודל מתמטי לצבעים
- יחס ניגודיות WCAG: מידה מספרית של ההבדל בבהירות בין טקסט בחזית לצבעי רקע, עם יחסים מינימליים של 4.5:1 לטקסט רגיל ו-3:1 לטקסט גדול הנדרשים לעמידה בתקני נגישות
מושגים קשורים
- CSS Unit ממיר: המר בין px, rem, em, vw ויחידות CSS נוספות
- קודר/פענוח Base64: קודד ופענח מחרוזות Base64
- מעצב JSON: עצב ואמת נתוני JSON
- בודק Regex: בדוק ביטויים רגולריים מול טקסט לדוגמה
- קודר/פענוח URL: קודד ופענח מחרוזות בטוחות ל-URL
דוגמה
קלט: #FF5733 (HEX) → RGB: rgb(255, 87, 51) → HSL: hsl(11, 100%, 60%). קלט: hsl(200, 50%, 50%) → RGB: rgb(64, 149, 191) → HEX: #4095BF.
פירוש התוצאות שלכם
הממיר תומך בשלושה פורמטי צבע ומציג את הערך המקביל בשלושתם בו-זמנית. HEX (#RRGGBB) הוא הפורמט הנפוץ ביותר בפיתוח אתרים. RGB (rgb(R, G, B)) נותן שליטה ישירה בערוצי הצבע האישיים. HSL (hsl(H, S%, L%)) הוא האינטואיטיבי ביותר לבני אדם — הגוון קובע את משפחת הצבעים, הרוויה שולטת בעוצמה, והבהירות שולטת ברמת הבהירות.
מחוון יחס הניגודיות מציג האם צירוף צבעי החזית/רקע שלך עומד בתקני הנגישות WCAG. עמידה ב-AA דורשת לפחות 4.5:1 לטקסט רגיל ו-3:1 לטקסט גדול. עמידה ב-AAA דורשת לפחות 7:1 לטקסט רגיל ו-4.5:1 לטקסט גדול. השתמש בדוגמית התצוגה המקדימה כדי לוודא חזותית את הצבעים שלך לפני החלתם.