RGB to HEX Converter

RGB ו-HEX: מערכות צבעים

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

ב-RGB, כל אחד משלושת התפצלים (אדום, ירוק, כחול) יש ערך של עוצמה מ-0 ל-255. 0 משמעו שאין של צבע זה; 255 משמעו עוצמה מרבית. צביעה של שלושה כל אחד 255 נותן לבן (rgb(255,255,255)). צביעה של שלושה כל אחד 0 נותן שחור (rgb(0,0,0)). עם 256 ערכים אפשריים לכל תפצל ו-3 תפצלים, RGB יכולה לייצג 256³ = 16,777,216 צבעים שונים (כ-16.7 מיליון).

ב-HEX, התפצלים האותמות האותמות כל אחד נכתב כמספר שני-ספרותי (00 ל-FF), מוקדם ב-#. HEX משתמש בספרות 0–9 ובאותיות A–F, שם A=10, B=11, C=12, D=13, E=14, F=15. FF ב-HEX = 15×16 + 15 = 255 בעשרוני. כך #FFFFFF = rgb(255,255,255) = לבן. ההמרה היא פשוטה: עשרוני (בסיס 10) ל-HEX (בסיס 16).

איך להמר RGB ל-HEX: צעד-צעד

המרת כל תפצל RGB ל-HEX דורשת חלוקה ל-16 והצגת הגורף והנגזרת כספרות HEX:

לקחת ערך התפצל (0–255)
חלוקה ל-16: גורף = ספרות HEX הראשונה, נגזרת = ספרות HEX השנייה
המרת שתי הספרות ל-HEX אם הן 10–15 (A–F)
הרכב: ספרות HEX הראשונה + ספרות HEX השנייה = 2-ספרות HEX
המרת G ו-B
הרכב: # + R_HEX + G_HEX + B_HEX

דוגמה: המרת rgb(255, 99, 71) ל-HEX (אדום תפוח)

R=255: 255÷16=15 נגזרת 15 → F + F → FF
G=99: 99÷16=6 נגזרת 3 → 6 + 3 → 63
B=71: 71÷16=4 נגזרת 7 → 4 + 7 → 47
תוצאה: #FF6347

עשרוני	÷16 גורף	נגזרת	HEX
0	0	0	00
16	1	0	10
128	8	0	80
160	10 (A)	0	A0
200	12 (C)	8	C8
238	14 (E)	14 (E)	EE
255	15 (F)	15 (F)	FF

צבעי אינטרנט נפוצים: טבלת התייחסות

הלהלן טבלת התייחסות נרחבת לצבעי אינטרנט הנפוצים ביותר:

שם הצבע	HEX	RGB	שימוש
לבן	#FFFFFF	rgb(255,255,255)	רקע, טקסט על צהוב
שחור	#000000	rgb(0,0,0)	טקסט, רקעים גבוה-התאום
אדום	#FF0000	rgb(255,0,0)	אזהרות, שגיאות, סימני עצירה
ירוק	#00FF00	rgb(0,255,0)	מודעות להצלחה
כחול	#0000FF	rgb(0,0,255)	קישורים, צבעי ראשי
צהוב	#FFFF00	rgb(255,255,0)	אזהרות, הילואת
סגול	#00FFFF	rgb(0,255,255)	אקצנט, UI מודרני
מגנטה	#FF00FF	rgb(255,0,255)	אקצנט, הילואת
תפוח	#FFA500	rgb(255,165,0)	קריאות-לפעולה, אנרגיה
וורד	#800080	rgb(128,0,128)	אופנה, יצירתי
אפור	#808080	rgb(128,128,128)	אירועים UI, נייטרלי
כחול-ים	#000080	rgb(0,0,128)	מקצועי, אמין
תפוח	#FF6347	rgb(255,99,71)	אדום חם, אפליקציות תפוח
קורל	#FF7F50	rgb(255,127,80)	חברתי, חם
טין	#008080	rgb(0,128,128)	מקצועי, מאוזן

שימוש ב-RGB ו-HEX ב-CSS ועיצוב אינטרנט

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

ב-CSS, צבעים יכולים להיקבע כ:

