CSS Color - השלמות

1. שמות צבעים

רשימת שמות הצבעים המוגדרים ב-CSS.

2. System Colors

Canvas

color: Canvas;

צבע הרקע של אזור התצוגה.

CanvasText

color: CanvasText;

צבע הטקסט על Canvas.

LinkText

color: LinkText;

VisitedText

color: VisitedText;

ActiveText

color: ActiveText;

ButtonFace

background: ButtonFace;

ButtonText

color: ButtonText;

Field

background: Field;

FieldText

color: FieldText;

Highlight

background: Highlight;

HighlightText

color: HighlightText;

AccentColor

color: AccentColor;

AccentColorText

color: AccentColorText;

GrayText

color: GrayText;

3. contrast-color()

הפונקציה מיועדת לבחירת צבע בעל ניגודיות מתאימה ביחס לצבע נתון.


color: contrast-color(red);


color: contrast-color(#336699);


color: contrast-color(
    oklch(60% 0.2 40)
);

יש לבדוק תמיכת דפדפן לפני שימוש בפרודקשן.

4. alpha()

תחביר הקשור לעבודה עם ערוץ Alpha בצבעים.


alpha(red / 50%);


alpha(#336699 / 0.5);


alpha(oklch(60% 0.2 40) / 30%);

5. @color-profile

כלל at-rule המאפשר להגדיר פרופיל צבע מותאם לשימוש עם פונקציית color().


@color-profile --my-profile {
    src: url("profile.icc");
}


.box {
    color: color(--my-profile 1 0 0);
}

6. Custom Color Profiles

מבנה כללי


@color-profile --custom-space {
    src: url("profile.icc");
}

.element {
    color: color(
        --custom-space
        1
        0
        0
    );
}

פרופילי צבע מותאמים תלויים בתמיכת הדפדפן ובפרופיל הצבע עצמו.

7. Relative Color Syntax

RGB


color: rgb(
    from red
    r
    g
    b
);

HSL


color: hsl(
    from blue
    h
    s
    l
);

OKLCH


color: oklch(
    from red
    l
    c
    h
);

שינוי ערוץ


color: rgb(
    from red
    calc(r + 20)
    g
    b
);

8. color-mix()

sRGB


color: color-mix(
    in srgb,
    red,
    blue
);

OKLCH


color: color-mix(
    in oklch,
    red 70%,
    blue 30%
);

LCH


color: color-mix(
    in lch,
    red,
    blue
);

Hue


color: color-mix(
    in lch longer hue,
    red,
    blue
);

אפשרות	משמעות
shorter hue	המסלול הקצר יותר בגלגל הגוון
longer hue	המסלול הארוך יותר
increasing hue	כיוון עולה
decreasing hue	כיוון יורד