בוחר צבעים: HEX, RGB, HSL - ובדיקת הניגודיות שדילגתי עליה

המותג שלנו כתום הוא #E99537. אני אוהב את זה. זה ' חם, זה ' לא אותו כתום כמו כולם 's, והוא יושב ליד הכחול שלנו בלי קרב.

השתמשתי בו כצבע קישור על לבן במשך חודשים.

ואז בעצם הרצתי את המספרים. #E99537 על #FFFFFF נותן יחס ניגודיות של 2.38:1. WCAG 2.1 SC 1.4.3 דורש 4.5:1 עבור טקסט רגיל. זה עושה ' אפילו לא לנקות את סרגל 3:1 עבור גדול טקסט. כל קישור כתום באתר ההוא היה, לפי הסטנדרט שטענתי שאכפת לי ממנו, בלתי קריא - והוא נראה לי בסדר גמור, על הצג שלי, במשרד שלי, בעיניים.

That's העניין בצבע: התפיסה שלך לגבי זה היא לא מדידה. #E99537 על הצי שלנו #0F172A ציונים 7.50:1, בנוחות AAA. אותו צבע, פסק דין שונה לחלוטין, ושום כמות של פזילה עליו לא הייתה אומרת לי. אתה צריך לחשב את זה.

ה בוחר צבעים על Toolz.dev ממיר בין HEX, RGB, ו HSL ומראה לך את יחס הניגודיות, בדפדפן, ללא העלאה מדריך זה הוא מה שאני רוצה I & #39;d לקרוא לפני ששלחתי קישורים אלה.

TL;DR: להשתמש HEX עבור ערכים סטטיים, HSL בכל פעם שאתה צריך לגזור צבע (מצבי ריחוף, פלטות, מצב כהה) מכיוון שהבהירות היא מספר שאתה יכול להחסיר ממנו, ו RGBA/HSLA כאשר אתה צריך אלפא. הניגודיות היא 4.5:1 עבור גוף טקסט ו-3:1 עבור טקסט גדול - בדוק את זה, don't eyeball it. בוחר צבעים עושה את ההמרות ואת היחס. then take your stops to the מחולל שיפוע.

HEX, RGB, HSL: What's ההבדל בפועל?

כולם מתארים את אותם צבעי sRGB. מה ששונה הוא אילו שאלות כל אחת מהן קלה לענות.

HEX

שלושה בתים בהקסדצימלי. #4466EE הוא אדום 44 (68), ירוק 66 (102), כחול EE (238). קְצִירָה #RGB עובד רק כאשר כל זוג מוכפל - #FF0000 מתמוטט ל #F00, אבל #4466EE לא ניתן לקצר. הצורה בת 8 הספרות מוסיפה אלפא: #4466EE80 הוא בערך 50% אטום.

It's ברירת המחדל ב-CSS כי זה's קומפקטי וחד משמעי. זה גם אטום לחלוטין לקריאה אנושית, וזו הסיבה שמעולם לא הסתכלתי על קוד משושה וידעתי מה לשנות כדי להפוך אותו לקצת פחות רווי.

RGB

אותם שלושה ערוצים, עשרוני, 0–255. תחביר CSS מודרני צבע 4 מוריד את הפסיקים: rgb(68 102 238 / 80%). RGB הוא מה שאתה רוצה ב-JavaScript, קנבס ו-WebGL, כי זה ' הפורמט שהכל במורד הזרם צורך בפועל ואתה יכול לעשות עליו חשבון.

HSL - זה שמרוויח את מקומו

גוון (0–360° סביב הגלגל), רוויה (0–100%), קלילות (0–100%). #4466EE הוא hsl(228, 83%, 60%).

Here's למה זה משנה. מצב ריחוף של button's צריך להיות " באותו צבע, מעט כהה יותר." ב-HEX that's שאלה שאין עליה תשובה. ב-HSL it's חיסור:

.btn {
  background: hsl(228 83% 60%);   /* #4466EE */
}
.btn:hover  { background: hsl(228 83% 52%); }  /* darker  */
.btn:active { background: hsl(228 83% 44%); }  /* darker still */
.btn:disabled { background: hsl(228 22% 70%); } /* desaturated, lifted */

ארבעה מצבים, גוון אחד, אין כלי עיצוב זה 90% מהסיבה ש-HSL נמצא בערכת הכלים שלי.

