Barvy :: Užitečné :: Články :: SyX.cz - Tvorba www a webových aplikací
27.1.2012 0:51 | Autor: SyX
Přehled barev pro použití v HTML nebo CSS. Jmenné barvy, HEX barvy, RGB barvy.
Barev je ohromné množství. Když si vezmeme v úvahu to, že třeba v RGB zápisu se udává odstín tří barev, a to každá z nich má hodnotu 0 až 255. Z toho nám vyplývá příklad (256 proto, že i nula je barevná hodnota): 256 * 256 * 256 = 16 777 216 kombinací barev.
V HTML a CSS jsou některé běžně používané barvy pojmenované a jdou používat pouhým zápisem názvu, bez zbytečného přemýšlení HEX zápisu nebo dokonce RGB hodnot.
| Název barvy | HEX | RGB | Ukázka |
|---|---|---|---|
| AliceBlue | #F0F8FF | rgb(240, 248, 255) | |
| AntiqueWhite | #FAEBD7 | rgb(250, 235, 215) | |
| Aqua | #00FFFF | rgb(0, 255, 255) | |
| Aquamarine | #7FFFD4 | rgb(127, 255, 212) | |
| Azure | #F0FFFF | rgb(240, 255, 255) | |
| Beige | #F5F5DC | rgb(245, 245, 220) | |
| Bisque | #FFE4C4 | rgb(255, 228, 196) | |
| Black | #000000 | rgb(0, 0, 0) | |
| BlanchedAlmond | #FFEBCD | rgb(255, 235, 205) | |
| Blue | #0000FF | rgb(0, 0, 255) | |
| BlueViolet | #8A2BE2 | rgb(138, 43, 226) | |
| Brown | #A52A2A | rgb(165, 42, 42) | |
| BurlyWood | #DEB887 | rgb(222, 184, 135) | |
| CadetBlue | #5F9EA0 | rgb(95, 158, 160) | |
| Chartreuse | #7FFF00 | rgb(127, 255, 0) | |
| Chocolate | #D2691E | rgb(210, 105, 30) | |
| Coral | #FF7F50 | rgb(255, 127, 80) | |
| CornflowerBlue | #6495ED | rgb(100, 149, 237) | |
| Cornsilk | #FFF8DC | rgb(255, 248, 220) | |
| Crimson | #DC143C | rgb(220, 20, 60) | |
| Cyan | #00FFFF | rgb(0, 255, 255) | |
| DarkBlue | #00008B | rgb(0, 0, 139) | |
| DarkCyan | #008B8B | rgb(0, 139, 139) | |
| DarkGoldenRod | #B8860B | rgb(184, 134, 11) | |
| DarkGray | #A9A9A9 | rgb(169, 169, 169) | |
| DarkGrey | #A9A9A9 | rgb(169, 169, 169) | |
| DarkGreen | #006400 | rgb(0, 100, 0) | |
| DarkKhaki | #BDB76B | rgb(189, 183, 107) | |
| DarkMagenta | #8B008B | rgb(139, 0, 139) | |
| DarkOliveGreen | #556B2F | rgb(85, 107, 47) | |
| Darkorange | #FF8C00 | rgb(255, 140, 0) | |
| DarkOrchid | #9932CC | rgb(153, 50, 204) | |
| DarkRed | #8B0000 | rgb(139, 0, 0) | |
| DarkSalmon | #E9967A | rgb(233, 150, 122) | |
| DarkSeaGreen | #8FBC8F | rgb(143, 188, 143) | |
| DarkSlateBlue | #483D8B | rgb(72, 61, 139) | |
| DarkSlateGray | #2F4F4F | rgb(47, 79, 79) | |
| DarkSlateGrey | #2F4F4F | rgb(47, 79, 79) | |
| DarkTurquoise | #00CED1 | rgb(0, 206, 209) | |
| DarkViolet | #9400D3 | rgb(148, 0, 211) | |
| DeepPink | #FF1493 | rgb(255, 20, 147) | |
| DeepSkyBlue | #00BFFF | rgb(0, 191, 255) | |
| DimGray | #696969 | rgb(105, 105, 105) | |
| DimGrey | #696969 | rgb(105, 105, 105) | |
| DodgerBlue | #1E90FF | rgb(30, 144, 255) | |
| FireBrick | #B22222 | rgb(178, 34, 34) | |
| FloralWhite | #FFFAF0 | rgb(255, 250, 240) | |
| ForestGreen | #228B22 | rgb(34, 139, 34) | |
| Fuchsia | #FF00FF | rgb(255, 0, 255) | |
| Gainsboro | #DCDCDC | rgb(220, 220, 220) | |
| GhostWhite | #F8F8FF | rgb(248, 248, 255) | |
| Gold | #FFD700 | rgb(255, 215, 0) | |
| GoldenRod | #DAA520 | rgb(218, 165, 32) | |
| Gray | #808080 | rgb(128, 128, 128) | |
| Grey | #808080 | rgb(128, 128, 128) | |
| Green | #008000 | rgb(0, 128, 0) | |
| GreenYellow | #ADFF2F | rgb(173, 255, 47) | |
| HoneyDew | #F0FFF0 | rgb(240, 255, 240) | |
| HotPink | #FF69B4 | rgb(255, 105, 180) | |
| IndianRed | #CD5C5C | rgb(205, 92, 92) | |
| Indigo | #4B0082 | rgb(75, 0, 130) | |
| Ivory | #FFFFF0 | rgb(255, 255, 240) | |
| Khaki | #F0E68C | rgb(240, 230, 140) | |
| Lavender | #E6E6FA | rgb(230, 230, 250) | |
| LavenderBlush | #FFF0F5 | rgb(255, 240, 245) | |
| LawnGreen | #7CFC00 | rgb(124, 252, 0) | |
| LemonChiffon | #FFFACD | rgb(255, 250, 205) | |
| LightBlue | #ADD8E6 | rgb(173, 216, 230) | |
| LightCoral | #F08080 | rgb(240, 128, 128) | |
| LightCyan | #E0FFFF | rgb(224, 255, 255) | |
| LightGoldenRodYellow | #FAFAD2 | rgb(250, 250, 210) | |
| LightGray | #D3D3D3 | rgb(211, 211, 211) | |
| LightGrey | #D3D3D3 | rgb(211, 211, 211) | |
| LightGreen | #90EE90 | rgb(144, 238, 144) | |
| LightPink | #FFB6C1 | rgb(255, 182, 193) | |
| LightSalmon | #FFA07A | rgb(255, 160, 122) | |
| LightSeaGreen | #20B2AA | rgb(32, 178, 170) | |
| LightSkyBlue | #87CEFA | rgb(135, 206, 250) | |
| LightSlateGray | #778899 | rgb(119, 136, 153) | |
| LightSlateGrey | #778899 | rgb(119, 136, 153) | |
| LightSteelBlue | #B0C4DE | rgb(176, 196, 222) | |
| LightYellow | #FFFFE0 | rgb(255, 255, 224) | |
| Lime | #00FF00 | rgb(0, 255, 0) | |
| LimeGreen | #32CD32 | rgb(50, 205, 50) | |
| Linen | #FAF0E6 | rgb(250, 240, 230) | |
| Magenta | #FF00FF | rgb(255, 0, 255) | |
| Maroon | #800000 | rgb(128, 0, 0) | |
| MediumAquaMarine | #66CDAA | rgb(102, 205, 170) | |
| MediumBlue | #0000CD | rgb(0, 0, 205) | |
| MediumOrchid | #BA55D3 | rgb(186, 85, 211) | |
| MediumPurple | #9370D8 | rgb(147, 112, 216) | |
| MediumSeaGreen | #3CB371 | rgb(60, 179, 113) | |
| MediumSlateBlue | #7B68EE | rgb(123, 104, 238) | |
| MediumSpringGreen | #00FA9A | rgb(0, 250, 154) | |
| MediumTurquoise | #48D1CC | rgb(72, 209, 204) | |
| MediumVioletRed | #C71585 | rgb(199, 21, 133) | |
| MidnightBlue | #191970 | rgb(25, 25, 112) | |
| MintCream | #F5FFFA | rgb(245, 255, 250) | |
| MistyRose | #FFE4E1 | rgb(255, 228, 225) | |
| Moccasin | #FFE4B5 | rgb(255, 228, 181) | |
| NavajoWhite | #FFDEAD | rgb(255, 222, 173) | |
| Navy | #000080 | rgb(0, 0, 128) | |
| OldLace | #FDF5E6 | rgb(253, 245, 230) | |
| Olive | #808000 | rgb(128, 128, 0) | |
| OliveDrab | #6B8E23 | rgb(107, 142, 35) | |
| Orange | #FFA500 | rgb(255, 165, 0) | |
| OrangeRed | #FF4500 | rgb(255, 69, 0) | |
| Orchid | #DA70D6 | rgb(218, 112, 214) | |
| PaleGoldenRod | #EEE8AA | rgb(238, 232, 170) | |
| PaleGreen | #98FB98 | rgb(152, 251, 152) | |
| PaleTurquoise | #AFEEEE | rgb(175, 238, 238) | |
| PaleVioletRed | #D87093 | rgb(216, 112, 147) | |
| PapayaWhip | #FFEFD5 | rgb(255, 239, 213) | |
| PeachPuff | #FFDAB9 | rgb(255, 218, 185) | |
| Peru | #CD853F | rgb(205, 133, 63) | |
| Pink | #FFC0CB | rgb(255, 192, 203) | |
| Plum | #DDA0DD | rgb(221, 160, 221) | |
| PowderBlue | #B0E0E6 | rgb(176, 224, 230) | |
| Purple | #800080 | rgb(128, 0, 128) | |
| Red | #FF0000 | rgb(255, 0, 0) | |
| RosyBrown | #BC8F8F | rgb(188, 143, 143) | |
| RoyalBlue | #4169E1 | rgb(65, 105, 225) | |
| SaddleBrown | #8B4513 | rgb(139, 69, 19) | |
| Salmon | #FA8072 | rgb(250, 128, 114) | |
| SandyBrown | #F4A460 | rgb(244, 164, 96) | |
| SeaGreen | #2E8B57 | rgb(46, 139, 87) | |
| SeaShell | #FFF5EE | rgb(255, 245, 238) | |
| Sienna | #A0522D | rgb(160, 82, 45) | |
| Silver | #C0C0C0 | rgb(192, 192, 192) | |
| SkyBlue | #87CEEB | rgb(135, 206, 235) | |
| SlateBlue | #6A5ACD | rgb(106, 90, 205) | |
| SlateGray | #708090 | rgb(112, 128, 144) | |
| SlateGrey | #708090 | rgb(112, 128, 144) | |
| Snow | #FFFAFA | rgb(255, 250, 250) | |
| SpringGreen | #00FF7F | rgb(0, 255, 127) | |
| SteelBlue | #4682B4 | rgb(70, 130, 180) | |
| Tan | #D2B48C | rgb(210, 180, 140) | |
| Teal | #008080 | rgb(0, 128, 128) | |
| Thistle | #D8BFD8 | rgb(216, 191, 216) | |
| Tomato | #FF6347 | rgb(255, 99, 71) | |
| Turquoise | #40E0D0 | rgb(64, 224, 208) | |
| Violet | #EE82EE | rgb(238, 130, 238) | |
| Wheat | #F5DEB3 | rgb(245, 222, 179) | |
| White | #FFFFFF | rgb(255, 255, 255) | |
| WhiteSmoke | #F5F5F5 | rgb(245, 245, 245) | |
| Yellow | #FFFF00 | rgb(255, 255, 0) | |
| YellowGreen | #9ACD32 | rgb(154, 205, 50) |
Přidržením kurzoru nad narvou se Vám zobrazí kód barvy pod Vaším kurzorem.
Následující barvy jsou podle standardu W3C bezpečné. Jen podotýkám, že většinu pojmenovaných barev níže zde nenajdete, což sám také nechápu.
| #000000 | #000033 | #000066 | #000099 | #0000CC | #0000FF |
| #003300 | #003333 | #003366 | #003399 | #0033CC | #0033FF |
| #006600 | #006633 | #006666 | #006699 | #0066CC | #0066FF |
| #009900 | #009933 | #009966 | #009999 | #0099CC | #0099FF |
| #00CC00 | #00CC33 | #00CC66 | #00CC99 | #00CCCC | #00CCFF |
| #00FF00 | #00FF33 | #00FF66 | #00FF99 | #00FFCC | #00FFFF |
| #330000 | #330033 | #330066 | #330099 | #3300CC | #3300FF |
| #333300 | #333333 | #333366 | #333399 | #3333CC | #3333FF |
| #336600 | #336633 | #336666 | #336699 | #3366CC | #3366FF |
| #339900 | #339933 | #339966 | #339999 | #3399CC | #3399FF |
| #33CC00 | #33CC33 | #33CC66 | #33CC99 | #33CCCC | #33CCFF |
| #33FF00 | #33FF33 | #33FF66 | #33FF99 | #33FFCC | #33FFFF |
| #660000 | #660033 | #660066 | #660099 | #6600CC | #6600FF |
| #663300 | #663333 | #663366 | #663399 | #6633CC | #6633FF |
| #666600 | #666633 | #666666 | #666699 | #6666CC | #6666FF |
| #669900 | #669933 | #669966 | #669999 | #6699CC | #6699FF |
| #66CC00 | #66CC33 | #66CC66 | #66CC99 | #66CCCC | #66CCFF |
| #66FF00 | #66FF33 | #66FF66 | #66FF99 | #66FFCC | #66FFFF |
| #990000 | #990033 | #990066 | #990099 | #9900CC | #9900FF |
| #993300 | #993333 | #993366 | #993399 | #9933CC | #9933FF |
| #996600 | #996633 | #996666 | #996699 | #9966CC | #9966FF |
| #999900 | #999933 | #999966 | #999999 | #9999CC | #9999FF |
| #99CC00 | #99CC33 | #99CC66 | #99CC99 | #99CCCC | #99CCFF |
| #99FF00 | #99FF33 | #99FF66 | #99FF99 | #99FFCC | #99FFFF |
| #CC0000 | #CC0033 | #CC0066 | #CC0099 | #CC00CC | #CC00FF |
| #CC3300 | #CC3333 | #CC3366 | #CC3399 | #CC33CC | #CC33FF |
| #CC6600 | #CC6633 | #CC6666 | #CC6699 | #CC66CC | #CC66FF |
| #CC9900 | #CC9933 | #CC9966 | #CC9999 | #CC99CC | #CC99FF |
| #CCCC00 | #CCCC33 | #CCCC66 | #CCCC99 | #CCCCCC | #CCCCFF |
| #CCFF00 | #CCFF33 | #CCFF66 | #CCFF99 | #CCFFCC | #CCFFFF |
| #FF0000 | #FF0033 | #FF0066 | #FF0099 | #FF00CC | #FF00FF |
| #FF3300 | #FF3333 | #FF3366 | #FF3399 | #FF33CC | #FF33FF |
| #FF6600 | #FF6633 | #FF6666 | #FF6699 | #FF66CC | #FF66FF |
| #FF9900 | #FF9933 | #FF9966 | #FF9999 | #FF99CC | #FF99FF |
| #FFCC00 | #FFCC33 | #FFCC66 | #FFCC99 | #FFCCCC | #FFCCFF |
| #FFFF00 | #FFFF33 | #FFFF66 | #FFFF99 | #FFFFCC | #FFFFFF |
Chcete mít vlastní web? Vytvořím Vám Vaši vlastní www stránku či webovou aplikaci dle Vašich představ. Časově přívětivě, cenově dostupně.
KontaktJste firma nebo živnostník pracující v oblasti tvorby www? Nebráním se žádné spolupráci jak s grafickými studii, tak ani s jinými firmami či živnostníky. Pracuji externě ze svého domova, ale osobní setkání není problém.
Jaký máte názor na používání JavaScriptu na webu?
˜ SyX, 8.4.2012 12:17
podtržený text, ale tečkovaný
˜ SyX, 8.3.2012 19:50
podtržený text, ale tečkovaný
˜ Johan, 6.3.2012 7:18
První pokus
˜ SyX, 17.12.2011 15:11
