כותרת: "ממיר צבע: המר HEX, RGB, HSL, HWB ו-CMYK בדרך הנכונה" slug: כלי מנחה-ממיר צבע: קטגוריית ממיר צבע: סוג צבע: אשכול
ממיר צבע: המר HEX, RGB, HSL, HWB ו-CMYK בדרך הנכונה
הפעם הראשונה שצבע נשך אותי הייתה בהדפסה בניתי דף נחיתה לאחד ממוצרי הוורדפרס שלי, חתמתי על המותג הכחול בדפדפן, ואז שלחתי את אותו " blue" לבית דפוס עבור אצווה של מדבקות מה שחזר היה חיל הים שטוח, מעט אפור, שלא נראה כמו המסך אף אחד לא המיר את צבע מסך ה-RGB ל-CMYK, אז המדפסת ניחשה, והניחוש היה שגוי זה היה היום שבו הפסקתי להתייחס לצבע כאל מחרוזת אחת והתחלתי להתייחס אליו כאל ערך אחד שצריך לדבר בכמה שפות בבת אחת.
בדיוק בשביל זה יש ממיר צבע אתה נותן לו צבע בתחביר אחד והוא מחזיר לך כל תחביר אחר, אז הכחול ב-CSS שלך, הכחול בקובץ העיצוב שלך והכחול שהמדפסת שלך מקבלת כולם כנראה באותו צבע בניתי את ממיר צבע על Toolz.dev כי נמאס לי להדביק קודי hex בשלושה אתרים שונים כדי לקבל RGB, HSL ו-CMYK בנפרד.
TL;DR: ממיר צבע לוקח צבע אחד ומבטא אותו מחדש ב-HEX, RGB, HSL, HWB ו-CMYK בבת אחת, בתוספת שם הצבע הקרוב ביותר ל-CSS. השתמש ב-RGB ו-HEX עבור מסכים, HSL או HWB כאשר ברצונך לדחוף צבע ביד, וב-CMYK להדפסה. ממיר Toolz.dev פועל כולו בדפדפן שלך, שומר על ערוץ האלפא ללא פגע, ולעולם לא מעלה את מה שאתה מדביק.
מהו ממיר צבע?
ממיר צבע מנתח צבע שנכתב בכל תחביר CSS נפוץ ומחשב את המקבילה שלו באחרים אילו תחבירים קיימים, ואיך בדיוק כל ממיר, מוגדר על ידי מודול צבע CSS רמה 4. המתמטיקה אינה מסובכת, אבל לעשות אותה ביד זה מייגע ונוטה לשגיאות. הֲמָרָה #4466EE ל-RGB פירושו פיצול שש ספרות המשושה לשלושה זוגות וקריאת כל זוג כמספר בסיס 16: 44 הוא בן 68, 66 הוא 102, ו EE הוא 238, נותן rgb(68, 102, 238). ללכת לכיוון השני פירושו לחלק כל ערוץ למחרוזת משושה דו ספרתית ולהצטרף אליהם. להגיע ל-HSL פירושו לנרמל את הערוצים, למצוא את המינימום והמקסימום, ולחשב גוון, רוויה וקלילות מאלה. אתה לא רוצה לעשות את זה בראש שלך ב-2 לפנות בוקר.
הערך של ממיר הוא לא רק שמירת חשבון זה מבטיח עקביות כאשר כלי אחד מייצר את כל הפורמטים מצבע אחד מנותח, אין סיכוי שה-RGB שהעתקת וה-HSL שהעתקת מתארים צבעים מעט שונים כי עיגלתם אחרת בין השלבים מקור אחד, אמת אחת, כל פורמט.
למה בכלל קיימים פורמטים של צבע?
כל פורמט צבע שורד כי הוא באמת טוב בעבודה אחת.
RGB הוא איך שמסכים עובדים תצוגה פולטת אור אדום, ירוק וכחול, וערבוב שלושת אלה בעוצמות שונות מייצר כל צבע שאתה רואה זה הופך את RGB לשפת האם של הדפדפן: כל תחביר שתכתוב ב-CSS, מנוע העיבוד פותר את זה ל-RGB לפני שהוא מאיר פיקסל.
HEX הוא RGB בקיצור. #4466EE זהה ל rgb(68, 102, 238), פשוט ארוז לתוך מחרוזת קומפקטית שקל להדביק בגיליון סגנונות או בכלי עיצוב. זה פופולרי כי הוא קצר וחד משמעי, לא כי הוא מסוגל יותר.
HSL מתאר צבע לפי גוון, רוויה ובהירות. זה הפורמט שאליו אני מגיע כשאני מכוון ביד ממשק משתמש. כדי להפוך כפתור כהה יותר בריחוף, אני מפיל את הבהירות בכמה נקודות ומשאיר את הגוון והרוויה לבד. הניסיון לעשות זאת ב-RGB גולמי פירושו לשנות את כל שלושת הערוצים בכמויות לא שוות ולקוות שהגוון לא ייסחף.
HWB, מוגדר במפרט CSS Color Module Level 4 (https://www.w3.org/TR/css-color-4/), מתאר את אותו גוון על ידי כמה לבן וכמה שחור מעורבבים פנימה זה ממפה בצורה נקייה איך אנשים באמת חושבים על גוונים וגוונים: הוסף לבן כדי להבהיר, הוסף שחור כדי להכהות. זה חדש יותר, אז אני משתמש בו בעיקר כאשר הקריאה של הקוד חשובה יותר מאשר טווח הגעה לדפדפן.
CMYK הוא מודל ההדפסה מדפסות להניח ציאן, מגנטה, צהוב, ודיו שחור על נייר לבן, וכל דיו מפחית אור ולא הוספתו לכן צבע מסך חי יכול להיראות עמום יותר על נייר: טווחי הצבעים שני הדגמים יכולים לייצר, הנקראים gamuts, שונים ממיר נותן לך את קירוב CMYK, אבל זה לא יכול להמציא דיו שאינו קיים.
כיצד אוכל להמיר HEX ל-RGB ובחזרה?
ההמרה הנפוצה ביותר, בפער גדול, היא HEX ל-RGB ו-RGB ל-HEX. הנה השיטה הידנית כדי שתוכל לבדוק את השפיות של כל כלי, כולל שלי.
כדי להמיר HEX ל-RGB, חלקו את שש הספרות לשלושה זוגות וקראו כל אחת כמספר הקסדצימלי מ-0 עד 255. קיצור בן שלוש ספרות כמו #46E מתרחב על ידי הכפלת כל ספרה ל #4466EE ראשית כדי להמיר RGB ל HEX, קח כל ערך ערוץ, המר אותו למחרוזת hex דו ספרתית עם אפס מוביל במידת הצורך, והצטרף אליהם מאחורי hash.
במקום לעשות זאת שוב ושוב, הדבק את הערך לתוך ממיר צבע וקרא כל פורמט בבת אחת. אם אתה גם צריך לבחור צבע ויזואלית ולראות אותו מתעדכן בשידור חי, ה בוחר צבעים היא נקודת ההתחלה הטובה יותר, ושני הכלים חולקים את אותה ליבת המרה כך שהמספרים שלהם מסכימים.
מתי עלי להשתמש ב-CMYK במקום ב-RGB?
השתמש CMYK רק כאשר הפלט הוא דיו על נייר כרטיסי ביקור, מדבקות, אריזה, וכל עבודה הדפסה מסחרית לצפות ערכי CMYK, ושליחת RGB למדפסת אומר המדפסת או התוכנה שלה ממירה בשבילך, לעתים קרובות עם תוצאות שלא חתמת על זה היה טעות המדבקה שלי במשפט.
השתמש ב-RGB, ובקיצור ה-HEX שלו, לכל דבר שיוצג על מסך: אתרים, אפליקציות, גרפיקה חברתית, וידאו. אם פרויקט משתרע על פני שני העולמות, שמור על RGB או HEX כמקור האמת שלך וצור את קירוב ה-CMYK עם ממיר ברגע שאתה מוסר להדפסה, כך שתוכל לגלגל את ערכי ה-CMYK ולסמן כל צבע שישתנה בצורה גרועה לפני שזה יעלה לך בהדפסה.
איך פורמטים של צבע להשוות?
| פורמט | הטוב ביותר עבור | תמיכה באלפא | דוגמה |
|---|---|---|---|
| HEX | CSS קומפקטי, מסירת עיצוב | טופס בן 8 ספרות בלבד | #4466EE |
| RGB / RGBA | מסכים, צבע פרוגרמטי | כן (RGBA) | rgb(68, 102, 238) |
| HSL / HSLA | גוון וקלילות כוונון ידני | כן (HSLA) | hsl(228, 83%, 60%) |
| HWB | גוונים וגוונים קריאים | כן (עם סלאש אלפא) | hwb(228 27% 7%) |
| CMYK | הדפס, דיו על נייר | לא | cmyk(71%, 57%, 0%, 7%) |
כדאי לזכור את הטבלה מכיוון שהיא ממפה בצורה מסודרת על זרימת עבודה: עיצוב ב-HEX או בחר חזותית, כוונון ב-HSL או HWB, שלח למסכים ב-RGB או HEX, והמיר ל-CMYK רק בגבול ההדפסה.
איך השקיפות עוברת בין פורמטים?
אלפא זה המקום שבו הרבה המרות משתבשות בשקט ערוץ האלפא שולט באטימות, מ-0 (שקוף לחלוטין) ל-1 (אטום לחלוטין) RGBA ו-HSLA נושאים אותו כערך רביעי, ו-HEX בן 8 ספרות נושא אותו כזוג רביעי: #4466EECC האם זה כחול בערך 80 אחוז אטימות, כי CC הוא 204 מתוך 255. HEX רגיל ו cmyk() אין לך ערוץ אלפא בכלל.
ממיר Toolz.dev משמר אלפא דרך כל פורמט שתומך בו.If you paste rgba(0, 0, 0, 0.5) אתה מקבל #00000080 בשורה HEXA ו hsla(0, 0%, 0%, 0.5) בשורה HSLA, כל המתאר את אותו חצי שקוף שחור כאשר אתה מעתיק את HEX רגיל או שורת CMYK במקום, אתה מעתיק את צבע אטום לחלוטין, אשר הוא בחירה מכוונת, לא באג: פורמטים אלה לא יכולים לבטא אטימות, אז הם מראים את הצבע כאילו היה מוצק כאשר שקיפות משנה, להעתיק משורה מודעת אלפא.
האם אני יכול להמיר שם צבע CSS?
כן, וזה עובד בשני הכיוונים הקלד מילת מפתח כגון tomato, rebeccapurple, או slategray והממיר פותר את זה ל-HEX, RGB, HSL, HWB ו-CMYK. הסט המלא של 148 צבעים בעלי שם מגיע ממפרט CSS Color Module Level 4, כך שהערכים תואמים בדיוק למה שדפדפן פותר.
ללכת לכיוון השני זה המקום שבו זה נעשה שימושי באמת. הדבק צבע מספרי והממיר מדווח על שם ה-CSS המדויק אם אחד מתאים, ותמיד מציג את הצבע בעל השם הקרוב ביותר לפי מרחק RGB כאשר הוא לא מתאים. ההתאמה הקרובה ביותר היא שימושית למתן שמות למשתנים ולכתיבת מסמכי עיצוב קריאים: #663399 חוזר כ rebeccapurple, ומשהו קרוב לזה חוזר בתור " הקרוב ביותר: rebeccapurple" אז אתה יודע באיזו שכונה אתה נמצא.
איך זה מתאים לזרימת עבודה עיצובית אמיתית?
הנה איך אני משתמש בצבע על פני פרויקט, והיכן כל כלי מתאים.
אני מתחיל בבחירת צבע ראשוני, בדרך כלל ויזואלית עם בוחר צבעים. ברגע שיש לי את המותג הכחול שלי, אני מעביר אותו דרך ממיר צבע כדי לנעול את ערכי ה-HEX, RGB, HSL ו-CMYK שלו במקום אחד, ואני מדביק אותם במסמך מערכת העיצוב כך שכל חבר לצוות וכל ספק עובדים מאותם מספרים.
ואז אני בונה את הפלטה גוונים תומכים מגיעים מדחיפה של קלילות ב-HSL, ואני בודק כל זוג טקסט על רקע עם ה בודק ניגודיות צבעים אז הפלטה נגישה לפני שהיא נשלחת, לא אחרי תלונה. כשאני צריך פריחת רקע, אני מזין שניים מהצבעים האלה לתוך מחולל גרדיאנט.
לבסוף, עבור מרווחים מגיבים וטיפוגרפיה סביב כל הצבע הזה, אני משלב את הפלטה עם מחולל מהדק CSS אז גדלים בקנה מידה חלקה כמו הצבעים עקביים צבע ופריסה הם שני חצאים של אותו ליטוש.
אם אכפת לך לאן הנתונים שלך הולכים בזמן שאתה עובד, כדאי לקרוא איך הכלים האלה מטפלים בזה הכל בממיר הצבע פועל בצד הלקוח, בחירה עיצובית שכתבתי עליה ב מדריך לפרטיות נתונים בכלים מקוונים, והוא יושב לצד שאר הערכה היומית שלי ב- ערכת כלים למפתחי אינטרנט.
האם הוא מדויק מספיק לייצור?
לעבודת מסך, כן, ללא הסמכה. HEX, RGB, HSL ו-HWB הם כולם ייצוגים מדויקים של אותו צבע sRGB, כך שהמרה ביניהם הלוך ושוב בצורה נקייה: המר צבע ל-HSL ובחזרה ואתה נוחת על אותו משולש RGB, תן או קח יחידה אחת של עיגול בערוץ עיגול זה טבוע בייצוג צבע רציף בערוצים שלמים, לא פגם באף אחד כלי.
עבור CMYK, התייחסו לפלט כקירוב מוצק וסטנדרטי ולא כהוכחה מנוהלת בצבע צבע הדפסה אמיתי תלוי בנייר הספציפי, בדיו ובפרופיל ה-ICC שבו משתמשת המדפסת שלכם, שאף כלי מבוסס דפדפן לא יכול לדעת הממיר משתמש בנוסחת CMYK הנאיבית הסטנדרטית, שהיא בדיוק מה שרוב כלי העיצוב מראים כברירת מחדל ומהווה נקודת התחלה אמינה כאשר עבודה היא קריטית לצבע, קבלו הוכחה פיזית מהמדפסת לפני הריצה המלאה זה הלקח שלימדו אותי המדבקות של חיל הים האפור, וזול יותר ללמוד מהפסקה הזו מאשר מקופסה של מדבקות שגויות.
מה לגבי מרחבי צבע חדשים יותר כמו LAB ו-OKLCH?
אם אתה עוקב מקרוב אחר CSS ראית lab(), lch(), oklab(), ו oklch() מופיעים בגיליונות סגנונות וכלי עיצוב אלה מגיעים ממפרט CSS Color Module Level 4 והם פותרים בעיה אמיתית: RGB, HSL ו-HWB קשורים כולם לדגם המסך sRGB, כך ששני צבעים שנראים שונים באותה מידה לעין יכולים להיות שונים מאוד במרחקים מספריים זה מזה, ותצוגה רחבה יכולה להראות צבעים ש-sRGB פשוט לא יכול לתאר מרחבי הצבעים של OK הם אחידים מבחינה תפיסתית, מה שהופך אותם למצוינים ליצירת פלטות מדרגות באופן שווה ולאינטרפולציה של שיפועים שאינם בוציים באמצע.
בכוונה שמרתי את הממיר הזה ממוקד בפורמטים שאתה מדביק ב-CSS ייצור יומיומי ומוסר למדפסות: HEX, RGB, HSL, HWB ו-CMYK. זה הסט שמכסה את הרוב המכריע של המשימות האמיתיות, וכל אחת מהן ממפה בצורה נקייה לאותו צבע sRGB, כך שההמרות ביניהן מדויקות והפיכות. הרווחים בטווח הרחב כוללים החלטות מיפוי טווח שקל לטעות בעדינות, וערבובם לממיר פשוט יחליף בהירות לכיסוי שרוב האנשים לא צריכים.
הכלל המעשי שאני עוקב אחריו: להגיע ל-OKLCH כאשר אתה יוצר באופן אלגוריתמי פלטה או שיפוע ואתה רוצה שלבים אחידים מבחינה תפיסתית, ולהישאר עם HEX, RGB ו-HSL לעבודה היומיומית של כתיבת רכיבים. כאשר אתה עושה עיצוב ב-OKLCH, המר את צבעי העוגן המתקבלים עד HEX או RGB עם כלי העיצוב שלך לפני המסירה, כך שהערכים בגיליון הסגנונות שלך הם אותם הערכים שהממיר הזה וחברי הצוות שלך יכולים לקרוא.
שאלות נפוצות
כיצד אוכל להמיר HEX ל-RGB?
פצל את קוד HEX בן שש ספרות לשלושה זוגות וקרא כל אחד כמספר הקסדצימלי מ-0 עד 255. ב #4466EE, 44 הוא 68 (אדום), 66 הוא 102 (ירוק), ו EE הוא 238 (כחול), נותן rgb(68, 102, 238). הדבק את קוד ה-HEX בממיר וערך ה-RGB מופיע מיד לצד כל פורמט אחר.
כיצד אוכל להמיר RGB ל-HEX?
המר כל אחד מהערכים האדומים, הירוקים והכחולים (0 עד 255) למספר הקסדצימלי דו ספרתי והצטרף אליהם לאחר גיבוב. rgb(68, 102, 238) הופך #4466EE. הממיר עושה זאת באופן מיידי וגם נותן לך את צורת HEXA בת 8 ספרות כאשר קיים ערך אלפא.
מה ההבדל בין HSL ל-HWB?
HSL מתאר צבע לפי גוון, רוויה ובהירות, בעוד HWB מתאר את אותו גוון לפי כמה לבן וכמה שחור מעורבבים בו. HWB הוא לרוב אינטואיטיבי יותר עבור גוונים וגוונים: הגדלת הלובן מבהירה את הצבע והגברת השחור מכהה אותו. שניהם ממפים לאותו ערך RGB בדיוק, כך שתוכלו לעבור ביניהם בחופשיות.
מתי עלי להשתמש ב-CMYK במקום ב-RGB?
השתמש CMYK עבור הדפסה ו RGB עבור מסכים.CMYK הוא מודל חיסור המבוסס על דיו ציאן, מגנטה, צהוב, שחור, אז זה מה מדפסות מסחריות מצפה.RGB הוא תוסף ומתאר אור הנפלט על ידי מציג צבע מסך יש קירוב CMYK, אבל שני הסולמות שונים, כך צבעי מסך חיים יכולים להיראות עמומים יותר בהדפסה.
האם הממיר תומך בשקיפות?
כן. ספק ערך אלפא דרך rgba(), hsla(), או HEX בן 8 ספרות והאטימות נשמרת בכל פלט מודע לאלפא פורמטים ללא ערוץ אלפא, כגון HEX רגיל ו cmyk(), הצג את הצבע האטום לחלוטין, אז בדוק את פלט RGBA או HEXA כאשר השקיפות חשובה.
האם אני יכול להמיר שם צבע CSS?
כן. הקלד מילת מפתח CSS כגון tomato, rebeccapurple, או slategray והממיר פותר את זה ל-HEX, RGB, HSL, HWB ו-CMYK. זה עובד גם הפוך: הדבק צבע מספרי והוא מדווח על שם ה-CSS המדויק אם אחד מתאים, בתוספת הצבע בעל השם הקרוב ביותר לעיון.
האם ממיר הצבעים חופשי ופרטי?
כן. הממיר חינמי לחלוטין ללא הרשמה, ללא מגבלות וללא סימני מים. כל הניתוחים וההמרות פועלים בדפדפן שלך באמצעות JavaScript בצד הלקוח, כך שהצבעים שאתה מזין לעולם לא עוזבים את המכשיר שלך והכלי ממשיך לעבוד במצב לא מקוון לאחר טעינת הדף.
