אנו כולם יודעים איזה חשיבות צבעים מחזיקים בכל דבר, בין אם זה פריסת אתר, תמונה, וידאו, או כל רכיב גרפי אחר. בעיקר, צבע הוא חוויית תפיסה סובייקטיבית שתוצאתה מהאינטראקציה בין אור, העין, והמוח. הוספת צבעים לאתר נותן חיים חדשים לפריסה כולה ולרכיבים גרפיים. אף אחד לא אוהב לבקר בעמודי אינטרנט עם צבעים לבנים, שחורים ואפורים עליהם. צבעים מקנים לרכיבים מראה ריאליסטי יותר ומושכים לעין האדם.
לא רק באופן תיאורטי, גם פסיכולוגיה משחקת תפקיד כאשר אנו משתמשים בצבעים באתרים. הוכח תיהיה מדעית כי סט מסוים של צבעים מפעיל רגשות מסוימים במוח האדם, כגון צבעי סתיו כגון כתום וצהוב מייצגים שמחה או אושר, צבע אדום לעונות חגיגיים, וכחול רקול ואמין. בנוסף, נראה כי הרבה חברות מזון תמיד משתמשות באדום וצהוב באתרים שלהן, חברות תרופות מעדיפות להשתמש בירוק באתרים שלהן, חברות כושר לפעמים משתמשות בכתום, וכן הלאה.
יצירת ממשק משתמש כוללת מספר דברים, כולל פריסות אתר CSS, רכיבים, פוזיציונינג של CSS, ניווט, טקסט, וכו'. דבר נוסף שעובד כגורם לממשק המשתמש הוא צבעי HSL ב־CSS. גם צבעים ב־CSS מחזיקים חשיבות בממשק המשתמש, דבר שרוב האנשים ממניעים.
לא רק מפתחי אתרים אלא גם צלמי מקצוע ועורכי וידאו משתמשים הרבה במשחק הצבעים. יצירת תמונה מושלמת היא העבודה שלהם, ולשם כך הם משתמשים המון בניגודיות צבעים. לכן, בחירת סט הצבעים האידיאלי עבור רכיבים היא חשובה ביותר.
CSS יש רבים מתוך תכונות, כולל background-color, color, linear-gradient ועוד, שמאפשרות למשתמשים להוסיף או למלא את הצבע המבוקש בין האלמנטים. כל התכונות האלה גם עוזרות למשתמשים להפוך את הפונט לצבעוני או אפילו להוסיף דפוסי צבעים יפים לטקסטים ולאלמנטים.
כל התכונות הצבעים ב CSS דורשות שיטה להגדרת הצבע ואחר כך למלא אותו באלמנט המסוגל להגדיר. CSS סביב תכונות צבעים בנינים, כמו HSL, RGB, HSLA, הקסדימלי ועוד. עדיין, השיטות האלה דורשות קבוצת מספרים אינטגרליים ביחידות שונות כדי לקבל את הצבע.
למרות שהרבה בלוגים והוריות מתמקדים בשיטות RGB ו הקסדימלי, יש צורך בלשים לב להיות מעבר לכל הצדדים של השיטה HSL. בבלוג הזה, נעדור עמוק לתפקיד של צבעים HSL ב CSS, כל העונות סביב השיטה HSL ואיך הם שונים משיטות אחרות.
לפני שינוי ישר לשיטה HSL, בואו נדבר על שתי השיטות האחרות למפני CSS לצבעים – RGB ו הקסדימלי, ומדוע אנחנו צריכים צבעים HSL ב CSS.
ההבדל בין RGB והקסדימלי
השיטה RGB פועלת על ידי הערער שכל צבע הוא קלף של סגול, ירוק ואדום. השיטה דורשת שלושה מספרים דקולים שניתן בתוך טווח 0 – 255 בפונקציי
הנה מספר דוגמאות של שילובי צבעים RGB בקנה מידות שונים:
בואו נקח דוגמה כדי להבין את העובדה של השיטה RGB.
.container {
background-color: rgb(0, 200, 120);
width: 100%;
height: 100px;
}תוצאה:
עכשיו, באמת אלה לגבי השיטה הקסדצית. היא גם עובדת על עצם של המודל של כל צבע הוא ערבוב של אדום, ירוק וכחול. השיטה הקסדצית דורשת שלוש מספרים קסדציים בן שתיים ספרות ומתחילים בסימן ‘#’. שלושת המספרים הקסדציים האלה מציינים את רמת העוצמה של האדום, הירוק והכחול, באופן ספציפי.
בגלל שקיימת העוסקה בערכים קסדציים, ובסיס הקסדציה נמצא בטווח הערך 0-15, בו ערכים בתוך טווח 10-15 מיוצגים באלפביתים A-F. לכן, 00 מעניקה צבע עם העוצמה הנמוכה ביותר, ו FF מוציא לעוצמה הגבוהה ביותר.
הנה מספר צבעים קסדציים מקובלים עם קודים:
בואו נקח דוגמה כדי להבין את העובדה של השיטה הקסדצית.
.container1{
background-color:#91D8E4;
}תוצאה:
עבודת השיטות RGB ו הקסדצית היא נוחה ויכולה לספק את כל מה שאנו רוצים. אך זה לא נכון. עבודת השתי השיטות האלה אינה קלה כמו שזה נראה. בואו נראה איך.
בעיות שקשורות בקודים הצבע RGB והקסדציים.
אחד הבעיות המשמעותיות שהשיטות האלה שניות מביאות היא שהן אינן אינטואיטיביות. זה אומר שהן לא עובדות על פי אופן בו מוח האדם מזהה צבעים. כאשר אדם רואה צבע, מוח האדם לא מבדיל את הצבע לצבעים אדום, ירוק וכחול. לכן, זה נהפך לקשה עבורנו לזהות את הצבעים דרך מספר ה -RGB שלהם ומספר ההקסדצימלי או העשרוני.
בתוך כאלה קושיים, ייתכן שיתגלה ביומיום של מפתחים או בודקים צורך בהמרת RGB להקס או להפך לטובת הבנת האדם והתקשורת.
כאשר יוצרים ממשק משתמש, מעצבי UI ומפתחי אינטרנט צריכים מספר גוונים שונים של צבע מסוים כדי לשמור על ערכת עיצוב קבועה במהלך הממשק. לדוגמה, 30 גוונים של כחול, 20 גוונים של ירוק, 10 גוונים של כתום, וכו ', תלוי בדרישה. זה יכול ליצור בלגן אם נשתמש במשתני CSS כדי לשמור על מספר זה של גרסאות של צבעים. כאשר אנו מבחינים כי ערכי ה -RGB של כל הגרסאות הללו אינם קשורים, דברים מחמירים.
אך החסרונות הללו של שיטות RGB והקסדצימליות ניתן להסיר עם צבעי HSL ב CSS. עכשיו נבין את התפקיד של צבעי HSL ב CSS על ידי התחלת הדיון במה היא שיטת HSL, איך היא עובדת, וכיצד היא מתגברת על החסרונות של שיטות RGB והקסדצימליות.
מה זה HSL?
HSL אומר קוטב של הוא, סטטוס ובהירות. במילים אחרות, HSL מורכב משלושה גורמי מדידה – הוא, סטטוס ובהירות. כמו שלשת השיטות האחרות שדברנו עליהן למעלה, השיטה ה HSL גם עובדת על הבחנה שכל צבע הוא ערמת של המערבות האדומה, הירוקה והכחולה.
מפני שהמרכיבים העיקריים בפורמט ה HSL הם האדומה, הירוקה והכחולה, גלגל הצבעים RGB הוא המושג המרכזי מאחורי הצבעים HSL ב CSS.
גלגל הצבעים RGB (אדום ירוק כחול) מייצג בעיקר צבעים שמלאים בתוך מעגל. הגלגל מציג את יחסיות בין צבעים עיקריים, שנייריים ושלישיים. עם זאת, ישנם שלוש סוגים של גלגלי צבעים – RGB (אדום ירוק כחול), CMY (סיאן מגנטה ירוק) ו RYB (אדום ירוק כחול).
הדגימה העליונה מייצגת גלגל הצבעים RGB. ניתן להבחין שהאדום הוא ב-0 מעלות, הירוק ב-120 מעלות, והכחול ב-240 מעלות. בואו נעשה עוד עמוק ונבין מה שקורה מאחורי הקלעים כשאנו משתמשים בצבעים HSL ב CSS.
הוא
הוא הערך הראשון שניתן להעניק בעזרת צבעים HSL ב CSS. זה מדד לעוגה של הצבע על גלגל הצבעים. הערך המוגדר מתחיל מהציר השמאלי המקדם ונעה בסיטרה לצדדים, והצבע בנקודה הזו נשאר. מפני שזה מדד עוגה, הערך המקובל הראשון הוא במידות מעלות. אך השיטה
הערך של היחידת המעלה נמצא בתחום של 0-360 מעלות. אדום ב 0 מעלות, ירוק ב 120 120 מעלות, וכחול ב 240 מעלות. עבור rad, הטווח של הערכים הוא 0-6.28 rad. היחידות המשמשות ביותר בהסL הצבעים ב CSS הם ערכים בדגמה.
בואו נקח דוגמה כדי להבין את העובדה של המעלה.
div {
border: 2px solid;
height: 100px;
background-color: hsl(123deg, 39%, 49%);
}תוצאה:
למרות שערכים הזוגים בין 0-360 מוגבלים, הם מקבלים ערכים קטנים מאשר 0 מעלות וגדולים מעל 360 מעלות. כשהערך מעל 360, הוא מועבר לתוך הטווח על-ידי הסרתו מ 360. במקרה של ערכים קטנים מאשר 0 או ערכים שליליים, הערך מווסף ל 360, וערך התוצאה הוא בשימוש בכדי להשיג צבע.
background-color: hsl(400deg, 39%, 49%);תוצאה:
background-color: hsl(-120deg, 39%, 49%);תוצאה:
<div class="container1">Container 1</div>
<div class="container2">Container 2</div>
div {
border: 2px solid;
height: 100px;
text-align: center;
font-size: 80px;
margin-bottom: 10px;
}
.container1 {
background-color: hsl(60, 39%, 49%);
}
.container2 {
background-color: hsl(420, 39%, 49%);
}תוצאה:
אם אנחנו מביטים בערכים העוגנים, אז 60 מעלות ו-420 מעלות (420 – 360 = 60) שני הערכים אותו הם. לכן, אנחנו מקבלים את אותו הצבע הרקע בשני התוכניות, כפי שנבחן בדוגמה העליונה.
.container1 {
background-color: hsl(90, 39%, 49%);
}
.container2 {
background-color: hsl(-270, 39%, 49%);
}תוצאה:
פה גם, תוכלו להבחין ש-90 מעלות ו-270 מעלות מסיימות את אותו התוצאה בסיבה אחת למה שנבחן בדוגמה הקודמת. 90 ו-270 הערכים אותם אם אנחנו מקבלים בערכים העוגנים.
עכשיו, בואו נעבור לתכונה השנייה של השיטה HSL, כלומר הצבעים.
צבעים
הרוויה מגדירה את רמת הטהור של הצבע וכמה הצבע יהיה משובץ או לא משובץ. כלומר, התכונת של הרוויה מניה את רמת העצמה של הצבע. המדידה של הרוויה מקבלת ערך של מספר שלם ביחידות אחוז להגדיר את הרוויה של הצבע.
בואו נקח דוגמה כדי להבין את הפעולה של הרוויה.
.container{
background-color:hsl(60, 45%,49%);
}פלט:
אם ערך התכונת של הרוויה גבוה, אז עצמת הצבע גם תהיה גבוהה, וכמות הגוון האפור בצבע זה תהיה פחותה. לכן, ערך של 100% של הרוויה יציג לנו צבע טהור, ערך של 50% יתוצא בחצי צבע וחצי גוון אפור, ו-0% יתוצא בגוון אפור מלא.
.container1{
background-color:hsl(60, 0%,49%);
}
.container2{
background-color:hsl(420, 25%,49%);
}
.container3{
background-color:hsl(420, 50%,49%);
}
.container4{
background-color:hsl(420, 75%,49%);
}
.container5{
background-color:hsl(420, 100%,49%);
}פלט:
בדוגמה שלמעלה, ניתן לראות את ההבדל שאנו מקבלים בצבע הרקע של התופפים על ידי הגבלת ערך של הרוויה מ-0% עד 100%. בערך של 0%, אנו מקבלים את הצבע האפור המלא בתופף 1, וככל שהערך מתרבה, עצמת הצבע גם עולה. לסוף, העצמה היא הגבוהה ביותר ב-100% בתופף 5.
מאחר והתכונה של הרוויה מקבלת ערך באחוזים, הערך שנרכש נופל תחת טווח של 0% עד 100%. למעשה, המשתמש יכול גם להעביר ערכים גדולים מ-100% וקטנים מ-0% בתכונת הרוויה.
אך כגון בתכונת הגוון, אין שימוש בעברת ערכים מחוץ למגבלה מכיוון שאם המשתמש מעביר ערך גדול מ-100%, עצמת הצבע נשארת שווה ל-100%. על ערכים מתחת ל-0% (ערכים שליליים), העצמה נשארת שווה ל-0%.
.container1 {
background-color: hsl(60, 0%, 49%);
}
.container2 {
background-color: hsl(420, -25%, 49%);
}פלט:
כאן, ניתן לראות כי השמנתנו ערכים של 0% ו-25% למאפיין הרוויות, ובשני התאים, אנו מקבלים את אותו צבע רקע.
.container1 {
background-color: hsl(60, 100%, 49%);
}
.container2 {
background-color: hsl(420, 200%, 49%);
}פלט:
בדוגמה זו, אתחילנו את הערכים 100% ו-200% למאפיין הרוויות, ולערכים שונים אלו, אנו מקבלים את אותו צבע רקע בשני התאים.
כעת, הגיע הזמן למאפיין הסופי של שיטת HSL המשמשת בצבעי HSL ב-CSS, כלומר, הבהירות.
בהירות
כפי שמרמז שמו, המאפיין של הבהירות בוקר את כמות האור בצבע. במילים אחרות, הבהירות יכולה גם להיות מוגדרת כהתכונה ששולטת בכמה קל או כהה יהיה הצבע. דומה למאפיין הרוויות, גם למאפיין הבהירות דרוש ערך של מספר שלם ביחידות אחוז.
בואו נציג דוגמה כדי להבין את פעולת הבהירות.
.container {
background-color: hsl(60, 39%, 49%);
}פלט:
.container1 {
background-color: hsl(60, 39%, 0%);
color: white;
}
.container2 {
background-color: hsl(420, 39%, 25%);
}
.container3 {
background-color: hsl(420, 39%, 50%);
}
.container4 {
background-color: hsl(420, 39%, 75%);
}
.container5 {
background-color: hsl(420, 39%, 100%);
}
פלט:
כאן, תוכלו לראות כי ב-0% בהירות, צבע הרקע הוא שחור בצד א', וככל שהערך של הבהירות עולה, הבהירות בצבע מתרבה, וב-100% בהירות היא מלאה; ולכן, צבע הרקע הוא לבן מלא בצד ה-5.
כמו במאפיין הרוויות, המאפיין של הבהירות מקבל ערכים מעל 100% ומתחת ל-0%. אך ערכים מעל 100% עובדים באותו אופן כמו 100%, וערכים מתחת ל-0% (ערכים שליליים) עובדים באותו אופן כמו 0%. בואו נראה זאת בפועל.
.container1 {
background-color: hsl(60, 39%, 0%);
}
.container2 {
background-color: hsl(420, 39%, -25%);
}פלט:
.container1 {
background-color: hsl(60, 39%, 100%);
}
.container2 {
background-color: hsl(420, 39%, 250%);
}פלט:
בדוגמה זו, אתה יכול לומר שלמרות שהערכים הם 100% באורך של בהירות בתוך האחסון 1 ו-200% בתוך האחסון 2, זה עדיין נותן לנו את אותו תוצאה עם הצבע הרקע.
אנחנו דיברנו על שלושת המאפיינים של הם צבעים HSL בCSS, אך זה לא הכל. מאפיין נוסף של צבעים HSL בCSS הוא "A," שהוא קיצור מקרי "אלפה." זהו המאפיין הרביעי. המאפיין האלפה מספק את בהירות הצבע. במילים אחרות, המאפיין האלפה פשוט הגדילה את רמת השקיפות של הצבע. בHSL, כדי להשתמש במאפיינים האלפה, משמשים את השיטה HSLA.
של צבעים HSL בCSS, המאפיינים האחרים דורשים ערך שכולו מורכב מיחידות, אך המאפיין האלפה לא דורש ערך עם יחידות. המאפיין האלph דורש ערך ללא יחידות בין 0 – 1. ב-0, הצבע בלתי נראה או נסתר; ב-1, המאפיין האלph מגיע לשיאו, והצבע מולט לגמרי.
.container{
background-color:hsla(60, 39%,49%, 0);
}יוצאת:
.container{
background-color:hsla(60, 39%,49%, 1);
}יוצאת:
פה, בגלל שהשתמשנו במאפיין האלph עם ערך 1, הצבע הרקע של האחסון מתחיל להיות ברקע, ואפשר להתחיל עם הצבע הרקע.
דרישה ערך ללא יחידות היא לא דבר הדifferentiates את המאפיין האלph לבד. מאפיין האלph יכול לקבל ערך בין 0 ל-1, אפילו ערך בסימן חמשה עשרה (0.1, 0.2, 0.01), שזה לא עובד במאפיינים האחרים של צבעים HSL בCSS.
.container {
background-color: hsla(60, 39%, 49%, 0.5);
}
בדוגמה זו, כפי שניתן לראות, השמנו ערך של 0.5 (חצי) למאפיין אלפא. לכן, כתוצאה, אנו מקבלים את צבע הרקע עם חצי שקיפות בתוך המיכל. לא רק עשרונים במקום אחד, תכונת אלפא מקבלת גם עשרונים במקום שני. זה נותן שליטה מלאה על רמת השקיפות של הצבע.
הנה דוגמה המציגה זאת.
.container {
background-color: hsla(60, 39%, 49%, 0.25);
}פלט:
כאן, העברנו ערך של 0.25 שהוא ערך עשרוני במקום שני למאפיין אלפא.
יתרונות של שימוש בצבעים HSL ב־CSS
צבעים HSL (גווי, רוויון, בהירות) הם תוספת יחסית חדשה למודול הצבע של CSS, המציעה דרך יותר אינטואיטיבית וגמישה לציון צבעים בפיתוח אתרים. בהשוואה לקודי צבע RGB או הקסדצימליים המסורתיים, צבעים HSL ב־CSS מציעים מגוון של יתרונות למעצבים ולמפתחים.
בסעיף זה, נבחן בפרט את היתרונות של שימוש בצבעים HSL ב־CSS ונדון באופן שבו ניתן להשתמש בהם כדי ליצור עיצובים חזותיים ונגישים עבור עמודי רשת ויישומים.
לגבי היישום המעשי, צבעים HSL ב־CSS מותרכים ברמות מקצועיות רבות בשל היתרונות שלהם.
קיימים מספר יתרונות לשימוש בצבעים HSL כפי שמפורט להלן:
- משפר את זריזות העבודה בצורה משמעותית
- שימושי ביותר כאשר אנו מעוניינים לקבל צבעים שונים על ידי שמירה על הצבע הבסיסי התקני
- שיטה עוצמתית וישירה המציעה מגוון רחב של צבעים
- עובדת על הדרך המעשית בה אנשים מסתכלים על צבעים והיא קלה ללמוד ולקרוא מהר
- צבעים שנוצרים באמצעות שיטת HSL מוצגים בביטחון, וקל לדמיין את התוצאה.
היתרון משמעותי נוסף של השימוש בצבעים HSL ב CSS הוא שהוא גם עובד כתחליף ל RGB וניתן להמרחב בקלות ל RGB. מפני ששימוש בשיטת RGB ו HSL דורש את אוסף הערכים מספריים הזה כדי לעבוד, אנחנו יכולים להשתמש בשיטות המסוגלות להמרחב בקלות את ערכים המספריים של הצבעים HSL לערכים השברים עבור שיטת RGB.
כדי להקל על הדברים עוד, יש כמה מתכנני צבעים מקוונים שיכולים להמרחב בקלות מודלים של צבעים אחד לשני. כל היתרונות האלה עושים של הצבעים HSL ב CSS לשיטה מועדפת להגדרת צבעים בפרוייקטים. ויש הרבה סיבות נוספות לגבי המספר הגדל יום אחר יום של המפתחים המבחרים להשתמש בצבעים HSL ב CSS בעוד אחרים. למרות שרוב מומחי CSS עדיין מעדיפים להשתמש ב HEX או RGB, HSL מקבל תשומת-לב יותר ויותר.
יישומות של השימוש בצבעים HSL ב CSS
צבעים HSL ב CSS מספקים דרך רבת יכולת ואינטואיטיבית להגדירת צבעים ויש להם הרבה יישומים בפיתוח הרשת. הנה כמה מהיישומים העיקריים של השימוש בצבעים HSL ב CSS:
צבעים ציטוצים
ברמה המקצועי
בדוגמה זו, ניתנו קבע לשני מבני אתרים בסיסיים. בשניהם, החלק הראשי מולא בצבע רקע והחלק השלישי קיים אותו צבע רקע אך בשינוי אפוך יותר גבוה. על מנת להשיג את האפקט הזה, שמרנו על ערך האינטוניציה של הבהירות נמוך בחלק הראשי וגבוה בחלק השלישי.
על ידי נסיון עם ערכים שונים של האינטוניציה של הבהירות, נוכל להשיג צבעים כהודים ובהירים של אותו הצבע שנשתמש בהם בתמונות התבנית של האתר.
צבעים כהודים בזמן עלייה
עלול שאתה חווה שהרבה אלמנטים בממשק האתר משנים את הצבע בזמן עלייה על המשק. צבעם משתנה מצבע בהיר לכהה. במקום זה, הסL צבעים בCSS מתעסקים בכדי לספק צבעים כהודים ובהירים של צבע אחד.
button {
padding: 10px;
border-radius: 20px;
background-color: hsl(240, 39%, 70%);
color: white;
font-size: 20px;
}
button:hover {
background-color: hsl(240, 39%, 50%);
cursor: pointer;
}
פה, אתה יכול לומר שבכפתור העליון, הצבע הוא של צבע בהיר, על מנת זאת, שמרנו על ערך האינטוניציה של הבהירות בשיעור 70%. ואחרי העלייה, הצבע של הכפתור משתנה לצבע כהה, כפי שאתה יכול לומר בכפתור התחתון. על מנת להשיג את האפקט הזה, שמרנו על ערך של 60% לאינטוניציית הבהירות, שזה פחות מהכפתור העליון.
צבעים לבנים שונים
ברוב הזמן, אנחנו צריכים להשתמש בלבן כצבע הכותרת כדי לגרום לטקסט להיראות קצת שונה מהמ
צבעי ה-HSL ב־CSS יכולים לעזור לנו לקבל גוונים שונים של צבע לבן. אנו יכולים להוסיף ערכים שונים למאפיין הבהירות בשיטת ה-HSL כדי לקבל את הגוונים השונים של צבע לבן.
.container1 {
color: hsl(30, 49%, 100%);
}
.container2 {
color: hsl(30, 49%, 90%);
}
.container3 {
color: hsl(30, 49%, 95%);
}
.container4 {
color: hsl(30, 49%, 85%);
}פלט:
בדוגמה זו, ניתן לראות כי בכל ארבעת התאים, הטקסט אינו בצבע הלבן הבסיסי. השתמשנו בגוונים שונים של לבן כדי ליצור מראה מרתק ולשמור על הטקסט בצבע לבן. לכך, עיבדנו את ערך הבהירות עבור צבע הגופן.
סוגי כפתורים
צבעי ה-HSL ב־CSS מועילים גם כאשר יש לנו שני גוונים שונים של אותו צבע עבור כפתורים. השמת גוונים שונים של צבע משותף עשויים להקל על המשתמש לזיהוי מהיר של איזה הוא הכפתור הראשי ואיזה הוא הכפתור המשני.
בחיי היומיום, גוונים כהים משמשים לכפתורים הראשיים, וגוונים בהירים משמשים לכפתורים המשניים. כדי לקבל גוונים בהירים וכהים של צבע משותף, אנו מעבירים ערכים גבוהים ונמוכים למאפיין הבהירות בשיטת ה-HSL.
בואו נראה זאת בפועל באמצעות דוגמה.
.primary {
color: white;
background-color: hsl(10, 49%, 55%);
}
.secondary {
background-color: hsl(10, 49%, 80%);
}פלט:
בדוגמה לעיל, הכפתור העליון הוא הראשי, והכפתור התחתון הוא המשני. הצבע בגוון כהה משמש בכפתור הראשי עם ערך נמוך של הבהירות, והצבע בגוון בהיר משמש בכפתור המשני עם ערך גבוה של הבהירות.
צבעים לערכת נושא כהה
שימוש בניגודיות צבע הוא חיוני בממשק המשתמש. בעיקר כשהמשתמש הפעיל את הערך החשוך על האתר. לפי מחקרים שבוצעו ב-2022, 81.9% מהמשתמשים משתמשים בערך החשוך על הסלולריים שלהם. מזה, אתה יכול לדמיין את חשיבות הניגודיות הצבעים בממשקים של ערכים חשוכים.
לפי סטנדרטים הנגישות של WCAG, צריך לשמר לפחות 4:5:1 לטקסט הגוף בעבור משטחים חשוכים. וכדי להצדיק את החוק הזה, נמנע משימוש בצבעים מוגמרים בערכים חשוכים. שימוש בצבעים מוגמרים גם יגביר את הדחק על העיניים אם יש להם ברקע חשוך.
בתמונה העליונה, קל לראות שזה הרבה יותר קל לקרוא את הטקסט עם ערך נמוך של סטרעציות מאשר טקסט עם ערך גבוה של סטרעציות. לכן, תמיד מוצע להשתמש בצבעים לא מוגמרים מעבר לרקעים חשוכים.
איך לבחור את הספיציפית הטובה ביותר לצבעים
שלושת השיטות שבאמת דיברנו יש תועלתם ויתרונותם. מה שיעזב את השיטה הטובה ביותר להשתמש בה מוכיח את השימוש בה. אין מרכיב משותף עליו אנחנו יכולים להשוות את כל שלושת הספיציפיות לצבעים, אך בואו נבדוק את כל אחד מאלה.
הקוד הקשרי
אם אתה אינך בתחום של עיצוב ויצירת פרוייקטים לשימוש פרטי, אתה עלול להיו
העתק את קוד ההקס הרצוי שלך והטמע אותו בתוכנית שלך. אבל אתגרים עולים כאשר אנו צריכים לתפעל את השקיפות של הצבע. שיטת ההקס לא מספקת למשתמשים שליטה על שקיפות הצבע.
RGB
עכשיו כאשר לבחור את שיטת ה-RGB: שיטה זו נוחה לכל המפתחים והמעצבים המקצועיים בתחום עריכת התצלומים ועיצובם. סיבה נוספת היא ששיטת ה-RGB היא הספציפיקטור הצבע הנפוץ ביותר בתוכנות עיצוב פופולריות רבות, כולל CorelDraw, PhotoShop ו-Illustrator. אך שיטת ה-RGB נכשלה כאשר מדובר בהצעת גוונים שונים של אותו צבע מבלי להסתבך יותר מדי.
HSL
עכשיו נבחן את שיטת ה-HSL. מפתחים מקצועיים של אתרי אינטרנט ומעצבי ממשקי משתמש נוטים לשמור על נושא משותף בכל האינטרנט. במצב זה, שימוש בצבעי HSL ב-CSS הופך ליד עוזרת בשל יכולתו לשנות את גוון הצבע על ידי שינוי ערכי הרוויה והבהירות. בסופו של דבר, הכל תלוי בהעדפה האישית. אתה יכול לבחור בכל אחת מהשיטות הללו כדי לבצע את עבודתך.
תאימות לדפדפנים
אין טעם לציין צבעים אם הצבעים המוגדרים אינם נותנים את התוצאה הרצויה בדפדפנים. כדי להימנע ממצב כזה, הספציפיקטור צבע שבו משתמשים בעיצוב ממשק המשתמש צריך להיות תואם לכל דפדפן.
למזלנו, פעולת צבעי ה-HSL ב-CSS היא לחלוטין עצמאית מהדפדפן. שיטת ה-HSL תואמת לחלוטין לדפדפנים. כך, לא משנה מה דפדפן שהמשתמש משתמש בו, הוא תמיד ימצא את עמוד האינטרנט עם צבעים מוגדרים כראוי.
אך ניתן לבצע בדיקות סקוץים בין ברוזרים כדי להבטיח שהמרחבים HSL בCSS יעניקו את התוצאות הרצועות בכל הברוזרים. פלטפורמות בדיקות איכות מתמשכות (למשל, LambdaTest) עוזרות להריץ בדיקות התאמה בין הברוזרים השונים במערך שלם של ברירושים אמיתיים, מכשירים ותערוכות OS. הן בדוגמה בדוגמא לבדיקה האם הצבעים CSS המסוגלים לפעול בצורה נכונה בברוזרים ובמכשירים.
סיימת הבלוג!
בבלוג זה למדנו על התפקיד של צבעים HSL בCSS ואיך הם שונים משיטות הצבע האחרות. שוחחנו גם על היישומים של צבעים HSL בCSS והיתרונות שלהם. למדנו גם איך HSL Colors בCSS מעניקים חופשיות ודיוק גדולים יותר כאשר מצביעים על צבעים בעיצוב אינטרנטי.
דרך שימוש בצבעים HSL בCSS, מעצבים יכולים לקבל שליטה רבה יותר על הצבעים הצבעה והבהירות, וכך נוצר טווח רחב יותר של טבעות וצבעים הנגינים בסיטים ויישומים כדי לתאמת את המידע האישיות של המותג או התחום האסתטי.
צבעים HSL בCSS מאפשרים יותר נגישות לאנשים עם יכולויות מיוחדות; על ידי הגדלת אופטימיות וצבעים, מיציאים יותר קונטרסט וקריאת קל לטקסט ואלמנטים העיצוביים אחרים, שעוזרים למשתמשים לנווט ולהבין את התוכן יותר בקלות. כל באחרון, צבעים HSL בCSS מעני
Source:
https://dzone.com/articles/create-cohesive-ux-using-hsl-colors-in-css