OKLCH בהסבר פשוט: פורמט הצבע שסוף סוף תואם את העין

OKLCH מתאר צבע לפי מידת הבהירות שלו בעין, מידת הצבעוניות שלו והגוון שלו. בניגוד ל-HSL, אותו ערך בהירות באמת נראה בהיר באותה מידה בכל גוון, ולכן פלטות, מצבי hover וניגודיות נגישה הופכים לצפויים.

עודכן 28 בספטמבר 2026זמן קריאה: 3 דק׳

מה זה OKLCH

OKLCH הוא הצורה הקוטבית של Oklab, מרחב צבע תפיסתי שפרסם ביורן אוטוסון (Björn Ottosson) ב-2020. יש בו שלושה מספרים. L היא הבהירות הנתפסת, מ-0 (שחור) עד 1 או 100% (לבן). C היא הכרומה, כמות הצבע, מ-0 (אפור) ועד כ-0.37 בצבעים החיים ביותר שמסכים יכולים להציג. H היא זווית הגוון, מ-0 עד 360 מעלות.

כך נראה אותו צבע בפורמטים שונים. כל ערך למטה מחושב בזמן אמת ב-PickShade, כך שאפשר להעתיק אותו כמו שהוא.

דוגמה: #ff5733

פורמט	ערך
HEX
RGB
HSL
OKLCH
OKLab

למה OKLCH עדיף על HSL

הבהירות ב-HSL היא נוסחה, לא תפיסה. hsl(60 100% 50%) הוא צהוב בוהק ו-hsl(240 100% 50%) הוא כחול כהה, ובכל זאת לשניהם בהירות של 50%. פלטה שבנויה על HSL דורשת תיקון ידני בכל גוון.

ב-OKLCH, צבעים עם אותו L נראים בהירים באותה מידה. אפשר לשמור על L ו-C ולסובב את H כדי לקבל סדרת גוונים מאוזנת, או לשמור על H ו-C ולשנות את L בצעדים כדי לקבל סולם דרגות נקי. זו הסיבה ש-Tailwind CSS v4 מגדיר את כל פלטת ברירת המחדל שלו ב-OKLCH.

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

תחביר ב-CSS

את הבהירות אפשר לכתוב באחוזים או כמספר בין 0 ל-1. הכרומה היא מספר. הגוון הוא זווית במעלות. השקיפות נכתבת אחרי לוכסן.

CSS

color: oklch(62.8% 0.258 29.23);
background: oklch(0.7 0.15 250 / 50%);
border-color: oklch(from var(--brand) calc(l - 0.1) c h);

תמיכה בדפדפנים

oklch() עובד בכל הדפדפנים העדכניים: Safari מגרסה 15.4, Chrome ו-Edge מגרסה 111, Firefox מגרסה 113. זה הרבה יותר מ-90% מהמשתמשים. בשביל דפדפנים ישנים מאוד כדאי להוסיף ערך HEX חלופי בשורה שלפני ערך ה-OKLCH.

CSS

color: #ff5733;
color: oklch(68% 0.21 33.7);

מגבלות כרומה וגמוט

OKLCH יכול לתאר צבעים שאף מסך לא מסוגל להציג. הכרומה המקסימלית תלויה בבהירות ובגוון: צהוב חי אפשרי רק בבהירות גבוהה, וכחול חי רק בבהירות נמוכה. כשערך נמצא מחוץ לגמוט של sRGB או Display P3, הדפדפן ממפה אותו חזרה פנימה, וזה יכול להזיז את הצבע.

PickShade מסמן צבעים שנמצאים מחוץ ל-sRGB ומציע את הצבע הקרוב ביותר שנכנס לגמוט. הוא נמצא על ידי הורדת הכרומה תוך שמירה על הבהירות והגוון, אותה שיטה ש-CSS Color 4 ממליץ עליה.

איך להמיר HEX ל-OKLCH

ההמרה עוברת מ-HEX ל-sRGB, מ-sRGB לאור ליניארי, מ-sRGB ליניארי למרחב הקולטנים LMS, דרך שורש שלישי ומטריצה ל-Oklab, ולבסוף מ-Oklab לקואורדינטות קוטביות. חישוב ידני מועד לטעויות, אז פשוט מדביקים כל צבע בממיר ומעתיקים את התוצאה.

שאלות ותשובות

האם כל הדפדפנים תומכים ב-OKLCH?

כן, כל הדפדפנים העדכניים: Safari 15.4 ומעלה, Chrome ו-Edge 111 ומעלה, Firefox 113 ומעלה. אם צריך לתמוך בדפדפנים ישנים יותר, מוסיפים לפניו שורת HEX.

מה ההבדל בין OKLCH ל-LCH?

שניהם מתארים בהירות, כרומה וגוון. lch() ב-CSS מבוסס על CIELAB, שבו הכחולים נסחפים לכיוון סגול כשמשנים את הבהירות. OKLCH מבוסס על Oklab, ששומר על גוון יציב, כך שסולם דרגות של כחול נשאר כחול.

למה צבע ה-OKLCH שלי נראה אחרת ממה שהקלדתי?

כנראה שהכרומה גבוהה יותר ממה שהמסך יכול להציג בבהירות ובגוון האלה. הדפדפן ממפה את הצבע לתוך הגמוט של המסך. כדאי להוריד את הכרומה עד ש-PickShade מפסיק לסמן אותו כצבע מחוץ לגמוט.

אפשר להשתמש ב-OKLCH עם Tailwind CSS?

כן. Tailwind CSS v4 כבר משתמש ב-OKLCH בפלטת ברירת המחדל שלו, ואת הצבעים המותאמים ב-@theme אפשר לכתוב ישירות ב-OKLCH.