CSS Color Dictionary

1. מבוא

CSS מאפשר לייצג צבע באמצעות שמות, ערכים מספריים, פונקציות צבע ומרחבי צבע שונים.

המילון מחלק בין:

שמות צבע
HEX
RGB
HSL
HWB
Lab
LCH
OKLab
OKLCH
color()
מרחבי RGB
XYZ
צבע יחסי
ערבוב צבעים
אינטרפולציה

פקודת CSS כללית לדוגמה: color: red;

2. Named Colors

CSS כולל שמות צבע מוגדרים מראש.

black

white

red

green

blue

yellow

orange

purple

pink

brown

cyan

magenta

navy

teal

lime

olive

maroon

silver

gray

fuchsia

aqua

שימוש


color: crimson;
background-color: royalblue;
border-color: tomato;

3. HEX

#RGB

color:#f00;

#RRGGBB

color:#ff0000;

#RGBA

color:#f008;

#RRGGBBAA

color:#ff000080;

#FF0000

#00FF00

#0000FF

#FFFF00

#00FFFF

#FF00FF

4. RGB / RGBA

RGB

color:rgb(255 0 0);

RGB עם Alpha

color:rgb(255 0 0 / 50%);

RGBA

color:rgba(255,0,0,.5);

ערך	משמעות נפוצה
0	מינימום
128	אמצע
255	מקסימום

5. HSL / HSLA

HSL

color:hsl(0 100% 50%);

Hue, Saturation, Lightness.

HSLA

color:hsla(0,100%,50%,.5);

תחביר Alpha מודרני

color:hsl(200 80% 50% / 50%);

6. HWB


color:hwb(0 0% 0%);
color:hwb(120 20% 10%);
color:hwb(240 10% 20% / 50%);

H = Hue
W = Whiteness
B = Blackness

7. Lab / LCH

Lab

color:lab(50% 40 30);

Lab עם Alpha

color:lab(50% 40 30 / 50%);

LCH

color:lch(50% 60 40);

LCH עם Alpha

color:lch(50% 60 40 / 50%);

8. OKLab / OKLCH

OKLab

color:oklab(60% .1 .1);

OKLab Alpha

color:oklab(60% .1 .1 / 50%);

OKLCH

color:oklch(60% .15 40);

OKLCH Alpha

color:oklch(60% .15 40 / 50%);

9. color()

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

sRGB

color:color(srgb 1 0 0);

sRGB Linear

color:color(srgb-linear 1 0 0);

Display P3

color:color(display-p3 1 0 0);

Display P3 Linear

color:color(display-p3-linear 1 0 0);

A98 RGB

color:color(a98-rgb 1 0 0);

ProPhoto RGB

color:color(prophoto-rgb 1 0 0);

Rec.2020

color:color(rec2020 1 0 0);

XYZ

color:color(xyz 1 0 0);

XYZ D50

color:color(xyz-d50 1 0 0);

XYZ D65

color:color(xyz-d65 1 0 0);

Alpha


color:color(display-p3 1 0 0 / .5);

10. מרחבי RGB

מרחב	דוגמה	סוג
srgb	color(srgb 1 0 0)	RGB
srgb-linear	color(srgb-linear 1 0 0)	Linear RGB
display-p3	color(display-p3 1 0 0)	Wide Gamut
display-p3-linear	color(display-p3-linear 1 0 0)	Linear P3
a98-rgb	color(a98-rgb 1 0 0)	Adobe RGB
prophoto-rgb	color(prophoto-rgb 1 0 0)	ProPhoto
rec2020	color(rec2020 1 0 0)	Wide Gamut

11. XYZ

XYZ

color(xyz 0.4 0.2 0.1);

XYZ-D50

color(xyz-d50 0.4 0.2 0.1);

XYZ-D65

color(xyz-d65 0.4 0.2 0.1);

XYZ הוא מרחב צבע מבוסס שלושה ערכים.

12. Rec.2100

תחבירי Rec.2100 קיימים במסגרת ההגדרות המודרניות של צבע וידאו ו-HDR.

Rec.2100 PQ


color:color(rec2100-pq 1 0 0);

Rec.2100 HLG


color:color(rec2100-hlg 1 0 0);

Rec.2100 Linear


color:color(rec2100-linear 1 0 0);

13. Relative Color Syntax

צבע יחסי


color:rgb(from red r g b);


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


color:hsl(
    from blue
    h
    calc(s + 10%)
    l
);


color:color(
    from green
    srgb
    r
    g
    b
);

currentColor


color:blue;
border-color:currentColor;

14. color-mix()

ערבוב בסיסי


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

משקלים


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

LCH


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

OKLCH


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

15. Color Interpolation

מרחבי אינטרפולציה


in srgb
in srgb-linear
in display-p3
in a98-rgb
in prophoto-rgb
in rec2020
in lab
in oklab
in xyz
in xyz-d50
in xyz-d65
in hsl
in hwb
in lch
in oklch

Hue interpolation


shorter hue
longer hue
increasing hue
decreasing hue

דוגמה


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

16. ערכים ומאפיינים מיוחדים

transparent


background:transparent;

currentColor


border-color:currentColor;

none


color:rgb(none 0 0);

Alpha


color:rgb(255 0 0 / 50%);

color-gamut


@media (color-gamut:p3){
    .box{
        color:color(display-p3 1 0 0);
    }
}