המלכוד - וזה ' הוא אמיתי - הוא שקלילות HSL היא לא תפיסתי. hsl(60 100% 50%) (צהוב) ו hsl(240 100% 50%) (כחול) שניהם טוענים ל-50% קלילות, ואחד מהם ישרוף את הרשתית שלך בעוד השני כמעט שחור. That's הבעיה ש-OKLCH פותר.

OKLCH, בקצרה

רמת צבע CSS 4 מביא oklch(L C H), כאשר L הוא נתפס קלילות. שני צבעים עם אותו L באמת נראים בהירים באותה מידה. It' הוא הכלי הנכון ליצירת רמפה טונאלית שבה כל צעד מרגיש מרווח באופן שווה, והוא 's מה I'd משתמשים עבור מערכת עיצוב חדשה היום. It's גם למה linear-gradient(in oklch, blue, yellow) does't go grey in the middle - לראות את מדריך מחולל שיפוע CSS.

CMYK

הדפס בלבד. ל-CSS אין CMYK. אם מדריך מותג נותן לך ערכי CMYK, מישהו צריך להמיר אותם ל-sRGB, וההמרה היא משוערת מכיוון שהסולמות באמת שונים - יש ציאנים שמדפסת יכולה לפגוע בהם שהצג שלך יכול 't, ולהיפך. לקבל שניהם ערכים המוגדרים במדריך המותג במקום להמיר אחד לשני ולקוות.

איך אני ממיר ביניהם?

HEX → RGB הוא רק המרת בסיס. #4466EE → התפצל ל 44, 66, EE → 68, 102, 238.

RGB → HSL כרוך במציאת ערוצי max/min, הפקת קלילות מהממוצע שלהם, ואז הרוויה והגוון משם. It's חמש עשרה שורות קוד, וכתבתי את חמש עשרה השורות האלה מהזיכרון בדיוק אפס פעמים. לחד פעמי, ה בוחר צבעים עושה את זה באופן מיידי. לקוד:

const hexToRgb = (hex) => {
  const n = parseInt(hex.replace('#', ''), 16);
  return { r: (n >> 16) & 255, g: (n >> 8) & 255, b: n & 255 };
};

const rgbToHex = (r, g, b) =>
  '#' + [r, g, b].map(v => v.toString(16).padStart(2, '0')).join('');

וזה שחשוב בעצם - יחס בהירות וניגודיות יחסי, ישר מה הגדרת WCAG:

const luminance = (hex) => {
  const { r, g, b } = hexToRgb(hex);
  const [R, G, B] = [r, g, b]
    .map(v => v / 255)
    .map(v => (v <= 0.03928 ? v / 12.92 : ((v + 0.055) / 1.055) ** 2.4));
  return 0.2126 * R + 0.7152 * G + 0.0722 * B;
};

const contrast = (a, b) => {
  const [x, y] = [luminance(a), luminance(b)].sort((m, n) => n - m);
  return (x + 0.05) / (y + 0.05);
};

contrast('#E99537', '#FFFFFF'); // 2.38  ← the one that got me
contrast('#E99537', '#0F172A'); // 7.50

שימו לב למקדמים הירוקים האלה: 0.2126 אדום, 0.7152 ירוק, 0.0722 כחול. ירוק נושא בערך שבעים אחוז של בהירות נתפסת. That's מדוע ירוק עז וכחול עז בבהירות HSL זהה לא נראים דומים, וזה ' כל הסיבה שקיימים מרחבי צבע תפיסתיים.

באילו יחסי ניגודיות אני באמת צריך לפגוע?

כמה מספרים ממשיים, כולם מחושבים ולא מנחשים:

שני דברים נופלים מהשולחן הזה.

#767676 הוא האפור הבהיר ביותר שעובר AA על לבן. לא #888, לא #999. כל " טקסט משני מושתק" צבע שאני רואה בטבע הוא גוון או שניים מעבר לו. שווה לשנן.

אותו צבע מותג יכול לעבור ולהיכשל בהתאם למקום שבו אתה שם אותו. הכתום שלנו אינו שמיש כקישור על לבן ומצוין כמבטא על חיל הים. זה 't פגם בצבע; it' מהווה מגבלה על היכן מותר לצבע לחיות. ברגע שמסגרתי את זה כך, ההחלטה העיצובית נעשתה קלה יותר, לא קשה יותר.