color: #FF6347; (HEX)
color: rgb(255, 99, 71); (RGB)
color: rgba(255, 99, 71, 0.5); (RGB + חוסר-דרק, 0=לא-דרק, 1=דרק)
color: hsl(9, 100%, 64%); (Hue, Saturation, Lightness)
color: tomato; (שם צבע CSS)

קודי HEX יכולים גם להיכתב ב-3-ספרותי קצר, כאשר כל זוג הוא ספרות חוזרת: #FF0000 = #F00, #FFFFFF = #FFF, #336699 לא יכול להיקצר. הקצרות מחסוך זמן כתיבה ותומכת בכל הדפדפנים.

לשם יציבות עיצוב, מערכות עיצוב מודרניות (Material Design, Tailwind CSS, Bootstrap) משתמשות בפאלט של צבעים שנתון, שנמצאים כקודי HEX. Tailwind CSS, לדוגמה, מספק 22 משפחות של צבעים, כל אחת עם 10 גוונים (gray-100 דרך gray-900), כל אחד מוגדר כקוד HEX בקובץ ההגדרות.

RGBA ואלפא טרנספרנסי

RGBA מוסיף תווית רביעית ל- RGB: אלפא, המשתלטת על הערכיות. ערכי אלפא נעות מ-0 (בלתי נראה, דלוקס) ל-1 (בלתי דלוקס, אפקטיבי). ערכים חלקיים יוצרים צבעים חצי-דלוקסים.

דוגמאות: rgba(0, 0, 0, 0.5) הוא שחור חצי-דלוקס (כמו עטיפת-על). rgba(255, 255, 255, 0.8) הוא לבן 80% אפקטיבי. זה נמצא בשימוש נרחב לאפקטים של עטיפת-על, UI עם זכוכית-פסטל, והאפקט של עטיפת-על.

המקביל ב- RGBA הוא פשוטי יותר לבני-אדם: rgba(255, 99, 71, 0.8) vs #FF6347CC. איזה פורמט לבחור תלוי בטעמו של המשתמש ובכלי-העבודה שלו — כלי-עיצוב כמו Figma מציגים ויוצאים ב- HEX, בעוד שכלי-עבודה של CSS (Sass, Less) משתמשים ב- RGBA על ידי נוחות.

בסיסי-תאוריית-צבע למעצבים

הבנת המודל ה-RGB נעשה ביחד עם הבנת תאוריית-צבע. RGB הוא מודל-צבע תוספי — צבעים נוצרים על ידי תוספת תאורה. מיזוג R+G+B בעוצמה מלאה = לבן (כל התאורה). זה היפוך של מודל-צבע חיתוך (צבע-פיגמנט/דפוס), שבו מיזוג כל הצבעים = שחור.

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

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

נגישות וחוסר-השוואה: ה-WCAG (Web Content Accessibility Guidelines) דורשים חוסר-השוואה-מינימלי בין טקסט לרקע: 4.5:1 לטקסט-רגיל, 3:1 לטקסט-גדול. חוסר-השוואה-הזו נחשב מתוך הלומיננס-היחסי של הערכי RGB. כמה-כלי-כלי-עבודה-אונליין-בחן-WCAG-כשרות — זה-משמעותי-מאוד למשתמשים עם ראיה-נמוכה או חולי-צבע.

מרחבי-צבע-מעבר ל-RGB: HSL, HSB, CMYK

RGB אינו תמיד המודל-צבע הנוח-ביותר לבחירת-צבע. מרחבי-צבע-אלטרנטיביים יכולים להיות יותר יעילים למקרים-שונים:

מודל-צבע	מרכיבים	מתאים-ל	משתמש-ב
RGB	אדום, ירוק, כחול (0–255 כל-אחד)	הצגה-מסך, אינטרנט	CSS, הצגות, מצלמות
HEX	#RRGGBB (אותו-כמו-RGB)	פיתוח-אינטרנט	CSS, HTML, כלי-עיצוב
HSL	צבע-תווך (0–360°), צבע-הצבע (אחוז), תאור-בהירות (%)	שינויים-צבע-מתוחקקים	CSS, כלי-עיצוב
HSB/HSV	צבע-תווך, צבע-הצבע, בהירות/ערך	UI-כלי-בחירת-צבע	Photoshop, Illustrator
CMYK	סוורט, מגנטה, צהוב, צבע-מפתח	עיצוב-דפוס	InDesign, תהליכי-דפוס
Pantone	קודי-צבע-תקין	תקין-צבע-מותאם	מוצרים-פיזיים, דפוס

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

