מדריך מרוכז לבחירת צבעים, גוונים, מרחבי צבע ותחבירי צבע
CSS כולל שמות צבעים מוגדרים מראש.
color: red;
background-color: royalblue;
border-color: tomato;
color: #f00;
קיצור של RGB.
color: #ff0000;
שישה תווים: אדום, ירוק וכחול.
color: #f008;
כולל שקיפות.
color: #ff000080;
RGB בתוספת Alpha.
color: rgb(255 0 0);
ערכי Red, Green, Blue.
color: rgb(255 0 0 / 50%);
הערך האחרון מייצג שקיפות.
color: rgba(255, 0, 0, 0.5);
| ערך | משמעות |
|---|---|
| 0 | מינימום |
| 128 | ערך ביניים |
| 255 | מקסימום |
color: hsl(0 100% 50%);
Hue = גוון, Saturation = רוויה, Lightness = בהירות.
color: hsl(200 80% 50% / 60%);
color: hsla(200, 80%, 50%, 0.6);
color: hwb(0 0% 0%);
H = Hue
W = Whiteness
B = Blackness
color: hwb(200 20% 10%);
color: hwb(200 20% 10% / 50%);
color: lab(50% 40 30);
L — בהירות
a — ציר צבע
b — ציר צבע
color: lch(50% 60 40);
L — בהירות
C — Chroma
H — Hue
color: oklab(60% 0.1 0.1);
color: oklch(60% 0.15 40);
color: oklab(60% 0.1 0.1 / 50%);
color: oklch(60% 0.15 40 / 50%);
color: color(display-p3 1 0 0);
בחירת צבע במרחב צבע נתמך.
color: color(display-p3 1 0 0);
color: color(rec2020 1 0 0);
color: color(xyz 0.4 0.2 0.1);
color: color(xyz-d50 0.4 0.2 0.1);
color: color(xyz-d65 0.4 0.2 0.1);
color: device-cmyk(0% 100% 100% 0%);
שימוש מיועד בעיקר לתרחישי פלט והדפסה, בהתאם לתמיכת הדפדפן.
ניתן ליצור צבע חדש מתוך צבע קיים.
color: rgb(from red r g b);
color: hsl(from blue
h
calc(s + 10%)
l
);
color: blue;
border-color: currentColor;
background: transparent;
color: color-mix(
in srgb,
red 50%,
blue
);
color: light-dark(
black,
white
);
בחירת צבע שונה בהתאם למצב בהיר או כהה.
color-mix(in oklch, red, blue);