{"id":12415,"date":"2023-03-29T08:00:00","date_gmt":"2023-03-29T06:00:00","guid":{"rendered":"https:\/\/www.ub.edu\/retrucs\/?p=12415"},"modified":"2024-11-02T17:32:15","modified_gmt":"2024-11-02T16:32:15","slug":"html-color-codes","status":"publish","type":"post","link":"https:\/\/www.ub.edu\/retrucs\/html-color-codes\/","title":{"rendered":"HTML Color Codes, colors perfectes amb un clic"},"content":{"rendered":"\n<p>Si heu de triar colors per a una p\u00e0gina web, una presentaci\u00f3 o un projecte, el web <a href=\"https:\/\/htmlcolorcodes.com\/\">HTML color codes<\/a> us ho fa f\u00e0cil i us permet triar la paleta de colors i explorar informaci\u00f3 sobre codis i combinacions adequades, entre d&#8217;altres.<\/p>\n\n\n\n<p>Quan hi accediu, disposeu d&#8217;un selector, diverses cartes de colors, els codis HTML i els noms que admeten els navegadors, una biblioteca de tonalitats i una explicaci\u00f3 b\u00e0sica de com s&#8217;usen els colors a les p\u00e0gines web. Totes les eines i opcions s\u00f3n molt clares i \u00fatils, per\u00f2 recomanem, especialment, el selector de colors o <a href=\"https:\/\/htmlcolorcodes.com\/color-picker\/\">Color picker<\/a>. El selector us permet triar entre qualsevol color i tonalitat, i us mostra els codis del color en format HEX, RGB, CMYK i HSL.<\/p>\n\n\n\n<p>A sota de l&#8217;\u00e0rea de colors del selector, trobareu l&#8217;opci\u00f3 de colors an\u00e0legs, complementaris, tons, ombres, etc., que combinen amb el color que tingueu triat. M\u00e9s avall, si us cal, hi ha algunes explicacions breus sobre els colors complementaris, an\u00e0legs i neutres, a m\u00e9s d&#8217;algunes informacions sobre els tons, matisos i ombres, entre d&#8217;altres.<\/p>\n\n\n<div class=\"wonderpluginslider-container\" id=\"wonderpluginslider-container-134\" style=\"max-width:900px;margin:0 auto;padding-left:0px;padding-right:0px;padding-top:0px;padding-bottom:60px;\"><div class=\"wonderpluginslider\" id=\"wonderpluginslider-134\" data-sliderid=\"134\" data-width=\"900\" data-height=\"450\" data-skin=\"classic\" data-usejsforfullbrowserwidth=\"false\" data-fullbrowserwidth=\"false\" data-playmutedandinlinewhenautoplay=\"false\" data-addextraattributes=\"false\" data-autoplay=\"true\" data-randomplay=\"false\" data-loadimageondemand=\"false\" data-transitiononfirstslide=\"false\" data-autoplayvideo=\"false\" data-isresponsive=\"true\" data-fullwidth=\"false\" data-isfullscreen=\"false\" data-ratioresponsive=\"true\" data-showtext=\"true\" data-showtimer=\"true\" data-showbottomshadow=\"true\" data-navshowpreview=\"true\" data-textautohide=\"true\" data-pauseonmouseover=\"false\" data-lightboxresponsive=\"true\" data-lightboxshownavigation=\"false\" data-lightboxshowtitle=\"true\" data-lightboxshowdescription=\"false\" data-texteffectresponsive=\"true\" data-donotinit=\"false\" data-addinitscript=\"false\" data-lightboxfullscreenmode=\"false\" data-lightboxcloseonoverlay=\"true\" data-lightboxvideohidecontrols=\"false\" data-lightboxnogroup=\"false\" data-shownav=\"true\" data-navthumbresponsive=\"false\" data-navshowfeaturedarrow=\"false\" data-inityoutube=\"true\" data-initvimeo=\"true\" data-navshowplaypause=\"true\" data-navshowarrow=\"true\" data-navshowbuttons=\"false\" data-lightboxshowsocial=\"false\" data-lightboxshowfacebook=\"true\" data-lightboxshowtwitter=\"true\" data-lightboxshowpinterest=\"true\" data-lightboxsocialrotateeffect=\"true\" data-showsocial=\"false\" data-showfacebook=\"true\" data-showtwitter=\"true\" data-showpinterest=\"true\" data-socialrotateeffect=\"true\" data-disableinlinecss=\"false\" data-triggerresize=\"false\" data-lightboxautoslide=\"false\" data-lightboxshowtimer=\"true\" data-lightboxshowplaybutton=\"false\" data-lightboxalwaysshownavarrows=\"false\" data-lightboxshowtitleprefix=\"true\" data-titleusealt=\"false\" data-outputtext=\"false\" data-titletag=\"h1\" data-descriptiontag=\"h2\" data-scalemode=\"fill\" data-arrowstyle=\"mouseover\" data-transition=\"cssslide\" data-loop=\"0\" data-border=\"0\" data-slideinterval=\"8000\" data-arrowimage=\"arrows-32-32-0.png\" data-arrowwidth=\"32\" data-arrowheight=\"32\" data-arrowtop=\"50\" data-arrowmargin=\"8\" data-ga4account=\"\" data-googleanalyticsaccount=\"\" data-navplaypauseimage=\"navplaypause-28-28-0.png\" data-navarrowimage=\"navarrows-28-28-0.png\" data-navstyle=\"bullets\" data-navimage=\"bullet-24-24-0.png\" data-navwidth=\"24\" data-navheight=\"24\" data-navspacing=\"8\" data-navmarginx=\"16\" data-navmarginy=\"16\" data-navposition=\"bottom\" data-navthumbnavigationstyle=\"arrow\" data-navthumbnavigationarrowimage=\"carouselarrows-32-32-0.png\" data-navthumbnavigationarrowimagewidth=\"32\" data-navthumbnavigationarrowimageheight=\"32\" data-playvideoimage=\"playvideo-64-64-0.png\" data-playvideoimagewidth=\"64\" data-playvideoimageheight=\"64\" data-lightboxthumbwidth=\"90\" data-lightboxthumbheight=\"60\" data-lightboxthumbtopmargin=\"12\" data-lightboxthumbbottommargin=\"4\" data-lightboxbarheight=\"64\" data-lightboxtitlebottomcss=\"color:#333; font-size:14px; font-family:Armata,sans-serif,Arial; overflow:hidden; text-align:left;\" data-lightboxdescriptionbottomcss=\"color:#333; font-size:12px; font-family:Arial,Helvetica,sans-serif; overflow:hidden; text-align:left; margin:4px 0px 0px; padding: 0px;\" data-textformat=\"Bottom bar\" data-textpositionstatic=\"bottom\" data-textpositiondynamic=\"bottomleft\" data-paddingleft=\"0\" data-paddingright=\"0\" data-paddingtop=\"0\" data-paddingbottom=\"60\" data-texteffectresponsivesize=\"640\" data-textleftrightpercentforstatic=\"40\" data-fadeduration=\"1000\" data-crossfadeduration=\"1000\" data-fadeoutfadeinduration=\"2000\" data-slideduration=\"1000\" data-cssslideduration=\"1000\" data-elasticduration=\"1000\" data-sliceduration=\"1500\" data-blindsduration=\"1500\" data-blocksduration=\"1500\" data-shuffleduration=\"1500\" data-tilesduration=\"2000\" data-kenburnsduration=\"5000\" data-flipduration=\"1500\" data-flipwithzoomduration=\"2000\" data-threedduration=\"1500\" data-threedhorizontalduration=\"1500\" data-threedwithzoomduration=\"2500\" data-threedhorizontalwithzoomduration=\"2200\" data-threedflipduration=\"1500\" data-threedflipwithzoomduration=\"2000\" data-threedtilesduration=\"2000\" data-threedfallback=\"flip\" data-threedhorizontalfallback=\"flip\" data-threedwithzoomfallback=\"flipwithzoom\" data-threedhorizontalwithzoomfallback=\"flipwithzoom\" data-threedflipfallback=\"flip\" data-threedflipwithzoomfallback=\"flipwithzoom\" data-threedtilesfallback=\"tiles\" data-ratiomediumscreen=\"900\" data-ratiomediumheight=\"1.6\" data-ratiosmallscreen=\"640\" data-ratiosmallheight=\"2.4\" data-socialmode=\"mouseover\" data-socialposition=\"position:absolute;top:8px;right:8px;\" data-socialpositionsmallscreen=\"position:absolute;top:8px;right:8px;\" data-socialdirection=\"horizontal\" data-socialbuttonsize=\"32\" data-socialbuttonfontsize=\"18\" data-navthumbcolumn=\"5\" data-navthumbtitleheight=\"20\" data-navthumbtitlewidth=\"120\" data-navthumbresponsivemode=\"samesize\" data-navthumbstyle=\"imageonly\" data-navthumbmediumsize=\"900\" data-navthumbmediumwidth=\"64\" data-navthumbmediumheight=\"64\" data-navthumbmediumcolumn=\"4\" data-navthumbmediumtitleheight=\"18\" data-navthumbmediumtitlewidth=\"120\" data-navthumbsmallsize=\"600\" data-navthumbsmallwidth=\"48\" data-navthumbsmallheight=\"48\" data-navthumbsmallcolumn=\"3\" data-navthumbsmalltitleheight=\"18\" data-navthumbsmalltitlewidth=\"120\" data-lightboxsocialposition=\"position:absolute;top:100%;right:0;\" data-lightboxsocialpositionsmallscreen=\"position:absolute;top:100%;right:0;left:0;\" data-lightboxsocialdirection=\"horizontal\" data-lightboxsocialbuttonsize=\"32\" data-lightboxsocialbuttonfontsize=\"18\" data-lightboxtitlestyle=\"bottom\" data-lightboximagepercentage=\"75\" data-lightboxdefaultvideovolume=\"1\" data-lightboxoverlaybgcolor=\"#000\" data-lightboxoverlayopacity=\"0.9\" data-lightboxbgcolor=\"#fff\" data-lightboxtitleprefix=\"%NUM \/ %TOTAL\" data-lightboxtitleinsidecss=\"color:#fff; font-size:16px; font-family:Arial,Helvetica,sans-serif; overflow:hidden; text-align:left;\" data-lightboxdescriptioninsidecss=\"color:#fff; font-size:12px; font-family:Arial,Helvetica,sans-serif; overflow:hidden; text-align:left; margin:4px 0px 0px; padding: 0px;\" data-lightboxtitleoutsidecss=\"color:#fff; font-size:18px; font-family:Arial,Helvetica,sans-serif; overflow:hidden; text-align:center; margin: 8px;\" data-lightboxdescriptionoutsidecss=\"color:#fff; font-size:14px; font-family:Arial,Helvetica,sans-serif; overflow:hidden; text-align:center; margin:8px; padding: 0px;\" data-triggerresizedelay=\"100\" data-lightboxslideinterval=\"5000\" data-lightboxtimerposition=\"bottom\" data-lightboxtimercolor=\"#dc572e\" data-lightboxtimeropacity=\"1\" data-lightboxbordersize=\"8\" data-lightboxborderradius=\"0\" data-textcss=\"display:block; padding:12px; text-align:left;\" data-textbgcss=\"display:block; position:absolute; top:0px; left:0px; width:100%; height:100%; background-color:#333333; opacity:0.6; filter:alpha(opacity=60);\" data-titlecss=\"display:block; position:relative; font:bold 14px &quot;Lucida Sans Unicode&quot;,&quot;Lucida Grande&quot;,sans-serif,Arial; color:#fff;\" data-descriptioncss=\"display:block; position:relative; font:12px &quot;Lucida Sans Unicode&quot;,&quot;Lucida Grande&quot;,sans-serif,Arial; color:#fff; margin-top:8px;\" data-buttoncss=\"display:block; position:relative; margin-top:8px;\" data-titlecssresponsive=\"font-size:12px;\" data-descriptioncssresponsive=\"font-size:12px;\" data-buttoncssresponsive=\"\" data-jsfolder=\"https:\/\/www.ub.edu\/retrucs\/wp-content\/plugins\/wonderplugin-slider-lite\/engine\/\" style=\"display:none;\" ><ul class=\"amazingslider-slides\"  style=\"display:none;\"><li><img decoding=\"async\" class=\"amazingslider-img-elem amazingsliderimg\" src=\"https:\/\/www.ub.edu\/retrucs\/wp-content\/uploads\/html-color-1-inici.png\" alt=\"Inici del web\" title=\"Inici del web\" data-description=\"\" \/><\/li><li><img decoding=\"async\" class=\"amazingslider-img-elem amazingsliderimg\" src=\"https:\/\/www.ub.edu\/retrucs\/wp-content\/uploads\/html-color-2-color-picker.png\" alt=\"Selector de colors\" title=\"Selector de colors\" data-description=\"\" \/><\/li><li><img decoding=\"async\" class=\"amazingslider-img-elem amazingsliderimg\" src=\"https:\/\/www.ub.edu\/retrucs\/wp-content\/uploads\/html-color-3-analegs.png\" alt=\"Colors an\u00e0legs\" title=\"Colors an\u00e0legs\" data-description=\"\" \/><\/li><li><img decoding=\"async\" class=\"amazingslider-img-elem amazingsliderimg\" src=\"https:\/\/www.ub.edu\/retrucs\/wp-content\/uploads\/html-color-4-desplegable.png\" alt=\"Opcions de colors an\u00e0legs, complementaris, tons, ombres, etc.\" title=\"Opcions de colors an\u00e0legs, complementaris, tons, ombres, etc.\" data-description=\"\" \/><\/li><\/ul><ul class=\"amazingslider-thumbnails\"  style=\"display:none;\"><li><img decoding=\"async\" class=\"amazingslider-thumbnail-elem amazingsliderthumbnailimg\" src=\"https:\/\/www.ub.edu\/retrucs\/wp-content\/uploads\/html-color-1-inici-1024x512.png\" alt=\"Inici del web\" title=\"Inici del web\" data-description=\"\" \/><\/li><li><img decoding=\"async\" class=\"amazingslider-thumbnail-elem amazingsliderthumbnailimg\" src=\"https:\/\/www.ub.edu\/retrucs\/wp-content\/uploads\/html-color-2-color-picker-1024x512.png\" alt=\"Selector de colors\" title=\"Selector de colors\" data-description=\"\" \/><\/li><li><img decoding=\"async\" class=\"amazingslider-thumbnail-elem amazingsliderthumbnailimg\" src=\"https:\/\/www.ub.edu\/retrucs\/wp-content\/uploads\/html-color-3-analegs-1024x512.png\" alt=\"Colors an\u00e0legs\" title=\"Colors an\u00e0legs\" data-description=\"\" \/><\/li><li><img decoding=\"async\" class=\"amazingslider-thumbnail-elem amazingsliderthumbnailimg\" src=\"https:\/\/www.ub.edu\/retrucs\/wp-content\/uploads\/html-color-4-desplegable-1024x512.png\" alt=\"Opcions de colors an\u00e0legs, complementaris, tons, ombres, etc.\" title=\"Opcions de colors an\u00e0legs, complementaris, tons, ombres, etc.\" data-description=\"\" \/><\/li><\/ul><\/div><\/div><div id=\"amazingslider_customtexteffect_134\" style=\"display:none;\" data-texteffect=\"{&quot;Bottom bar&quot;:{&quot;textstyle&quot;:&quot;static&quot;,&quot;textpositionstatic&quot;:&quot;bottom&quot;,&quot;textautohide&quot;:true,&quot;textpositionmarginstatic&quot;:0,&quot;textpositiondynamic&quot;:&quot;bottomleft&quot;,&quot;textpositionmarginleft&quot;:24,&quot;textpositionmarginright&quot;:24,&quot;textpositionmargintop&quot;:24,&quot;textpositionmarginbottom&quot;:24,&quot;texteffect&quot;:&quot;slide&quot;,&quot;texteffecteasing&quot;:&quot;easeOutCubic&quot;,&quot;texteffectduration&quot;:600,&quot;texteffectslidedirection&quot;:&quot;left&quot;,&quot;texteffectslidedistance&quot;:30,&quot;texteffectdelay&quot;:500,&quot;texteffectseparate&quot;:false,&quot;texteffect1&quot;:&quot;slide&quot;,&quot;texteffectslidedirection1&quot;:&quot;right&quot;,&quot;texteffectslidedistance1&quot;:120,&quot;texteffecteasing1&quot;:&quot;easeOutCubic&quot;,&quot;texteffectduration1&quot;:600,&quot;texteffectdelay1&quot;:1000,&quot;texteffect2&quot;:&quot;slide&quot;,&quot;texteffectslidedirection2&quot;:&quot;right&quot;,&quot;texteffectslidedistance2&quot;:120,&quot;texteffecteasing2&quot;:&quot;easeOutCubic&quot;,&quot;texteffectduration2&quot;:600,&quot;texteffectdelay2&quot;:1500,&quot;textcss&quot;:&quot;display:block; padding:12px; text-align:left;&quot;,&quot;textbgcss&quot;:&quot;display:block; position:absolute; top:0px; left:0px; width:100%; height:100%; background-color:#333333; opacity:0.6; filter:alpha(opacity=60);&quot;,&quot;titlecss&quot;:&quot;display:block; position:relative; font:bold 14px \\&quot;Lucida Sans Unicode\\&quot;,\\&quot;Lucida Grande\\&quot;,sans-serif,Arial; color:#fff;&quot;,&quot;descriptioncss&quot;:&quot;display:block; position:relative; font:12px \\&quot;Lucida Sans Unicode\\&quot;,\\&quot;Lucida Grande\\&quot;,sans-serif,Arial; color:#fff; margin-top:8px;&quot;,&quot;buttoncss&quot;:&quot;display:block; position:relative; margin-top:8px;&quot;,&quot;texteffectresponsive&quot;:true,&quot;texteffectresponsivesize&quot;:640,&quot;titlecssresponsive&quot;:&quot;font-size:12px;&quot;,&quot;descriptioncssresponsive&quot;:&quot;font-size:12px;&quot;,&quot;buttoncssresponsive&quot;:&quot;&quot;,&quot;addgooglefonts&quot;:false,&quot;googlefonts&quot;:&quot;&quot;,&quot;textleftrightpercentforstatic&quot;:40}}\"><\/div><script>function wonderslider_134_appendcss(csscode) {var head=document.head || document.getElementsByTagName(\"head\")[0];var style=document.createElement(\"style\");head.appendChild(style);style.type=\"text\/css\";if (style.styleSheet){style.styleSheet.cssText=csscode;} else {style.appendChild(document.createTextNode(csscode));}};wonderslider_134_appendcss(\"#wonderpluginslider-134 .star-rating { \tdisplay: inline-block; }\");<\/script>\n","protected":false},"excerpt":{"rendered":"<p>Si heu de triar colors per a una p\u00e0gina web, una presentaci\u00f3 o un projecte, el web HTML color codes us ho fa f\u00e0cil i us permet triar la paleta de colors i explorar informaci\u00f3 sobre codis i combinacions adequades, entre d&#8217;altres. Quan hi accediu, disposeu d&#8217;un selector, diverses cartes &#8230;<\/p>\n","protected":false},"author":3,"featured_media":12587,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[298,1],"tags":[224,30],"class_list":["post-12415","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-colors","category-retrucs","tag-colors","tag-html","column","threecol","has-thumbnail"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.ub.edu\/retrucs\/wp-json\/wp\/v2\/posts\/12415","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.ub.edu\/retrucs\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.ub.edu\/retrucs\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.ub.edu\/retrucs\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/www.ub.edu\/retrucs\/wp-json\/wp\/v2\/comments?post=12415"}],"version-history":[{"count":0,"href":"https:\/\/www.ub.edu\/retrucs\/wp-json\/wp\/v2\/posts\/12415\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.ub.edu\/retrucs\/wp-json\/wp\/v2\/media\/12587"}],"wp:attachment":[{"href":"https:\/\/www.ub.edu\/retrucs\/wp-json\/wp\/v2\/media?parent=12415"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.ub.edu\/retrucs\/wp-json\/wp\/v2\/categories?post=12415"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.ub.edu\/retrucs\/wp-json\/wp\/v2\/tags?post=12415"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}