כלי בחירת צבע - המרת קודי צבע RGB, הקסדצימלי, CMYK ו-HSV

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

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

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

יש שלוש דרכים לבחור צבע.

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

גם הקלדת ערכים מדויקים פועלת. השדה ההקסדצימלי מקבל קודים כגון #2ECC71, עם # או בלעדיו. כל אחד משדות ה-RGB מקבל מספר שלם מ-0 עד 255. כל אחד משדות ה-CMYK מקבל מספר שלם מ-0 עד 100. ערך שהוקלד מעל לטווח המותר מוגבל לערך המרבי.

ליד כל פורמט צבע נמצא לחצן העתקה. לחיצה עליו מעתיקה את הערך ללוח ומציגה הודעה קצרה "הועתק!".

הסבר על מודלי צבע

RGB

RGB מתאר צבע כתערובת של אור אדום, ירוק וכחול — אותם שלושה צבעים שמסך משתמש בהם ליצירת כל פיקסל. כל ערוץ נע בין 0 ל-255. ‏RGB(255, 0, 0) הוא אדום טהור, ו-RGB(0, 0, 0) הוא שחור. דפדפנים, אפליקציות ותוכנות וידאו משתמשים כולם ב-RGB, משום שהוא תואם לאופן פעולתם של מסכים.

הקסדצימלי

קוד הקסדצימלי כותב צבע RGB בבסיס 16 במקום בבסיס 10. ‏#2ECC71 מכיל שלושה זוגות תווים: 2E עבור אדום, CC עבור ירוק ו-71 עבור כחול. כל זוג נע בין 00 ל-FF. קודים הקסדצימליים נפוצים בעיצוב אתרים, משום ש-CSS מקבל אותם ישירות והם קצרים יותר להקלדה מאשר rgb(). קיימת גם צורת קיצור בת שלושה תווים: #0F0 פירושו זהה ל-#00FF00.

CMYK

CMYK משמש להדפסה. מדפסת יוצרת צבע באמצעות שכבות של דיו ציאן, מג׳נטה, צהוב ושחור על נייר לבן, ולכן היא פועלת באמצעות הפחתת אור ולא באמצעות הוספתו. כל ערוץ הוא אחוז בין 0 ל-100. ‏CMYK(0, 0, 0, 0) פירושו שאין דיו כלל, ולכן הנייר הלבן נשאר גלוי. CMYK אינו יכול לשחזר כל צבע שמסך מסוגל להציג; חלק מהצבעים הבהירים של המסך, במיוחד גוונים מסוימים של כחול וירוק, נראים עמומים יותר לאחר ההדפסה.

HSV

HSV מתאר בנפרד את הגוון, את הרוויה ואת הערך. גוון הוא משפחת הצבעים, והוא ניתן במעלות מ-0° עד 360°, כאשר 0° הוא אדום, 120° הוא ירוק ו-240° הוא כחול. רוויה היא מידת העוצמה של הצבע, מ-0% (אפור) עד 100% (צבע מלא). ערך הוא מידת הבהירות, מ-0% (שחור) עד 100% (בהירות מלאה). HSV קרוב לאופן שבו אנשים מתארים צבע באופן טבעי, ולכן הספקטרום ומחוון הבהירות בכלי זה מבוססים עליו.

נוסחת ההמרה מ-RGB להקסדצימלי

כל ערוץ RGB, שהוא מספר מ-0 עד 255, מומר למספר הקסדצימלי בעל שתי ספרות, ולאחר מכן שלושת הזוגות מחוברים, כש-# מופיע לפניהם.

