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%) |