Kolor w CSS3

Plansza interaktywna wrzesień 2014

URL:
http://www.plotkarka.eu/PI/css3-color/
Autor:
Radosław Kowaluk

Właściwości kolorów

Kolor tekstu
color:
color

np. color:silver;

Przezroczystość elementu CSS3
opacity:
alphavalue

np. opacity: 0.5;

Wartość color;

Nazwy podstawowe w systemie dziesiętnym i szesnastkowym*
color rgb(R,G,B)#rrggbb #rgb color rgb(R,G,B)#rrggbb #rgb
maroon; rgb(128,0,0) #800000 #800 red; rgb(255,0,0) #ff0000 #f00
yellow; rgb(255,255,0) #ffff00 #ff0 olive; rgb(128,128,0) #808000 #880
purple; rgb(128,0,128) #800080 #808 fuchsia; rgb(255,0,255) #ff00ff #f0f
white; rgb(255,255,255) #ffffff #fff lime; rgb(0,255,0) #00ff00 #0f0
green; rgb(0,128,0) #008000 #080 navy; rgb(0,0,128) #000080 #008
blue; rgb(0,0,255) #0000ff #00f aqua; rgb(0,255,255) #00ffff #0ff
teal; rgb(0,128,128) #008080 #088 black; rgb(0,0,0) #000000 #000
silver; rgb(192,192,192) #c0c0c0 #ccc gray; rgb(128,128,128) #808080 #888

*) W systemie szesnastkowym cyfry 0-9 mają te same wartości co w systemie dziesiętnym, natomiast litery odpowiadają następującym wartościom: A = 10, B = 11, C = 12, D = 13, E = 14 oraz F = 15.

Kolor i przezroczystość

Modele kolorów

Modele RGB (sRGB) i RGBA CSS3
Definiowanie koloru RGB i RGBA
R(ed) czerwony, G(reen) zielony, B(lue) niebieski, A(lpha) przezroczystość
rgb(R,G,B); R, G, B = 0, 1, ... , 255
A = 0, 0.01, 0.02, ... , 1
rgba(R,G,B,A);
rgb(R%,G%,B%); R%, G%, B% = 0%, 1%, ... , 100%
A = 0, 0.01, 0.02, ... , 1
rgba(R%,G%,B%,A);
#rrggbb; rr, gg, bb = 00, 11, ... , FF
#rgb; r, g, b = 0, 1, ... , F
Modele HSL CSS3 i HSLA CSS3
Definiowanie koloru HSL i HSLA
H(ue) odcień lub barwa, S(aturation) nasycenie lub saturacja, L(ightness) jasność
hsl(H,S,L); 0 <= H < 360
0% <= S <=100%
0% <= L <=100%
0 <= A <=1
hsla(H,S,L,A);
Modele CMY i CMYK CSS4
Definiowanie koloru CMY i CMYK
C(yan) cyjan lub turkus, M(agenta) magenta lub purpurowy, Y(ellow) żółty, K(black) czarny
device-cmyk(C,M,Y,K); 0% <= C <=100%, 0% <= M <=100%,
0% <= Y <=100%, 0% <= K <=100%

Uwaga

Modele CMY i CMYK dotyczą drukowania stron internetowych. Model HSV nie jest dostępny.

Modele kolorów

Nazwy kolorów CSS3
Nazwy kolorów
 aliceblue  antiquewhite  aqua
 aquamarine  azure  beige
 bisque  black  blanchedalmond
 blue  blueviolet  brown
 burlywood  cadetblue  chartreuse
 chocolate  coral  cornflowerblue
 cornsilk  crimson  cyan
 darkblue  darkcyan  darkgoldenrod
 darkgray  darkgreen  darkgrey
 darkkhaki  darkmagenta  darkolivegreen
 darkorange  darkorchid  darkred
 darksalmon  darkseagreen  darkslateblue
 darkslategray  darkslategrey  darkturquoise
 darkviolet  deeppink  deepskyblue
 dimgray  dimgrey  dodgerblue
 firebrick  floralwhite  forestgreen
 fuchsia  gainsboro  ghostwhite
 gold  goldenrod  gray
 green  greenyellow  grey
 honeydew  hotpink  indianred
 indigo  ivory  khaki
 lavender  lavenderblush  lawngreen
 lemonchiffon  lightblue  lightcoral
 lightcyan  lightgoldenrodyellow  lightgray

Kolor i przezroczystość

Nazwy kolorów CSS3
 lightgreen  lightgrey  lightpink
 lightsalmon  lightseagreen  lightskyblue
 lightslategray  lightslategrey  lightsteelblue
 lightyellow  lime  limegreen
 linen  magenta  maroon
 mediumaquamarine  mediumblue  mediumorchid
 mediumpurple  mediumseagreen  mediumslateblue
 mediumspringgreen  mediumturquoise  mediumvioletred
 midnightblue  mintcream  mistyrose
 moccasin  navajowhite  navy
 oldlace  olive  olivedrab
 orange  orangered  orchid
 palegoldenrod  palegreen  paleturquoise
 palevioletred  papayawhip  peachpuff
 peru  pink  plum
 powderblue  purple  red
 rosybrown  royalblue  saddlebrown
 salmon  sandybrown  seagreen
 seashell  sienna  silver
 skyblue  slateblue  slategray
 slategrey  snow  springgreen/td>
 steelblue  tan  teal
 thistle  tomato  turquoise
 violet  wheat  white
 whitesmoke  yellow  yellowgreen

Kolor, przezroczystość i SVG