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

Reguła kolor tekstu, wartość kolor
color:
color

np. color:red;

Reguła przezroczystość elementu CSS3, wartość kanału alfa CSS3
opacity:
1 <= alphavalue <= 0

np. opacity: 0.5;

Wartość color;

Kolory podstawowe w systemie dziesiętnym i szesnastkowym*
colornazwargb(R,G,B)#rrggbb colornazwargb(R,G,B)#rrggbb
maroon;rgb(128,0,0)#800000 red;rgb(255,0,0)#ff0000
yellow;rgb(255,255,0)#ffff00 olive;rgb(128,128,0)#808000
purple;rgb(128,0,128)#800080 fuchsia;rgb(255,0,255)#ff00ff
white;rgb(255,255,255)#ffffff lime;rgb(0,255,0)#00ff00
green;rgb(0,128,0)#008000 navy;rgb(0,0,128)#000080
blue;rgb(0,0,255)#0000ff aqua;rgb(0,255,255)#00ffff
teal;rgb(0,128,128)#008080 black;rgb(0,0,0)#000000
silver;rgb(192,192,192)#c0c0c0 gray;rgb(128,128,128)#808080

*) 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 barw

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