שאלות נפוצות

איך אני ממשכנע RGB ל-HEX בידי יד?

המספרים של כל תו (0–255) ל-2 ספרות HEX: חלק אותם ב-16 לספרה הראשונה, והשארית כספרה השנייה (10–15 = A–F). חבר את כל שלושת התוצאות אחרי #. דוגמה: rgb(128, 0, 255) → 128=80, 0=00, 255=FF → #8000FF (כחול).

מהו הקוד HEX ללבן?

#FFFFFF. לבן ב-RGB הוא (255,255,255) — מקסימום עוצמה לשלושת התווים. ב-HEX, 255 = FF. כך שלבן הוא #FF+FF+FF = #FFFFFF. הקיצור של 3 תווים הוא #FFF.

אפשר להשתמש ב-RGB ב-CSS?

כן. CSS מקבל שני rgb(255, 128, 0) ו-#FF8000 — הם מייצרים תוצאות זהות. RGB נוח יותר לקריאה; HEX קצר. RGBA מוסיף עומק: rgba(255, 128, 0, 0.7) לאורנג' 70%.

מה ההבדל בין HEX ו-RGB?

הם מייצגים את אותה מידע בנוטציות שונות. RGB משתמש בשלושה מספרים עשרוניים (0–255). HEX משתמש בשלושה ערכי HEX (00–FF). HEX הוא קצר (7 תווים vs 15+) והוא הנורמה ב-CSS ובכלי עיצוב. המעבר ביניהם הוא זהה — אין איבוד מידע.

למה HEX משתמש ב-16?

16 (HEX) מספק קוד קצר ונוח ל-8-ביטים (0–255). שני תווי HEX מייצגים 4-ביטים כל אחד, וכך 8-ביטים = 1-בייט. שלושה-בייטים RGB (24-ביטים) הופכים ל-6-תוי HEX. זה הקצרות והתאמה לבינארי המחשבים היא למה HEX הוא נורמה במחשבים.

מהו צבע שהערכים שלו ב-RGB הם שווים?

