W3.CSS základní barvy

Kategorie: Software » Grafika » W3.CSS základní barvy
Programování » PHP, MySQL, HTML » W3.CSS základní barvy

Datum vydání: 22. 07. 2016

W3.CSS nabízí k použití barvy (W3.CSS Colors) a k některým z nich jsou připravené palety barev (W3.CSS Color Themes) a k nim předpřipravená CSS (w3.css). Já však v designu používám např. opozitní barvy a pak mi chybí pěkně zpracovaná protilehlá paleta barev. Také mi chybí u palet jejich vyjádření v číselném hexadecimálním kódu. Člověk mnohdy potřebuje vědět, která to je přesně barvička, např. pro úpravy v grafických programech, pro nastavení Google reklamy apod.

Kód základní barvy lze zjistit z příslušných stylů class="w3-theme" u příslušného motivu (palety). V tabulce jsou odkazy na příslušná CCS pro jednotlivá témata. Vše je dohledatelné na webu W3.CSS, nepřináším nic nového, tabulka jen pomáhá najít některé informace rychleji. Více o barvičkách lze zjistit pomocí HTML Color Pickeru.

Pořadí Text CSS Paleta Hex RGB HSL
1 w3-red w3-theme-red.css Paleta #f44336 rgb(244, 67, 54) hsl(4, 90%, 58%)
2 w3-pink w3-theme-pink.css Paleta #e91e63 rgb(233, 30, 99) hsl(340, 82%, 52%)
3 w3-purple w3-theme-purple.css Paleta #9c27b0 rgb(156, 39, 176) hsl(291, 64%, 42%)
4 w3-deep-purple w3-theme-deep-purple.css Paleta #673ab7 rgb(103, 58, 183) hsl(262, 52%, 47%)
5 w3-indigo w3-theme-indigo.css Paleta #3f51b5 rgb(63, 81, 181) hsl(231, 48%, 48%)
6 w3-blue w3-theme-blue.css Paleta #2196f3 rgb(33, 150, 243) hsl(207, 90%, 54%)
7 w3-light-blue w3-theme-light-blue.css Paleta #87ceeb rgb(135, 206, 235) hsl(197, 71%, 73%)
8 w3-cyan w3-theme-cyan.css Paleta #00bcd4 rgb(0, 188, 212) hsl(187, 100%, 42%)
w3-aqua #00ffff rgb(0, 255, 255) hsl(180, 100%, 50%)
9 w3-teal w3-theme-teal.css Paleta #009688 rgb(0, 150, 136) hsl(174, 100%, 29%)
10 w3-green w3-theme-green.css Paleta #4caf50 rgb(76, 175, 80) hsl(122, 39%, 49%)
11 w3-light-green w3-theme-light-green.css Paleta #8bc34a rgb(139, 195, 74) hsl(88, 50%, 53%)
12 w3-lime w3-theme-lime.css Paleta #cddc39 rgb(205, 220, 57) hsl(66, 70%, 54%)
w3-sand #fdf5e6 rgb(253, 245, 230) hsl(39, 85%, 95%)
13 w3-khaki w3-theme-khaki.css Paleta #f0e68c rgb(240, 230, 140) hsl(54, 77%, 75%)
14 w3-yellow w3-theme-yellow.css Paleta #ffeb3b rgb(255, 235, 59) hsl(54, 100%, 62%)
15 w3-amber w3-theme-amber.css Paleta #ffc107 rgb(255, 193, 7) hsl(45, 100%, 51%)
16 w3-orange w3-theme-orange.css Paleta #ff9800 rgb(255, 152, 0) hsl(36, 100%, 50%)
17 w3-deep-orange w3-theme-deep-orange.css Paleta #ff5722 rgb(255, 87, 34) hsl(14, 100%, 57%)
18 w3-blue-grey w3-theme-blue-grey.css Paleta #607d8b rgb(96, 125, 139) hsl(200, 18%, 46%)
19 w3-brown w3-theme-brown.css Paleta #795548 rgb(121, 85, 72) hsl(16, 25%, 38%)
w3-white #ffffff rgb(255, 255, 255) hsl(0, 0%, 100%)
w3-light-grey #f1f1f1 rgb(241, 241, 241) hsl(0, 0%, 95%)
20 w3-grey w3-theme-grey.css Paleta #9e9e9e rgb(158, 158, 158) hsl(0, 0%, 62%)
21 w3-dark-grey w3-theme-dark-grey.css Paleta #616161 rgb(97, 97, 97) hsl(0, 0%, 38%)
22 w3-black w3-theme-black.css Paleta #000000 rgb(0, 0, 0) hsl(0, 0%, 0%)
w3-pale-red #ffdddd rgb(255, 221, 221) hsl(0, 100%, 93%)
w3-pale-yellow #ffffcc rgb(255, 255, 204) hsl(60, 100%, 90%)
w3-pale-green #ddffdd rgb(221, 255, 221) hsl(120, 100%, 93%)
w3-pale-blue #ddffff rgb(221, 255, 255) hsl(180, 100%, 93%)