ממיר צבעים

להמיר בין HEX, RGB, HSL ו-OKLCH עם תצוגה מקדימה חיה.

מאת Nethanel Bar, Co-founder & CEO

עודכן לאחרונה 25 באפריל 2026

מוכנים ללמוד תכנות באמת?

ב-Coddy לומדים דרך כתיבת קוד אמיתי בדפדפן: שיעורים אינטראקטיביים, משוב מיידי ועזרה מ-AI כשנתקעים.

מה זה ממיר צבעים?

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

CSS תומך בכמה מודלי צבע, ולכל אחד יתרונות משלו. HEX ו-RGB מתארים צבעים במונחים של אור אדום, ירוק וכחול. HSL אינטואיטיבי יותר (גוון, רוויה, בהירות). OKLCH הוא מודל תפיסתי שבו שינויים מספריים שווים נראים כשינויים שווים בעין, מה שהופך אותו לשימושי במיוחד ליצירת גוונים בהירים, גוונים כהים ופלטות נגישות.

נגישות נובעת מניגודיות, לא רק מצבע. WCAG מגדיר יחס ניגודיות בין טקסט לרקע: לפחות 4.5:1 לטקסט גוף רגיל, 3:1 לכותרות גדולות. כלי צבע טוב מציג את שני המספרים ליד הצבע שלכם, כדי שלא תשיקו בטעות ממשק לא נגיש.

מה תלמדו תוך כדי המרת צבעים

HEX הוא פשוט קיצור של RGB: #ff8800 זהה ל-rgb(255, 136, 0).
HSL מפריד בין *גוון* (איזה צבע), *רוויה* (כמה חי) ו*בהירות* (כמה בהיר). שינוי של אחד בלי האחרים אינטואיטיבי הרבה יותר מכוונון של R/G/B.
OKLCH אחיד מבחינה תפיסתית: הגדלת L ב-10% ב-OKLCH נראית כמו בערך אותו שינוי בהירות בכל גוון. HSL לא מתנהג כך.
גוונים בהירים (tints) מוסיפים לבן, גוונים כהים (shades) מוסיפים שחור. ההבדל בין שני גוונים של אותו צבע הוא מה שגורם לפלטת ממשק להרגיש אחידה.

איך להמיר ולבדוק צבעים צעד אחר צעד

הזינו צבע
הדביקו ערך HEX, RGB, HSL או OKLCH כלשהו, או בחרו צבע עם הטפטפת / בוחר הצבעים המובנה.
קראו את כל הפורמטים בבת אחת
הממיר מציג את אותו צבע בכל פורמט נתמך. לחצו על כל ערך כדי להעתיק אותו ללוח.
כווננו עם מחווני HSL או OKLCH
גררו את מחוון הבהירות לגוונים בהירים יותר וכהים יותר. השתמשו בבהירות של OKLCH לצעדים עקביים חזותית.
בדקו ניגודיות מול צבעי טקסט
לוח הניגודיות מציג את יחס WCAG מול לבן ומול שחור. כוונו ל-≥ 4.5 לטקסט גוף ול-≥ 3 לכותרות גדולות.
העתיקו את הערך ל-CSS שלכם
השתמשו בפורמט שמתאים לבסיס הקוד שלכם: HEX ל-design tokens, OKLCH לפלטות מודרניות, HSL כשרוצים לכוונן עם calc().

מדריך מהיר לפורמטי צבע ב-CSS

חמשת הפורמטים שתפגשו ביום-יום, עם דוגמאות לאותו צבע. מדריך מלא לתחביר הצבעים בדף <color> של MDN.

פורמט	תחביר	דוגמה (כתום)
HEX	`#RRGGBB` או `#RGB`	`#ff8800`
HEX עם אלפא	`#RRGGBBAA`	`#ff880080` (50% שקיפות)
`rgb()`	אדום, ירוק, כחול 0 עד 255	`rgb(255 136 0)`
`rgb()` עם אלפא	תחביר הלוכסן המודרני	`rgb(255 136 0 / 0.5)`
`hsl()`	גוון 0 עד 360°, רוויה 0 עד 100%, בהירות 0 עד 100%	`hsl(32 100% 50%)`
`oklch()`	בהירות 0 עד 100%, כרומה, גוון	`oklch(74% 0.18 50)`
צבע בשם	צבע CSS בעל שם (יש 147 כאלה)	`darkorange`