איך אני בונה פלטה שעושה ' לא להילחם בעצמה?

בחר גוון אחד. משתנה קלות. That's כל השיטה, ו-HSL הופך אותה למכנית:

:root {
  /* One hue: 228. Nine steps of lightness. */
  --blue-50:  hsl(228 83% 96%);
  --blue-100: hsl(228 83% 91%);
  --blue-200: hsl(228 83% 84%);
  --blue-300: hsl(228 83% 76%);
  --blue-400: hsl(228 83% 68%);
  --blue-500: hsl(228 83% 60%);  /* #4466EE — the brand colour */
  --blue-600: hsl(228 83% 50%);
  --blue-700: hsl(228 78% 41%);
  --blue-800: hsl(228 72% 33%);
  --blue-900: hsl(228 66% 25%);
}

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

ואז שם דברים לפי תפקיד, לא לפי המראה, אז מיתוג מחדש הוא שינוי בשורה אחת במקום למצוא ולהחליף על פני ארבעים קבצים:

:root {
  --color-primary: var(--blue-500);
  --color-primary-hover: var(--blue-600);
  --color-text: #0F172A;
  --color-text-muted: #6B7280;   /* 4.83:1 on white — checked */
  --color-surface: #F8FAFC;
  --color-border: #E5E7EB;
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-primary: var(--blue-400);  /* lift it — dark bg needs a lighter primary */
    --color-text: #F8FAFC;
    --color-text-muted: #9CA3AF;
    --color-surface: #1E293B;
    --color-border: #374151;
  }
}

מצב אפל אינו היפוך

אל תהפכו את הפלטה שלכם שני דברים נשברים מיד:

1. צבעים רוויים מתגברים על רקע כהה. כחול חי שנקרא "professional" על לבן קורא כמו " vibrating" על כמעט שחור. הרם קלות, שחרר מעט את הרוויה.
2. רקעים שחורים טהורים גורמים להלצה- טקסט בהיר על #000 מריחות לאנשים עם אסטיגמציה השתמש באפור-כחול כהה מאוד (#0F172A, #111827) במקום. זה גם נותן לך לאן ללכת על משטחים מוגבהים, אשר שחור טהור עושה 't.

מזימות הרמוניה, בכנות

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

איזה עוד טיולים אנשים?

צבע לבדו אף פעם לא מספיק

בסביבות 1 מכל 12 גברים ו-1 מכל 200 נשים יש צורה כלשהי של חוסר ראיית צבע. אם אדום-אמצעי-שגיאה וירוק-אמצעי-הצלחה הם שלך רק אות, נתח משמעותי מהמשתמשים שלך ראה שני תגים אפורים זהים הוסף סמל, הוסף מילה. WCAG SC 1.4.1 מפורש לגבי זה וזה עולה לך אחד <span>.

המבחן בן שנייה אחת: צלם מסך את ממשק המשתמש שלך, הסר את הרוויה שלו וראה אם הוא עדיין עובד. אם זה 't, צבע עושה עבודה נושאת עומס זה צריך 't לעשות לבד.

גם טבעות פוקוס זקוקות לניגודיות

מחווני מיקוד הם רכיבי ממשק משתמש ונופלים תחת כלל 3:1 נגד צמוד צבעים - מה שאומר שטבעת פוקוס חייבת להיות מנוגדת הן לאלמנט שהיא מקיפה והן לדף שמאחוריה קו מתאר כחול עדין על כפתור כחול הוא כשל נפוץ ובלתי נראה לחלוטין.

עיצוב באפור תחילה

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

שימוש ב-Color Picker

1. פתח את בוחר צבעים.
2. גרור על הספקטרום, או הדבק ערך ידוע בשדה HEX, RGB או HSL - האחרים מעדכנים בשלב.
3. שימו לב ל-HSL. That's פורמט העבודה שלך.
4. צור את הרמפה על ידי החזקת H ו-S ודריכת L.
5. בדוק כל צמד טקסט/רקע מול השורה 4.5:1 לפני זה נכנס לגיליון סגנונות, לא אחרי שלקוח שולח לך דואל על זה.

הכל רץ בכרטיסייה שלך שום דבר לא מועלה - אתה יכול לאשר את זה בחלונית DevTools Network תוך כעשר שניות.

שאלות נפוצות

מה 's ההבדל בין HEX ל-RGB?

