כלי חינמי · רץ בדפדפן שלכם

ממיר צבעים (HEX,‏ RGB,‏ HSL)

המירו צבע בין HEX,‏ RGB ו־HSL, בחרו אותו ויזואלית, ובדקו אם טקסט בצבע הזה קריא על לבן או על שחור.

צבע (HEX,‏ RGB או HSL)

HEX#0071E3

RGBrgb(0, 113, 227)

HSLhsl(210, 100%, 45%)

ניגודיות על לבן4.70:1 · AA

ניגודיות על שחור4.47:1 · רק לטקסט גדול

WCAG דורש לפחות 4.5:1 לטקסט רגיל (AA) ו־7:1 ל־AAA.

תשובה קצרה

הזינו צבע בכל פורמט, כמו #0071E3,‏ rgb(0, 113, 227) או hsl(210, 100%, 45%), או בחרו אחד, וקבלו את שלושת פורמטי ה־CSS להעתקה. הכלי מציג גם את יחס הניגודיות לפי WCAG מול לבן ושחור: טקסט רגיל צריך לפחות 4.5:1 (AA), וטקסט גדול 3:1.

איך משתמשים

הזינו או בחרו צבע. הקלידו HEX,‏ RGB או HSL, או השתמשו בבוחר הצבעים.
העתיקו את הפורמט. HEX,‏ RGB ו־HSL מוכנים להדבקה ב־CSS, בכלי עיצוב או בקוד.
בדקו ניגודיות. ראו אם טקסט בצבע הזה עובר את WCAG על רקע לבן או שחור.

דוגמה

כחול שהומר לכל הפורמטים, עם הניגודיות שלו:

קלט

#0071E3

פלט

HEX  #0071E3
RGB  rgb(0, 113, 227)
HSL  hsl(210, 100%, 45%)

ניגודיות על לבן: 4.70:1 · AA
ניגודיות על שחור: 4.47:1 · רק לטקסט גדול

שגיאות נפוצות ואיך לתקן אותן

ה־CSS מתעלם מהצבע: ערכי HEX צריכים #, ו־rgb()‎ צריך שלושה מספרים. העתיקו את הערך מהכלי כדי להימנע משגיאות הקלדה.
הצבע נכשל בבדיקת הניגודיות: הכהו את הטקסט או הבהירו את הרקע עד שהיחס מגיע ל־4.5:1. ב־HSL, הורדת הבהירות היא הדרך המהירה.
ערכי HSL שונים ב־1 מכלי אחר: ההמרות מעוגלות למספרים שלמים, כך ש־210 ו־211 יכולים להיות אותו צבע. השתמשו ב־HEX כשצריך התאמה מדויקת.
הצבע המודפס נראה אחרת: מסכים משתמשים ב־RGB ומדפסות ב־CMYK, עם טווחים שונים. בקשו מבית הדפוס את הפרופיל הנכון ובדקו הגהה.

שאלות נפוצות

איך ממירים HEX ל־RGB?

מחלקים את שש הספרות לשלושה זוגות וממירים כל אחד מהקסדצימלי: ‎#0071E3‎ הוא 00,‏ 71,‏ E3, כלומר rgb(0, 113, 227).

מה זה HSL?

גוון (0 עד 360 מעלות על גלגל הצבעים), רוויה ובהירות (0 עד 100%). קל בעזרתו ליצור גוונים בהירים או כהים יותר של אותו צבע.

מה המשמעות של קוד HEX בן 3 ספרות?

כל ספרה מוכפלת: ‎#0AF‎ זהה ל־‎#00AAFF‎.

איזה יחס ניגודיות צריך?

WCAG AA דורש 4.5:1 לטקסט רגיל ו־3:1 לטקסט גדול (כ־24px, או 19px מודגש). AAA דורש 7:1 לטקסט רגיל.

למה ערכי HSL שונים מעט בכלים אחרים?

המרה בין פורמטים כוללת עיגול, ולכן כלי אחד יציג 210 ואחר 211 לאותו צבע. ההבדל לא נראה לעין.

אפשר להשתמש בערכים ב־CSS?

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

איך ממירים RGB ל־CMYK להדפסה?

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

יש תמיכה בשקיפות?

הממיר עובד עם צבעים אטומים. לשקיפות הוסיפו ערך אלפא בעצמכם, כמו rgb(0 113 227 / 50%).

למה הצבע נראה אחרת בטלפון?

מסכים שונים בטווח הצבעים ובכיול, וחלקם מציגים צבעים בטווח רחב יותר. ערכי HEX ו־RGB מתייחסים למרחב sRGB הסטנדרטי.

משהו מועלה?

לא. ההמרה רצה בדפדפן שלכם.