$\text{Hex} = \text{\#} + \text{toHex}(R) + \text{toHex}(G) + \text{toHex}(B)$

נוסחת ההמרה מ-RGB ל-CMYK

תחילה כל ערוץ RGB מותאם לשבר בין 0 ל-1. השחור (K) נקבע לפי הערוץ בעל הערך הגדול ביותר. לאחר מכן מחושבים הציאן, המג׳נטה והצהוב מהערוצים הנותרים ומ-K.

$R' = R/255,\quad G' = G/255,\quad B' = B/255$ $K = 1 - \max(R', G', B')$ $C = \frac{1-R'-K}{1-K}\times 100\%,\quad M = \frac{1-G'-K}{1-K}\times 100\%,\quad Y = \frac{1-B'-K}{1-K}\times 100\%$

כאשר K שווה ל-1 (הצבע שחור טהור), C,‏ M ו-Y נקבעים כולם ל-0 כדי להימנע מחלוקה באפס.

נוסחת ההמרה מ-RGB ל-HSV

תחילה RGB מותאם לשברים בין 0 ל-1. יהי $C_{max}$ הגדול מבין שלושת הערוצים, $C_{min}$ הקטן שבהם, ו-$\Delta$ ההפרש ביניהם.

$V = C_{max}\times 100\%$ $S = 0 \text{ if } C_{max}=0,\text{ אחרת } \frac{\Delta}{C_{max}}\times 100\%$

הגוון תלוי בערוץ בעל הערך הגדול ביותר:

0° & \Delta = 0 \\ 60°\times\left(\dfrac{G'-B'}{\Delta}\bmod 6\right) & C_{max}=R' \\ 60°\times\left(\dfrac{B'-R'}{\Delta}+2\right) & C_{max}=G' \\ 60°\times\left(\dfrac{R'-G'}{\Delta}+4\right) & C_{max}=B' \end{cases}$$ ## דוגמה פתורה נתחיל ב-RGB(46, 204, 113), גוון ירוק. **הקסדצימלי:** 46 בהקסדצימלי הוא `2E`, ‏204 הוא `CC` ו-113 הוא `71`, ולכן מתקבל `#2ECC71`. **CMYK:** לאחר ההתאמה, R′ = 0.180,‏ G′ = 0.800 ו-B′ = 0.443. הגדול ביותר הוא G′, ולכן K = 1 − 0.800 = 0.20, כלומר 20% שחור. לאחר מכן C = (1 − 0.180 − 0.20) / 0.800 × 100 ≈ 77%,‏ M = (1 − 0.800 − 0.20) / 0.800 × 100 = 0%, ו-Y = (1 − 0.443 − 0.20) / 0.800 × 100 ≈ 45%. התוצאה היא CMYK(77, 0, 45, 20). **HSV:** ‏$C_{max}$ = 0.800 (ירוק), ‏$C_{min}$ = 0.180, ולכן Δ = 0.620. הערך = 80%. הרוויה = 0.620 / 0.800 × 100 ≈ 77%. מכיוון שירוק הוא הגדול ביותר, H = 60 × ((B′ − R′) / Δ + 2) = 60 × ((0.443 − 0.180) / 0.620 + 2) ≈ 145°. התוצאה היא HSV(145°, 77%, 80%). ## הפיכת בחירת צבעים לנגישה בערך 1 מתוך (2.5 ס״מ) 12 גברים וכ-1 מתוך (2.5 ס״מ) 200 נשים סובלים מצורה כלשהי של לקות בראיית צבעים, לרוב מיכולת מופחתת להבחין בין אדום לירוק. עיצוב שמסתמך על צבע בלבד להעברת משמעות, כגון הודעת שגיאה אדומה ללא סמל או תווית, לא יעבוד עבור משתמשים אלה. הוספת תווית טקסט, סמל או דוגמה לצד הצבע פותרת זאת. גם לטקסט נדרש ניגוד מספיק מול הרקע. ההנחיות לנגישות תכני אינטרנט (WCAG) ממליצות על יחס ניגוד של לפחות 4.5:1 לטקסט רגיל ושל 3:1 לטקסט גדול. יש צורך בכלי ייעודי לבדיקת ניגוד כדי למדוד זאת, משום שכלי זה אינו מחשב יחסי ניגוד בעצמו. ## שאלות נפוצות **מה ההבדל בין RGB ל-CMYK?** RGB מיועד למסכים ויוצר צבע באמצעות הוספת אור אדום, ירוק וכחול. CMYK מיועד להדפסה ויוצר צבע באמצעות שכבות דיו על נייר, שמפחיתות את האור במקום להוסיף אותו. RGB יכול להפיק צבעים בהירים יותר מ-CMYK, משום שדיו אינו יכול להתאים לטווח הצבעים שהמסך מסוגל לפלוט. **מדוע צבעים מודפסים נראים שונים מאלה שעל המסך?** מסך פולט אור ישירות; דף מודפס רק מחזיר את האור שפוגע בו. גם דיו CMYK מכסה טווח צבעים קטן יותר מאור RGB, ולכן אי אפשר להתאים בדיוק על הנייר חלק מהצבעים הבהירים של המסך. **מה משמעות הסמל # בקוד הקסדצימלי?** הוא מסמן שהתווים שאחריו הם קוד צבע הקסדצימלי, מוסכמה שמקורה ב-HTML וב-CSS המוקדמים. בלעדיו, דפדפן לא יזהה את הערך כצבע. **מדוע בחלק מהקודים ההקסדצימליים יש רק שלושה תווים?** קוד בן שלושה תווים הוא קיצור של קוד בן שישה תווים, שבו כל זוג ספרות מורכב מאותה ספרה. `#0F0` מורחב ל-`#00FF00`. **האם ההמרות בין הפורמטים מדויקות?** ההמרה מ-RGB להקסדצימלי מדויקת, משום שמדובר באותם מספרים הכתובים בבסיס אחר. ההמרה מ-RGB ל-CMYK היא קירוב, משום שהיא ממירה בין אור לדיו, שהם תהליכים פיזיקליים שונים בעלי טווחי צבעים שונים. **האם כלי זה יכול לבחור צבע ישירות מתמונה או מדף אינטרנט?** לא. תוסף לדפדפן או בורר הצבעים המובנה במערכת ההפעלה, כגון Digital Color Meter ב-macOS, יכולים לקרוא צבע מהמסך; לאחר מכן אפשר להקליד את הערך שהתקבל בכלי זה כדי להמיר אותו.