מדריכי צבע
מדריכים קצרים ומעשיים על צבע למסכים: פורמטים, ניגודיות, פלטות, מצב כהה ו-CSS. כל מספר מחושב, וכל דוגמה אפשר להעתיק.
- OKLCH בהסבר פשוט: פורמט הצבע שסוף סוף תואם את העיןOKLCH מתאר צבע לפי מידת הבהירות שלו בעין, מידת הצבעוניות שלו והגוון שלו. בניגוד ל-HSL, אותו ערך בהירות באמת נראה בהיר באותה מידה בכל גוון, ולכן פלטות, מצבי hover וניגודיות נגישה הופכים לצפויים.28 בספטמבר 2026זמן קריאה: 3 דק׳
- APCA מול WCAG 2: על איזו בדיקת ניגודיות לסמוךיחסי הניגודיות של WCAG 2 הם מה שהחוק דורש. APCA הוא מודל חדש יותר שמנבא קריאות הרבה יותר טוב, במיוחד בערכות נושא כהות ובצבעים רוויים. בדיקה לפי שניהם נותנת טקסט שעומד בתקן וגם באמת קל לקריאה.28 בספטמבר 2026זמן קריאה: 2 דק׳
- גמוט צבעים בהסבר פשוט: sRGB, Display P3 וצבעים מחוץ לגמוטגמוט הוא אוסף הצבעים שמסך או מרחב צבע יכולים להציג. הרשת נבנתה על sRGB, אבל רוב הטלפונים ומחשבים ניידים רבים מציגים היום Display P3, עם אדומים, ירוקים וכתומים חיים יותר באופן מורגש.28 בספטמבר 2026זמן קריאה: 2 דק׳
- פורמטי צבע בהסבר פשוט: HEX, RGB, HSL, OKLCH וכל השאראת אותו צבע אפשר לכתוב בתריסר דרכים. כאן מוסבר מה המשמעות של כל פורמט, מתי כדאי להשתמש בו ואיך אותו צבע נראה בכולם.28 בספטמבר 2026זמן קריאה: 1 דק׳
- קודי צבע HEX בהסבר פשוט: איך #RRGGBB עובדקוד צבע HEX כמו #1e90ff הוא שלושה זוגות של ספרות הקסדצימליות: כמות האור האדום, הירוק והכחול, כל אחד מ-00 (בכלל לא) עד ff (מלא, 255). זוג רביעי קובע את האטימות: 80 פירושו בערך 50%, ו-ff פירושו אטום לגמרי.28 בספטמבר 2026זמן קריאה: 5 דק׳
- איך לבחור פלטת צבעים לאתר או לאפליקציהמתחילים מצבע מותג אחד, מפיקים ממנו סולם של 50 עד 950, מוסיפים אפורים עם גוון קל וארבעה צבעים סמנטיים, ואז בודקים כל צמד של טקסט ורקע מבחינת ניגודיות ועיוורון צבעים. את הדרגות בוחרים לפי בהירות OKLCH ולא לפי העין: על רקע לבן, טקסט עובר את WCAG AA ברגע שהבהירות יורדת לכ-0.55, בלי קשר לגוון.28 בספטמבר 2026זמן קריאה: 5 דק׳
- צבעים למצב כהה: איך לבחור רקעים, טקסט וצבעי הדגשהמשתמשים ברקע אפור כהה כמו #121212 במקום שחור טהור, בטקסט לבן שבור כמו #e5e5e5 במקום לבן טהור, ובגרסאות בהירות ופחות רוויות של צבעי המותג. את הטקסט בודקים גם ב-APCA ולא רק ב-WCAG 2, כי WCAG 2 מעריך יתר על המידה את הניגודיות על רקעים כהים.28 בספטמבר 2026זמן קריאה: 5 דק׳
- הרמוניות צבעים: משלים, אנלוגי, טריאדי ועודהרמוניית צבעים בוחרת גוונים בזוויות קבועות על גלגל הצבעים: 180° זה מזה במשלים, 30° זה מזה באנלוגי, 120° זה מזה בטריאדי. כשמסובבים את הגוון ב-OKLCH ולא ב-HSL, הצבעים נשארים בהירים באותה מידה, ואף גוון לא בולט במקרה.28 בספטמבר 2026זמן קריאה: 4 דק׳
- color-mix() וצבעים יחסיים ב-CSS: הבהרות, hover ושקיפותcolor-mix() מערבב שני צבעים במרחב צבע שאתם בוחרים, ותחביר הצבעים היחסיים מאפשר לשנות ערוץ אחד של צבע קיים, למשל oklch(from var(--brand) calc(l - 0.1) c h). שניהם רצים בדפדפן, עובדים עם משתני CSS ומחליפים את רוב פונקציות הצבע של Sass. ערבבו ב-oklab להבהרות ול-hover, וב-srgb לשקיפות.28 בספטמבר 2026זמן קריאה: 5 דק׳
- פלטת צבעים נגישה לעיוורי צבעים: איך לבדוק ולתקן את הצבעיםפלטת צבעים נגישה לעיוורי צבעים שומרת על הבחנה בין כל זוג צבעים בפרוטנופיה, בדויטרנופיה, בטריטנופיה ובגווני אפור. הפתרון האמין ביותר הוא לא גוון מיוחד אלא פער בבהירות: צבעים שרחוקים זה מזה בכ-0.2 בבהירות OKLCH נשארו נבדלים בכל סימולציה שהרצנו. הוסיפו לזה אייקונים או תוויות, כי צבע לבדו תמיד מכשיל מישהו.28 בספטמבר 2026זמן קריאה: 5 דק׳
- צבעי Tailwind CSS: פלטת OKLCH של v4, צבעים מותאמים ודרגותTailwind CSS v4 מגיע עם 26 סולמות צבע, בכל אחד 11 דרגות מ-50 עד 950, סך הכול 286 צבעים שמוגדרים ב-OKLCH כמשתני CSS כמו --color-blue-500. מוסיפים צבעים משלכם עם @theme { --color-brand-500: oklch(...) }. אותו מספר דרגה לא אומר אותה בהירות: blue-600 הוא הכחול הבהיר ביותר שעובר 4.5:1 על לבן, בעוד שצהוב צריך 700.28 בספטמבר 2026זמן קריאה: 5 דק׳