דוגמאות המרת צבעים לנסות

המרת HEX של מותג

אותו צבע, ארבעה פורמטים

color: #6c8cff;color: rgb(108 140 255);color: hsl(228 100% 71%);color: oklch(67% 0.16 268);

כל ארבע ההצהרות מפיקות בדיוק את אותו כחול. הבחירה באחת מהן ל-design tokens היא בעיקר שאלה של איך תרצו לכוונן אותם בהמשך.

יצירת גוונים עם OKLCH

מותג + 4 גוונים

--brand:        oklch(67% 0.16 268);--brand-light:  oklch(78% 0.12 268);--brand-lighter:oklch(88% 0.08 268);--brand-dark:   oklch(55% 0.18 268);--brand-darker: oklch(40% 0.16 268);

קיבוע הגוון (268) והכרומה ושינוי הבהירות בצעדים מפיקים פלטה עקבית שבה כל צעד *נראה* כמו אותו הפרש, דבר ש-HSL לא מבטיח.

הוספת שקיפות עם אלפא

50% שקיפות

background: rgb(108 140 255 / 0.5);background: #6c8cff80;

/ 0.5 היא הדרך המודרנית ב-CSS להוסיף אלפא. בצורת HEX מוסיפים בסוף בית אלפא בן שתי ספרות (80 ≈ 50%).

טעויות נפוצות בהמרת צבעים

להשוות בהירות HSL בין גוונים שונים. ל-hsl(60 100% 50%) (צהוב) ול-hsl(240 100% 50%) (כחול) יש אותו L אבל בהירות נתפסת שונה מאוד: השתמשו ב-OKLCH להשוואות חזותיות.
לשכוח ש-HEX בן 3 ספרות (#abc) הוא קיצור של הצורה בת 6 הספרות (#aabbcc).
להשתמש ב-rgba(...) במקום בתחביר המודרני rgb(... / alpha): שניהם עובדים, אבל צורת הלוכסן היא המפרט הנוכחי וקלה יותר לקריאה בכלים.
לבחור צבעים רק מול לבן טהור או שחור טהור. בדקו מול צבעי הרקע האמיתיים שלכם ובדקו ניגודיות WCAG.
לקבע צבעים עמוק בתוך קומפוננטות במקום להגדיר אותם כ-CSS custom properties ב-root.

שאלות נפוצות על ממיר צבעים

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

פצלו את ערך ה-HEX לזוגות (#RR, GG, BB) והמירו כל זוג מהקסדצימלי לעשרוני. או הדביקו את הערך בממיר צבעים וקראו את תוצאת ה-RGB מיד.

מה ההבדל בין HSL ל-OKLCH?

HSL נוח ונתמך באופן רחב אבל לא אחיד מבחינה תפיסתית: L שווה לא תמיד נראה בהיר באותה מידה. OKLCH אחיד מבחינה תפיסתית, ולכן הוא טוב יותר ליצירת גוונים בהירים וכהים עקביים ופלטות נגישות.

מה פירוש OKLCH?

OKLCH הוא ראשי תיבות של Oklab Lightness, Chroma, Hue (בהירות, כרומה, גוון). הוא מבוסס על מרחב הצבע Oklab, שתוכנן להיות אחיד מבחינה תפיסתית: שינויים מספריים קטנים נראים כשינויים חזותיים קטנים.

איך בודקים ניגודיות צבעים לנגישות?

חשבו את יחס הניגודיות של WCAG בין הטקסט לרקע. WCAG AA דורש לפחות 4.5:1 לטקסט רגיל ו-3:1 לטקסט גדול (18pt ומעלה או 14pt מודגש). ממיר צבעים שמציג ניגודיות חוסך לכם את החישוב.

להשתמש ב-HEX, RGB, HSL או OKLCH ב-CSS שלי?

השתמשו במה שהצוות שלכם מרגיש איתו בנוח. HEX נמצא בכל מקום; OKLCH הוא הבחירה המודרנית למערכות עיצוב; HSL מצוין כשרוצים לכוונן גוון או בהירות עם חישובים. התמיכה בדפדפנים מצוינת בכל הארבעה.