שום דבר, מבחינה סמנטית - הם מקודדים את אותם שלושה ערוצי sRGB.HEX כותב אותם בבסיס 16 (#4466EE), RGB בעשרוני (rgb(68 102 238)). HEX קומפקטי יותר והוא מוסכמות ה-CSS; קל יותר לחשב עם RGB ב-JavaScript. בחר לפי הקשר, לא לפי עיקרון.

באיזה פורמט צבע עלי להשתמש ב-CSS?

HEX עבור ערכים סטטיים אתה'רק מתמלל. HSL בכל זמן שתצטרך לגזור צבע - מצבי ריחוף, מצבים מושבתים, רמפה טונאלית, גרסה במצב כהה - כי בהירות היא מספר שאתה יכול להתאים. HSLA או RGBA כאשר אתה צריך אלפא. OKLCH אם אתה ' בונים מערכת עיצוב חדשה ורוצים שלבים אחידים מבחינה תפיסתית.

איך אני יודע אם הצבעים שלי נגישים?

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

מהו האפור הבהיר ביותר שאני יכול להשתמש בו לטקסט על לבן?

#767676, הנוחת ב-4.54:1 - בקושי מעל קו AA 4.5:1. #999999 הוא רק 2.85:1 ונכשל. אם אתה רוצה AAA, #595959 מגיע בדיוק ל-7.00:1.

מדוע בהירות HSL אינה תואמת את הבהירות הנתפסת?

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

איך אני בונה פלטת מצבים אפלים?

Don't הפוך את הבהיר. בנה פלטה שנייה: רקע אפור-כחול כהה ולא שחור טהור (שחור טהור גורם להלציה לקוראים עם אסטיגמציה), גרסאות בהירות ומעט פחות רוויות של המבטאים שלך, וטקסט ש-' הוא אוף-וויט ולא #FFFFFF. החלף אותם עם מאפיינים מותאמים אישית של CSS תחת prefers-color-scheme: dark.

מה ' הוא הצבע הטוב ביותר עבור כפתור קריאה לפעולה?

יש't one.הראיות ל-"כתום ממיר את best" הוא דק ובעיקר פולקלור מה שחשוב הוא שה-CTA מנוגד לכל מה שסביבו ושאותו צבע אומר אותו דבר בכל מקום באתר אם הדף שלך הוא בעיקר כחול, CTA כתום עובד - בגלל הניגוד, לא הכתום.

האם אוכל להשתמש בצבעי CMYK באינטרנט?

לא - ל-CSS אין סימון CMYK, והסולמות don' t ממפה בצורה נקייה, כך שכל המרה היא קירוב. אם אתה צריך עקביות מותג על פני ההדפסה והמסך, הגדר את שני הערכים במדריך המותג מההתחלה במקום להמיר אחד לשני.

איך אני ממיר צבע hex ל-rgb?

פצל את המשושה בן שש הספרות לשלושה זוגות וקרא כל זוג כמספר בסיס 16 מ-0 עד 255. #4466EE הופך rgb(68, 102, 238): 44 הוא 68, 66 הוא 102, ו-EE הוא 238. קיצור בן שלוש ספרות כגון #46E מתרחב תחילה על ידי הכפלת כל ספרה. בוחר הצבעים עושה המרה זו באופן מיידי, בשני הכיוונים.

מהו קוד צבע משושה?

קוד צבע משושה הוא ייצוג בן שש ספרות, בסיס 16 של צבע sRGB, תוך שימוש בשתי ספרות כל אחת עבור הערוצים האדומים, הירוקים והכחולים לאחר מוביל #. #FFFFFF לבן ו #000000 הוא שחור. ספרה שביעית ושמינית אופציונלית מוסיפים ערוץ אלפא (אטימות), כמו ב #4466EE80.

עוטף

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

החשבון לא קשה. It's רק משהו שאתה צריך לעשות, ועשיתי ' במשך חודשים, באתר שלי, בצבע שבחרתי בעצמי.

ה בוחר צבעים ממיר בין HEX, RGB, ו HSL ונותן לך את יחס הניגודיות, חינם וכל כולו בדפדפן שלך.Pair it with the מחולל שיפוע לתערובות שמחזיקות את הניגודיות שלהן מקצה לקצה, וראה את שאר המדף ב מדריך כלי פרודוקטיביות למפתחים.