כאשר R=G=B, התוצאה היא תמיד גווני ערפילי. rgb(0,0,0) = שחור, rgb(128,128,128) = ערפילי ( #808080), rgb(255,255,255) = לבן. טווח הגוונים הערפיליים עובר מ-#000000 ל-#FFFFFF דרך ערכי גוונים ערפיליים שווים.

כיצד השפעת הצבע על גישור?

WCAG 2.1 דורשת יחס עוצמה של 4.5:1 בין טקסט רגיל לרקע (3:1 לטקסט גדול ולמרכיבי UI). יחס העוצמה נחשב מ-RGB. כשל בתקינות היחס העוצמה גורם לתוכן להיות חסום למשתמשים עם ראייה נמוך או בתנאי אור חזק.

מהו HSL וכיצד הוא קשור ל-HEX?

HSL (Hue, Saturation, Lightness) הוא דגם צבע חלופי שנועד להיות יותר נוח לבני אדם. hsl(0, 100%, 50%) הוא אדום טהור = #FF0000. המעבר הוא על ידי חישוב הערכי RGB מ-HSL באמצעות תמורה של דגם הצבע, ואז המעבר RGB ל-HEX. CSS תומך ב-HSL ישירות, כך שאתה יכול להשתמש בו ללא המעבר.

אפשר לקבל את הקוד HEX מצבע מקלט?

כן. כל כלי עיצוב (Figma, Adobe XD, Photoshop, Sketch, Canva) מציגים קוד HEX כאשר אתה מקלקל צבע. ב-Figma, תקלקל את הצבע המלאי בחלון התכונות כדי לראות ולקבץ את הקוד HEX. ב-Photoshop, חלון הבחירת הצבע מציג קוד HEX בתחתית. כלי הפיתוח של הדפדורן (Inspect Element → Styles) גם תומכים בצבעים שניתן לשנותם לקוד HEX.

תכונות גווניון ואיזון צבע

המדריכים לגישותיות באינטרנט (WCAG 2.1) מגדירים יחסי צבע מינימום בין טקסט לרקע, כדי להבטיח קריאות עבור משתמשים עם ראייה נמוך או חולי צבע. כ-8% מהגברים יש להם צורה של חולי צבע, עושר תכנות צבעים זמינים היא תכונה אתית וחוקית לעיצוב אתרים מקצועיים.

היחס הצבעי בין שני צבעים נחשב מתוך הבהירות היחסית: יחס צבע = (L1 + 0.05) / (L2 + 0.05), שם L1 היא הבהירות של הצבע הבהיר ו-L2 היא הבהירות של הצבע הכהה. הבהירות יחסית נקבלת מערכי RGB דרך פונקציה של ניקוז: לכל ערך של תאריך v = V/255, אם v ≤ 0.03928 אז linear = v/12.92, אחרת linear = ((v+0.055)/1.055)^2.4. אז L = 0.2126×R + 0.7152×G + 0.0722×B.

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

קומבינציה טקסט / רקע	יחס צבע	WCAG AA רגיל	WCAG AA גדול
שחור #000 / לבן #FFF	21:1	✓ Pass	✓ Pass
כחול כהה #003366 / לבן	12.2:1	✓ Pass	✓ Pass
כסוף בינוני #767676 / לבן	4.54:1	✓ Pass	✓ Pass
כסוף חיוור #999 / לבן	2.85:1	✗ Fail	✗ Fail
צהוב #FFFF00 / לבן	1.07:1	✗ Fail	✗ Fail
לבן #FFF / כחול כהה #003366	12.2:1	✓ Pass	✓ Pass

בניית פאלטה צבעים: מ-HEX למערכת עיצוב

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

מצבע ראשי כמו #3B82F6 (Tailwind's blue-500), ניתן להפיק סקאלה של 10-צלליות על ידי התאמת האורנג'נס במרחב HSL: blue-50 (#EFF6FF, חיוור מאוד), blue-100 (#DBEAFE), דרך blue-900 (#1E3A5F, כהה מאוד). טוקנים עיצוביים אז מתארים את הצלליות אל השימושים הסמנטיים: primary-button-bg = blue-600, primary-button-hover = blue-700, primary-button-text = לבן, וכו'.

כשבונים פאלטה צבעים, חשוב: 60-30-10 rule — 60% צבע דומיננטי (בדרך כלל כסף), 30% צבע צדדי, 10% צבע צדדי. הבטחו שכל קומבינציות טקסט עומדות בתנאי WCAG AA. בדוק צבעים תחת שתי תנאי אור שונים ומסכי מכשירים שונים. התחשבו בדפס חום (שעשוי לדרוש ערכי צלליות שונים כדי לשמור על היחס). פאלטה צבעים טובה בקוד היא 8–15 ערכי HEX שמכסים את כל המקרים השונים באופן קביע.

פסיכולוגיה של צבעים בעיצוב ושיווק

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

אדום (#FF0000 range): אנרגיה, חירום, תשוקה, סכנה. נעשה שימוש בו למכירות ("Sale!" סימנים הם תמיד אדומים), אזעקות, סימני עצירה, ומותגי מזון (Coca-Cola, McDonald's, KFC — אדום מעורר את התיאבון ויצור חירום). אדום גבוה-גוונים הוא מצוין לקריאות-לפעולה כאשר אתה רוצה פעולה מיידית של המשתמש.

כחול (#0000FF range): אמון, מקצועיות, יציבות, שקט. הצבע הדומיננטי בבראנדינג של תחום הפיננסים והטכנולוגיה (Facebook, Twitter/X, LinkedIn, PayPal, IBM, Samsung). מחקרים מראים כי כחול הוא הצבע המעודד ביותר ברחבי העולם. כחול חלול מעורר פתיחות וחברותנות; כחול חום מעורר שלטון ומומחיות.

ירוק (#00FF00 range): טבע, בריאות, צמיחה, הצלחה (כסף בארצות הברית). נעשה שימוש רב במותגי בריאות/בריאות, אפליקציות פיננסיות (תוצאות חיוביות מוצגות בירוק), ארגוני סביבה, ו"סימני הלם". גוונים ביניים כמו #28A745 (כחול-ירוק של Bootstrap) מעוררים מצבים חיוביים ב-UI ללא הגזמה.

צהוב/תולעת range: אופטימיות, אנרגיה, יצירתיות, התרעה. צהוב הוא נראה היטב (סימני בנייה, מוניות) אך קשה לקרואו כטקסט על רקע לבן. תולעת (#FFA500 range) נעשה שימוש רב בקריאות-לפעולה — הוא נראה ואנרגטי ללא הגזמה/סכנה של אדום.

Color Family	Typical HEX Range	Emotional Associations	Brand Examples
Red	#CC0000–#FF6666	Urgency, energy, appetite	Coca-Cola, Netflix, YouTube
Blue	#003399–#66AAFF	Trust, calm, professionalism	Facebook, LinkedIn, PayPal
Green	#006600–#66FF66	Nature, health, growth	Whole Foods, Spotify, Starbucks
Orange	#CC5500–#FFAA44	Energy, creativity, warmth	Amazon, Harley-Davidson
Purple	#440088–#AA66CC	Luxury, wisdom, creativity	Cadbury, Hallmark, Twitch
Black	#000000–#333333	Sophistication, power, elegance	Apple, Chanel, Nike

עבודה עם צבעים בכלי עיצוב פופולריים

כל כלי עיצוב ראשי משלו זרימת צבעים. הבנת איך לעבוד עם HEX ו-RGB בצורה יעילה בכלי שלך יחסך זמן ניכר בעבודה מקצועית.

Figma: לחץ על כל אירוע מלא → תיבת התכונות מציגה את צבע המלא → לחץ על הצבע הצבעוני כדי לפתוח את המעבד. אתה יכול לכתוב ערכים HEX ישירות או להחליף ל-RGB, HSL, או HSB. Figma גם תומך בערכי חוסר-דחיסות דרך שדה נפרד ו-RGBA. קפיצה/הדבקת קודי HEX בין Figma ו-CSS ללא תרגום.

Adobe Photoshop: פתח את נקודת הצבע (כוכבי צבע רקע/צבע רקע). התחתון של המעבד מציג את קוד HEX בשדה טקסט. לחיצה ימנית על צבעי רקע כדי להוסיף אותם לפאלט. כלי ה-eydropper נקטף כל צבע על המסך — העברת העכבר כדי לראות את קוד HEX שלו בתיבת המידע.

Browser DevTools: בחזקור כל אירוע → תיבת הסגנון מציגה ערכי CSS של צבע → לחץ על הצבע הצבעוני הבצד של כל תכונת צבע כדי לפתוח נקודת פיקר. DevTools יכול להציג צבעים כ-Hex, RGB, HSL, או שם — לחץ על התצוגת הצבע כדי להחליף בין פורמטים. זה חסכון עצום להפעלת החלטות עיצוביות מקוריות מאתרים קיימים.

VS Code: צבעי עיצוב (כוכבי צבע) מופיעים לצד ערכי HEX ו-RGB בקובצי CSS. העברת העכבר מציג נקודת פיקר. התוספים colorize מוסיפים תצוגות צבע לכל פורמטי צבע. קיצורי-דברים של Emmet כמו c:f מתרחבים ל color: #fff; עבור צבעים נפוצים.

Using This RGB to HEX Converter

Enter הערכים של התערובת האדום, הירוק והכחול (כל אחד בין 0 ל-255). הממיר מציג את הקוד HEX המוכן לחברה ל-CSS, HTML או כל כלי עיצוב. ערכים מחוץ ל-0–255 מוגבלים אוטומטית. הממיר גם מציג את ההפעלה ההפוכה: הכנסו קוד HEX כדי לקבל את הפרישת RGB. שימוש בכלי זה כאשר כלי עיצוב נותן לכם ערך RGB, אך CSS שלכם משתמש בפורמט HEX, או כאשר תורמים צבעים בין יישומים שונים שמשתמשים בפורמטים שונים. הקוד HEX המוצג כולל את הסימן # לפסטה ל-CSS. כל 16.7 מיליון תערובות RGB מתאימות לקוד HEX 6-אותיות ייחודי, עם אי-הפשרות או הסתברות.