{"id":126791,"date":"2025-07-01T08:10:21","date_gmt":"2025-07-01T05:10:21","guid":{"rendered":"https:\/\/elementor.com\/blog\/css-html-kleuren-eigenschappen-codes-trefwoorden-en-namen\/"},"modified":"2025-11-16T00:25:53","modified_gmt":"2025-11-15T22:25:53","slug":"css-html-kleuren-eigenschappen-codes-trefwoorden-en-namen","status":"publish","type":"post","link":"https:\/\/elementor.com\/blog\/nl\/css-html-kleuren-eigenschappen-codes-trefwoorden-en-namen\/","title":{"rendered":"CSS &amp; HTML kleuren: Eigenschappen, codes, trefwoorden en namen"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"126791\" class=\"elementor elementor-126791 elementor-1357\" data-elementor-post-type=\"post\">\n\t\t\t\t<div class=\"elementor-element elementor-element-7f10cdf e-flex e-con-boxed e-con e-parent\" data-id=\"7f10cdf\" data-element_type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-24a4cf4 elementor-widget elementor-widget-text-editor\" data-id=\"24a4cf4\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<h2>140 Kleurnamen en hexwaarden ondersteund door alle browsers:<\/h2>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-f738d1b elementor-widget elementor-widget-html\" data-id=\"f738d1b\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<table border=\"1\" style=\"width:100%\">\n    <tr>\n        <th>Naam<\/th>\n        <th>CSS-waarde<\/th>\n        <th>Live demo<\/th>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#F0F8FF')\">AliceBlue<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#F0F8FF')\">#F0F8FF<\/a><\/td>\n        <td style=\"background-color:#F0F8FF;\" id=\"demo1\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#FAEBD7')\">AntiqueWhite<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#FAEBD7')\">#FAEBD7<\/a><\/td>\n        <td style=\"background-color:#FAEBD7;\" id=\"demo2\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#00FFFF')\">Aqua<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#00FFFF')\">#00FFFF<\/a><\/td>\n        <td style=\"background-color:#00FFFF;\" id=\"demo3\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#7FFFD4')\">Aquamarine<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#7FFFD4')\">#7FFFD4<\/a><\/td>\n        <td style=\"background-color:#7FFFD4;\" id=\"demo4\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#F0FFFF')\">Azure<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#F0FFFF')\">#F0FFFF<\/a><\/td>\n        <td style=\"background-color:#F0FFFF;\" id=\"demo5\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#F5F5DC')\">Beige<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#F5F5DC')\">#F5F5DC<\/a><\/td>\n        <td style=\"background-color:#F5F5DC;\" id=\"demo6\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#FFE4C4')\">Bisque<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#FFE4C4')\">#FFE4C4<\/a><\/td>\n        <td style=\"background-color:#FFE4C4;\" id=\"demo7\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#000000')\">Black<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#000000')\">#000000<\/a><\/td>\n        <td style=\"background-color:#000000;\" id=\"demo8\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#FFEBCD')\">BlanchedAlmond<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#FFEBCD')\">#FFEBCD<\/a><\/td>\n        <td style=\"background-color:#FFEBCD;\" id=\"demo9\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#0000FF')\">Blue<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#0000FF')\">#0000FF<\/a><\/td>\n        <td style=\"background-color:#0000FF;\" id=\"demo10\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#8A2BE2')\">BlueViolet<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#8A2BE2')\">#8A2BE2<\/a><\/td>\n        <td style=\"background-color:#8A2BE2;\" id=\"demo11\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#A52A2A')\">Brown<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#A52A2A')\">#A52A2A<\/a><\/td>\n        <td style=\"background-color:#A52A2A;\" id=\"demo12\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#DEB887')\">BurlyWood<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#DEB887')\">#DEB887<\/a><\/td>\n        <td style=\"background-color:#DEB887;\" id=\"demo13\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#5F9EA0')\">CadetBlue<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#5F9EA0')\">#5F9EA0<\/a><\/td>\n        <td style=\"background-color:#5F9EA0;\" id=\"demo14\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#7FFF00')\">Chartreuse<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#7FFF00')\">#7FFF00<\/a><\/td>\n        <td style=\"background-color:#7FFF00;\" id=\"demo15\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#D2691E')\">Chocolate<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#D2691E')\">#D2691E<\/a><\/td>\n        <td style=\"background-color:#D2691E;\" id=\"demo16\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#FF7F50')\">Coral<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#FF7F50')\">#FF7F50<\/a><\/td>\n        <td style=\"background-color:#FF7F50;\" id=\"demo17\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#6495ED')\">CornflowerBlue<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#6495ED')\">#6495ED<\/a><\/td>\n        <td style=\"background-color:#6495ED;\" id=\"demo18\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#FFF8DC')\">Cornsilk<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#FFF8DC')\">#FFF8DC<\/a><\/td>\n        <td style=\"background-color:#FFF8DC;\" id=\"demo19\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#DC143C')\">Crimson<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#DC143C')\">#DC143C<\/a><\/td>\n        <td style=\"background-color:#DC143C;\" id=\"demo20\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#00FFFF')\">Cyan<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#00FFFF')\">#00FFFF<\/a><\/td>\n        <td style=\"background-color:#00FFFF;\" id=\"demo21\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#00008B')\">DarkBlue<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#00008B')\">#00008B<\/a><\/td>\n        <td style=\"background-color:#00008B;\" id=\"demo22\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#008B8B')\">DarkCyan<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#008B8B')\">#008B8B<\/a><\/td>\n        <td style=\"background-color:#008B8B;\" id=\"demo23\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#B8860B')\">DarkGoldenRod<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#B8860B')\">#B8860B<\/a><\/td>\n        <td style=\"background-color:#B8860B;\" id=\"demo24\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#A9A9A9')\">DarkGray<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#A9A9A9')\">#A9A9A9<\/a><\/td>\n        <td style=\"background-color:#A9A9A9;\" id=\"demo25\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#A9A9A9')\">DarkGrey<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#A9A9A9')\">#A9A9A9<\/a><\/td>\n        <td style=\"background-color:#A9A9A9;\" id=\"demo26\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#006400')\">DarkGreen<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#006400')\">#006400<\/a><\/td>\n        <td style=\"background-color:#006400;\" id=\"demo27\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#BDB76B')\">DarkKhaki<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#BDB76B')\">#BDB76B<\/a><\/td>\n        <td style=\"background-color:#BDB76B;\" id=\"demo28\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#8B008B')\">DarkMagenta<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#8B008B')\">#8B008B<\/a><\/td>\n        <td style=\"background-color:#8B008B;\" id=\"demo29\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#556B2F')\">DarkOliveGreen<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#556B2F')\">#556B2F<\/a><\/td>\n        <td style=\"background-color:#556B2F;\" id=\"demo30\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#FF8C00')\">DarkOrange<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#FF8C00')\">#FF8C00<\/a><\/td>\n        <td style=\"background-color:#FF8C00;\" id=\"demo31\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#9932CC')\">DarkOrchid<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#9932CC')\">#9932CC<\/a><\/td>\n        <td style=\"background-color:#9932CC;\" id=\"demo32\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#8B0000')\">DarkRed<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#8B0000')\">#8B0000<\/a><\/td>\n        <td style=\"background-color:#8B0000;\" id=\"demo33\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#E9967A')\">DarkSalmon<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#E9967A')\">#E9967A<\/a><\/td>\n        <td style=\"background-color:#E9967A;\" id=\"demo34\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#8FBC8F')\">DarkSeaGreen<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#8FBC8F')\">#8FBC8F<\/a><\/td>\n        <td style=\"background-color:#8FBC8F;\" id=\"demo35\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#483D8B')\">DarkSlateBlue<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#483D8B')\">#483D8B<\/a><\/td>\n        <td style=\"background-color:#483D8B;\" id=\"demo36\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#2F4F4F')\">DarkSlateGray<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#2F4F4F')\">#2F4F4F<\/a><\/td>\n        <td style=\"background-color:#2F4F4F;\" id=\"demo37\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#2F4F4F')\">DarkSlateGrey<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#2F4F4F')\">#2F4F4F<\/a><\/td>\n        <td style=\"background-color:#2F4F4F;\" id=\"demo38\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#00CED1')\">DarkTurquoise<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#00CED1')\">#00CED1<\/a><\/td>\n        <td style=\"background-color:#00CED1;\" id=\"demo39\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#9400D3')\">DarkViolet<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#9400D3')\">#9400D3<\/a><\/td>\n        <td style=\"background-color:#9400D3;\" id=\"demo40\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#FF1493')\">DeepPink<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#FF1493')\">#FF1493<\/a><\/td>\n        <td style=\"background-color:#FF1493;\" id=\"demo41\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#00BFFF')\">DeepSkyBlue<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#00BFFF')\">#00BFFF<\/a><\/td>\n        <td style=\"background-color:#00BFFF;\" id=\"demo42\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#696969')\">DimGray<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#696969')\">#696969<\/a><\/td>\n        <td style=\"background-color:#696969;\" id=\"demo43\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#696969')\">DimGrey<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#696969')\">#696969<\/a><\/td>\n        <td style=\"background-color:#696969;\" id=\"demo44\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#1E90FF')\">DodgerBlue<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#1E90FF')\">#1E90FF<\/a><\/td>\n        <td style=\"background-color:#1E90FF;\" id=\"demo45\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#B22222')\">FireBrick<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#B22222')\">#B22222<\/a><\/td>\n        <td style=\"background-color:#B22222;\" id=\"demo46\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#FFFAF0')\">FloralWhite<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#FFFAF0')\">#FFFAF0<\/a><\/td>\n        <td style=\"background-color:#FFFAF0;\" id=\"demo47\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#228B22')\">ForestGreen<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#228B22')\">#228B22<\/a><\/td>\n        <td style=\"background-color:#228B22;\" id=\"demo48\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#FF00FF')\">Fuchsia<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#FF00FF')\">#FF00FF<\/a><\/td>\n        <td style=\"background-color:#FF00FF;\" id=\"demo49\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#DCDCDC')\">Gainsboro<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#DCDCDC')\">#DCDCDC<\/a><\/td>\n        <td style=\"background-color:#DCDCDC;\" id=\"demo50\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#F8F8FF')\">GhostWhite<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#F8F8FF')\">#F8F8FF<\/a><\/td>\n        <td style=\"background-color:#F8F8FF;\" id=\"demo51\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#FFD700')\">Gold<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#FFD700')\">#FFD700<\/a><\/td>\n        <td style=\"background-color:#FFD700;\" id=\"demo52\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#DAA520')\">GoldenRod<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#DAA520')\">#DAA520<\/a><\/td>\n        <td style=\"background-color:#DAA520;\" id=\"demo53\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#808080')\">Gray<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#808080')\">#808080<\/a><\/td>\n        <td style=\"background-color:#808080;\" id=\"demo54\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#808080')\">Grey<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#808080')\">#808080<\/a><\/td>\n        <td style=\"background-color:#808080;\" id=\"demo55\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#008000')\">Green<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#008000')\">#008000<\/a><\/td>\n        <td style=\"background-color:#008000;\" id=\"demo56\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#ADFF2F')\">GreenYellow<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#ADFF2F')\">#ADFF2F<\/a><\/td>\n        <td style=\"background-color:#ADFF2F;\" id=\"demo57\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#F0FFF0')\">HoneyDew<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#F0FFF0')\">#F0FFF0<\/a><\/td>\n        <td style=\"background-color:#F0FFF0;\" id=\"demo58\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#FF69B4')\">HotPink<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#FF69B4')\">#FF69B4<\/a><\/td>\n        <td style=\"background-color:#FF69B4;\" id=\"demo59\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#CD5C5C')\">IndianRed<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#CD5C5C')\">#CD5C5C<\/a><\/td>\n        <td style=\"background-color:#CD5C5C;\" id=\"demo60\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#4B0082')\">Indigo<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#4B0082')\">#4B0082<\/a><\/td>\n        <td style=\"background-color:#4B0082;\" id=\"demo61\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#FFFFF0')\">Ivory<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#FFFFF0')\">#FFFFF0<\/a><\/td>\n        <td style=\"background-color:#FFFFF0;\" id=\"demo62\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#F0E68C')\">Khaki<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#F0E68C')\">#F0E68C<\/a><\/td>\n        <td style=\"background-color:#F0E68C;\" id=\"demo63\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#E6E6FA')\">Lavender<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#E6E6FA')\">#E6E6FA<\/a><\/td>\n        <td style=\"background-color:#E6E6FA;\" id=\"demo64\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#FFF0F5')\">LavenderBlush<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#FFF0F5')\">#FFF0F5<\/a><\/td>\n        <td style=\"background-color:#FFF0F5;\" id=\"demo65\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#7CFC00')\">LawnGreen<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#7CFC00')\">#7CFC00<\/a><\/td>\n        <td style=\"background-color:#7CFC00;\" id=\"demo66\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#FFFACD')\">LemonChiffon<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#FFFACD')\">#FFFACD<\/a><\/td>\n        <td style=\"background-color:#FFFACD;\" id=\"demo67\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#ADD8E6')\">LightBlue<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#ADD8E6')\">#ADD8E6<\/a><\/td>\n        <td style=\"background-color:#ADD8E6;\" id=\"demo68\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#F08080')\">LightCoral<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#F08080')\">#F08080<\/a><\/td>\n        <td style=\"background-color:#F08080;\" id=\"demo69\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#E0FFFF')\">LightCyan<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#E0FFFF')\">#E0FFFF<\/a><\/td>\n        <td style=\"background-color:#E0FFFF;\" id=\"demo70\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#FAFAD2')\">LightGoldenRodYellow<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#FAFAD2')\">#FAFAD2<\/a><\/td>\n        <td style=\"background-color:#FAFAD2;\" id=\"demo71\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#D3D3D3')\">LightGray<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#D3D3D3')\">#D3D3D3<\/a><\/td>\n        <td style=\"background-color:#D3D3D3;\" id=\"demo72\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#D3D3D3')\">LightGrey<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#D3D3D3')\">#D3D3D3<\/a><\/td>\n        <td style=\"background-color:#D3D3D3;\" id=\"demo73\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#90EE90')\">LightGreen<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#90EE90')\">#90EE90<\/a><\/td>\n        <td style=\"background-color:#90EE90;\" id=\"demo74\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#FFB6C1')\">LightPink<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#FFB6C1')\">#FFB6C1<\/a><\/td>\n        <td style=\"background-color:#FFB6C1;\" id=\"demo75\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#FFA07A')\">LightSalmon<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#FFA07A')\">#FFA07A<\/a><\/td>\n        <td style=\"background-color:#FFA07A;\" id=\"demo76\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#20B2AA')\">LightSeaGreen<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#20B2AA')\">#20B2AA<\/a><\/td>\n        <td style=\"background-color:#20B2AA;\" id=\"demo77\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#87CEFA')\">LightSkyBlue<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#87CEFA')\">#87CEFA<\/a><\/td>\n        <td style=\"background-color:#87CEFA;\" id=\"demo78\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#778899')\">LightSlateGray<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#778899')\">#778899<\/a><\/td>\n        <td style=\"background-color:#778899;\" id=\"demo79\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#778899')\">LightSlateGrey<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#778899')\">#778899<\/a><\/td>\n        <td style=\"background-color:#778899;\" id=\"demo80\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#B0C4DE')\">LightSteelBlue<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#B0C4DE')\">#B0C4DE<\/a><\/td>\n        <td style=\"background-color:#B0C4DE;\" id=\"demo81\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#FFFFE0')\">LightYellow<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#FFFFE0')\">#FFFFE0<\/a><\/td>\n        <td style=\"background-color:#FFFFE0;\" id=\"demo82\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#00FF00')\">Lime<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#00FF00')\">#00FF00<\/a><\/td>\n        <td style=\"background-color:#00FF00;\" id=\"demo83\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#32CD32')\">LimeGreen<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#32CD32')\">#32CD32<\/a><\/td>\n        <td style=\"background-color:#32CD32;\" id=\"demo84\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#FAF0E6')\">Linen<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#FAF0E6')\">#FAF0E6<\/a><\/td>\n        <td style=\"background-color:#FAF0E6;\" id=\"demo85\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#FF00FF')\">Magenta<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#FF00FF')\">#FF00FF<\/a><\/td>\n        <td style=\"background-color:#FF00FF;\" id=\"demo86\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#800000')\">Maroon<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#800000')\">#800000<\/a><\/td>\n        <td style=\"background-color:#800000;\" id=\"demo87\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#66CDAA')\">MediumAquaMarine<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#66CDAA')\">#66CDAA<\/a><\/td>\n        <td style=\"background-color:#66CDAA;\" id=\"demo88\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#0000CD')\">MediumBlue<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#0000CD')\">#0000CD<\/a><\/td>\n        <td style=\"background-color:#0000CD;\" id=\"demo89\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#BA55D3')\">MediumOrchid<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#BA55D3')\">#BA55D3<\/a><\/td>\n        <td style=\"background-color:#BA55D3;\" id=\"demo90\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#9370DB')\">MediumPurple<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#9370DB')\">#9370DB<\/a><\/td>\n        <td style=\"background-color:#9370DB;\" id=\"demo91\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#3CB371')\">MediumSeaGreen<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#3CB371')\">#3CB371<\/a><\/td>\n        <td style=\"background-color:#3CB371;\" id=\"demo92\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#7B68EE')\">MediumSlateBlue<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#7B68EE')\">#7B68EE<\/a><\/td>\n        <td style=\"background-color:#7B68EE;\" id=\"demo93\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#00FA9A')\">MediumSpringGreen<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#00FA9A')\">#00FA9A<\/a><\/td>\n        <td style=\"background-color:#00FA9A;\" id=\"demo94\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#48D1CC')\">MediumTurquoise<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#48D1CC')\">#48D1CC<\/a><\/td>\n        <td style=\"background-color:#48D1CC;\" id=\"demo95\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#C71585')\">MediumVioletRed<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#C71585')\">#C71585<\/a><\/td>\n        <td style=\"background-color:#C71585;\" id=\"demo96\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#191970')\">MidnightBlue<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#191970')\">#191970<\/a><\/td>\n        <td style=\"background-color:#191970;\" id=\"demo97\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#F5FFFA')\">MintCream<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#F5FFFA')\">#F5FFFA<\/a><\/td>\n        <td style=\"background-color:#F5FFFA;\" id=\"demo98\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#FFE4E1')\">MistyRose<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#FFE4E1')\">#FFE4E1<\/a><\/td>\n        <td style=\"background-color:#FFE4E1;\" id=\"demo99\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#FFE4B5')\">Moccasin<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#FFE4B5')\">#FFE4B5<\/a><\/td>\n        <td style=\"background-color:#FFE4B5;\" id=\"demo100\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#FFDEAD')\">NavajoWhite<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#FFDEAD')\">#FFDEAD<\/a><\/td>\n        <td style=\"background-color:#FFDEAD;\" id=\"demo101\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#000080')\">Navy<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#000080')\">#000080<\/a><\/td>\n        <td style=\"background-color:#000080;\" id=\"demo102\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#FDF5E6')\">OldLace<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#FDF5E6')\">#FDF5E6<\/a><\/td>\n        <td style=\"background-color:#FDF5E6;\" id=\"demo103\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#808000')\">Olive<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#808000')\">#808000<\/a><\/td>\n        <td style=\"background-color:#808000;\" id=\"demo104\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#6B8E23')\">OliveDrab<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#6B8E23')\">#6B8E23<\/a><\/td>\n        <td style=\"background-color:#6B8E23;\" id=\"demo105\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#FFA500')\">Orange<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#FFA500')\">#FFA500<\/a><\/td>\n        <td style=\"background-color:#FFA500;\" id=\"demo106\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#FF4500')\">OrangeRed<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#FF4500')\">#FF4500<\/a><\/td>\n        <td style=\"background-color:#FF4500;\" id=\"demo107\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#DA70D6')\">Orchid<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#DA70D6')\">#DA70D6<\/a><\/td>\n        <td style=\"background-color:#DA70D6;\" id=\"demo108\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#EEE8AA')\">PaleGoldenRod<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#EEE8AA')\">#EEE8AA<\/a><\/td>\n        <td style=\"background-color:#EEE8AA;\" id=\"demo109\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#98FB98')\">PaleGreen<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#98FB98')\">#98FB98<\/a><\/td>\n        <td style=\"background-color:#98FB98;\" id=\"demo110\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#AFEEEE')\">PaleTurquoise<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#AFEEEE')\">#AFEEEE<\/a><\/td>\n        <td style=\"background-color:#AFEEEE;\" id=\"demo111\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#DB7093')\">PaleVioletRed<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#DB7093')\">#DB7093<\/a><\/td>\n        <td style=\"background-color:#DB7093;\" id=\"demo112\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#FFEFD5')\">PapayaWhip<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#FFEFD5')\">#FFEFD5<\/a><\/td>\n        <td style=\"background-color:#FFEFD5;\" id=\"demo113\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#FFDAB9')\">PeachPuff<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#FFDAB9')\">#FFDAB9<\/a><\/td>\n        <td style=\"background-color:#FFDAB9;\" id=\"demo114\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#CD853F')\">Peru<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#CD853F')\">#CD853F<\/a><\/td>\n        <td style=\"background-color:#CD853F;\" id=\"demo115\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#FFC0CB')\">Pink<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#FFC0CB')\">#FFC0CB<\/a><\/td>\n        <td style=\"background-color:#FFC0CB;\" id=\"demo116\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#DDA0DD')\">Plum<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#DDA0DD')\">#DDA0DD<\/a><\/td>\n        <td style=\"background-color:#DDA0DD;\" id=\"demo117\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#B0E0E6')\">PowderBlue<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#B0E0E6')\">#B0E0E6<\/a><\/td>\n        <td style=\"background-color:#B0E0E6;\" id=\"demo118\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#800080')\">Purple<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#800080')\">#800080<\/a><\/td>\n        <td style=\"background-color:#800080;\" id=\"demo119\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#663399')\">RebeccaPurple<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#663399')\">#663399<\/a><\/td>\n        <td style=\"background-color:#663399;\" id=\"demo120\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#FF0000')\">Red<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#FF0000')\">#FF0000<\/a><\/td>\n        <td style=\"background-color:#FF0000;\" id=\"demo121\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#BC8F8F')\">RosyBrown<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#BC8F8F')\">#BC8F8F<\/a><\/td>\n        <td style=\"background-color:#BC8F8F;\" id=\"demo122\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#4169E1')\">RoyalBlue<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#4169E1')\">#4169E1<\/a><\/td>\n        <td style=\"background-color:#4169E1;\" id=\"demo123\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#8B4513')\">SaddleBrown<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#8B4513')\">#8B4513<\/a><\/td>\n        <td style=\"background-color:#8B4513;\" id=\"demo124\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#FA8072')\">Salmon<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#FA8072')\">#FA8072<\/a><\/td>\n        <td style=\"background-color:#FA8072;\" id=\"demo125\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#F4A460')\">SandyBrown<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#F4A460')\">#F4A460<\/a><\/td>\n        <td style=\"background-color:#F4A460;\" id=\"demo126\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#2E8B57')\">SeaGreen<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#2E8B57')\">#2E8B57<\/a><\/td>\n        <td style=\"background-color:#2E8B57;\" id=\"demo127\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#FFF5EE')\">SeaShell<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#FFF5EE')\">#FFF5EE<\/a><\/td>\n        <td style=\"background-color:#FFF5EE;\" id=\"demo128\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#A0522D')\">Sienna<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#A0522D')\">#A0522D<\/a><\/td>\n        <td style=\"background-color:#A0522D;\" id=\"demo129\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#C0C0C0')\">Silver<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#C0C0C0')\">#C0C0C0<\/a><\/td>\n        <td style=\"background-color:#C0C0C0;\" id=\"demo130\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#87CEEB')\">SkyBlue<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#87CEEB')\">#87CEEB<\/a><\/td>\n        <td style=\"background-color:#87CEEB;\" id=\"demo131\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#6A5ACD')\">SlateBlue<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#6A5ACD')\">#6A5ACD<\/a><\/td>\n        <td style=\"background-color:#6A5ACD;\" id=\"demo132\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#708090')\">SlateGray<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#708090')\">#708090<\/a><\/td>\n        <td style=\"background-color:#708090;\" id=\"demo133\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#708090')\">SlateGrey<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#708090')\">#708090<\/a><\/td>\n        <td style=\"background-color:#708090;\" id=\"demo134\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#FFFAFA')\">Snow<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#FFFAFA')\">#FFFAFA<\/a><\/td>\n        <td style=\"background-color:#FFFAFA;\" id=\"demo135\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#00FF7F')\">SpringGreen<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#00FF7F')\">#00FF7F<\/a><\/td>\n        <td style=\"background-color:#00FF7F;\" id=\"demo136\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#4682B4')\">SteelBlue<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#4682B4')\">#4682B4<\/a><\/td>\n        <td style=\"background-color:#4682B4;\" id=\"demo137\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#D2B48C')\">Tan<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#D2B48C')\">#D2B48C<\/a><\/td>\n        <td style=\"background-color:#D2B48C;\" id=\"demo138\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#008080')\">Teal<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#008080')\">#008080<\/a><\/td>\n        <td style=\"background-color:#008080;\" id=\"demo139\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#D8BFD8')\">Thistle<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#D8BFD8')\">#D8BFD8<\/a><\/td>\n        <td style=\"background-color:#D8BFD8;\" id=\"demo140\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#FF6347')\">Tomato<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#FF6347')\">#FF6347<\/a><\/td>\n        <td style=\"background-color:#FF6347;\" id=\"demo141\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#40E0D0')\">Turquoise<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#40E0D0')\">#40E0D0<\/a><\/td>\n        <td style=\"background-color:#40E0D0;\" id=\"demo142\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#EE82EE')\">Violet<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#EE82EE')\">#EE82EE<\/a><\/td>\n        <td style=\"background-color:#EE82EE;\" id=\"demo143\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#F5DEB3')\">Wheat<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#F5DEB3')\">#F5DEB3<\/a><\/td>\n        <td style=\"background-color:#F5DEB3;\" id=\"demo144\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#FFFFFF')\">White<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#FFFFFF')\">#FFFFFF<\/a><\/td>\n        <td style=\"background-color:#FFFFFF;\" id=\"demo145\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#F5F5F5')\">WhiteSmoke<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#F5F5F5')\">#F5F5F5<\/a><\/td>\n        <td style=\"background-color:#F5F5F5;\" id=\"demo146\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#FFFF00')\">Yellow<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#FFFF00')\">#FFFF00<\/a><\/td>\n        <td style=\"background-color:#FFFF00;\" id=\"demo147\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#9ACD32')\">YellowGreen<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#9ACD32')\">#9ACD32<\/a><\/td>\n        <td style=\"background-color:#9ACD32;\" id=\"demo148\"><\/td>\n    <\/tr>\n<\/table>\n\n<script>\nfunction changeColor(color) {\n    var demoCells = document.querySelectorAll('td[id^=\"demo\"]');\n    demoCells.forEach(function(cell) {\n        cell.style.backgroundColor = color;\n    });\n}\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-412d331 elementor-widget elementor-widget-text-editor\" data-id=\"412d331\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<h2><span style=\"font-weight: 400;\">Kleurformaten in CSS begrijpen<\/span><\/h2>\n<h3><span style=\"font-weight: 400;\">Basis kleurwoorden <\/span><\/h3>\n<p><span style=\"font-weight: 400;\">De makkelijkste manier om te beginnen met kleuren in <a class=\"wpil_keyword_link\" href=\"https:\/\/elementor.com\/blog\/what-is-css\/\"   title=\"What Is CSS? How to Use it in Web Design (2025)\" data-wpil-keyword-link=\"linked\"  data-wpil-monitor-id=\"19355\">CSS<\/a> is door basis kleurwoorden te gebruiken. Dit zijn gewone kleurnamen zoals \u201crood,\u201d \u201cblauw,\u201d \u201cgroen,\u201d \u201cgeel,\u201d en nog veel meer. Er zijn meer dan 140 erkende kleurwoorden, wat een goed beginpunt is voor simpele kleurkeuzes.<\/span><\/p>\n<h4><span style=\"font-weight: 400;\">Voorbeeld<\/span><\/h4>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-50b08db elementor-widget elementor-widget-code-highlight\" data-id=\"50b08db\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-okaidia copy-to-clipboard word-wrap\">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-html line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-html\">\n\t\t\t\t\t<xmp>HTML\r\n<p style=\"color: orange;\">This paragraph will have orange text.<\/p>\r\n<div style=\"background-color: purple;\">This div will have a purple background. <\/div>\r\n<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-3980fbe elementor-widget elementor-widget-text-editor\" data-id=\"3980fbe\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<h3><span style=\"font-weight: 400;\">Uitgebreide kleurwoorden <\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Wil je een meer genuanceerd kleurenpalet? CSS breidt z&#8217;n vocabulaire uit met uitgebreide kleurwoorden. Deze bieden specifiekere tinten zoals \u201cteal,\u201d \u201ckoraal,\u201d \u201clavendel,\u201d en \u201cazuurblauw.\u201d Zie deze als de meer \u201cverfijnde\u201d neven van de basis kleurwoorden.<\/span><\/p>\n<h4><span style=\"font-weight: 400;\">Voorbeeld<\/span><\/h4>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-0913c25 elementor-widget elementor-widget-code-highlight\" data-id=\"0913c25\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-okaidia copy-to-clipboard word-wrap\">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-html line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-html\">\n\t\t\t\t\t<xmp>HTML\r\n<h1 style=\"color: aquamarine;\">This heading will have an aquamarine color.<\/h1>\r\n<button style=\"background-color: fuchsia;\">This button will have a fuchsia background.<\/button>  \r\n<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-22e0896 elementor-widget elementor-widget-text-editor\" data-id=\"22e0896\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><b>Tip:<\/b><span style=\"font-weight: 400;\"> Een volledige lijst van uitgebreide kleurwoorden is te vinden op verschillende bronnen. Deze bieden vaak een verrassend breed scala aan keuzes voor de meeste ontwerpbehoeften.<\/span><\/p>\n<h3><span style=\"font-weight: 400;\">Hexadecimale kleurcodes<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Hexadecimale kleurcodes openen een enorm spectrum aan kleurmogelijkheden. Ze gebruiken een code van zes cijfers met een hekje (#) ervoor en laten zien hoeveel rood, groen en blauw (RGB) er in de kleur zit. Elk paar cijfers bepaalt hoe sterk \u00e9\u00e9n van die basiskleuren is, van 00 (geen kleur) tot FF (volle sterkte).<\/span><\/p>\n<h4><span style=\"font-weight: 400;\">Voorbeelden<\/span><\/h4>\n<ol>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">#FF0000 = Puur Rood<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">#008000 = Puur Groen<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">#0000FF = Puur Blauw<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">#FFFFFF = Wit<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">#000000 = Zwart<\/span><\/li>\n<\/ol>\n<p><span style=\"font-weight: 400;\">Met hexadecimale codes kun je meer dan 16 miljoen kleurcombinaties maken! Ze worden het meest gebruikt om kleuren aan te geven in <a href=\"https:\/\/elementor.com\/blog\/nl\/7-beste-portfolio-website-bouwers-van-year\/\" data-wpil-monitor-id=\"10365\">webdesign<\/a> omdat ze zo precies zijn.<\/span><\/p>\n<p><b>Verkorte Hex-codes:<\/b><span style=\"font-weight: 400;\"> Voor het gemak kun je een verkorte versie van drie cijfers gebruiken waarbij elk cijfer wordt verdubbeld (bijvoorbeeld #FF0033 kan worden verkort tot #F03).<\/span><\/p>\n<p><b>Tip:<\/b><span style=\"font-weight: 400;\"> <a href=\"https:\/\/elementor.com\/blog\/nl\/online-px-naar-inches-converter-conversietabel\/\" data-wpil-monitor-id=\"10366\">Online kleurkiezers en converters<\/a> maken het makkelijk om de perfecte hex-code te vinden of om tussen verschillende kleurformaten te wisselen. Experimenteer en verken die hulpmiddelen!<\/span><\/p>\n<h3><span style=\"font-weight: 400;\">RGB en RGBA Kleuren<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">RGB en RGBA bieden een numerieke manier om kleuren te defini\u00ebren op basis van hun rood-, groen- en blauwcomponenten.<\/span><\/p>\n<h3><span style=\"font-weight: 400;\">RGB Formaat<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Het gebruikt de <\/span><span style=\"font-weight: 400;\">rgb()<\/span><span style=\"font-weight: 400;\">  functie. Elke kleurwaarde loopt van 0 tot 255 en geeft aan hoe sterk die kleur is.<\/span><\/p>\n<h4><span style=\"font-weight: 400;\">Voorbeeld<\/span><\/h4>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-022a309 elementor-widget elementor-widget-code-highlight\" data-id=\"022a309\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-okaidia copy-to-clipboard word-wrap\">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-css line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-css\">\n\t\t\t\t\t<xmp>CSS\r\nbody {\r\n   background-color: rgb(255, 128, 0); \/* A bright orange color *\/\r\n}\r\nRGBA Format\r\nThis function adds a fourth value (alpha) to the rgba() function controlling opacity (transparency). The alpha value ranges from 0.0 (fully transparent) to 1.0 (fully opaque).\r\nExample\r\nCSS\r\np {\r\n   color: rgba(0, 0, 0, 0.7); \/* Black text with 70% opacity *\/\r\n}\r\n<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-c5922bc elementor-widget elementor-widget-text-editor\" data-id=\"c5922bc\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><b>Waarom RGBA? <\/b><span style=\"font-weight: 400;\">Met RGBA kun je half-doorzichtige kleuren, overlays, fade-effecten en geavanceerde designs maken die spelen met lagen. Het is een essentieel gereedschap voor moderne <a href=\"https:\/\/elementor.com\/blog\/nl\/32-beste-handschriftlettertypen-voor-webdesigners-in-year-geef-je-ontwerpen-persoonlijkheid-en-flair\/\" data-wpil-monitor-id=\"10367\">webdesigners<\/a>.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Zowel RGB als RGBA support het gebruik van percentages in plaats van numerieke waarden (bijvoorbeeld <\/span><span style=\"font-weight: 400;\">rgb(100%, 50%, 0%)<\/span><span style=\"font-weight: 400;\">). Maar de numerieke vorm wordt meestal geprefereerd in professionele settings vanwege de grotere precisie.<\/span><\/p>\n<h3><span style=\"font-weight: 400;\">HSL en HSLA Kleuren <\/span><\/h3>\n<p><span style=\"font-weight: 400;\">HSL staat voor Hue (Tint), Saturation (Verzadiging) en Lightness (Lichtheid). Het is een kleurmodel dat een manier biedt om kleuren uit te drukken die meer in lijn is met hoe we ze intu\u00eftief waarnemen:<\/span><\/p>\n<h4><span style=\"font-weight: 400;\">Tint<\/span><\/h4>\n<p><span style=\"font-weight: 400;\">De eigenlijke kleur op het kleurenwiel wordt weergegeven als een graad van 0 tot 360:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"2\"><span style=\"font-weight: 400;\">0\/360 = Rood<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"2\"><span style=\"font-weight: 400;\">120 = Groen<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"2\"><span style=\"font-weight: 400;\">240 = Blauw<\/span><\/li>\n<\/ul>\n<h4><span style=\"font-weight: 400;\">Verzadiging<\/span><\/h4>\n<p><span style=\"font-weight: 400;\">De intensiteit of levendigheid van de kleur wordt uitgedrukt als een percentage. 0% is grijswaarden, terwijl 100% volledig verzadigd is.<\/span><\/p>\n<h4><span style=\"font-weight: 400;\">Lichtheid<\/span><\/h4>\n<p><span style=\"font-weight: 400;\">Hoe licht of donker de kleur is, wordt ook uitgedrukt als een percentage. 0% is zwart, 50% is de echte tint, en 100% is wit.<\/span><\/p>\n<p><b>HSLA<\/b><span style=\"font-weight: 400;\"> voegt het alpha-kanaal toe voor transparantie, net als RGBA.<\/span><\/p>\n<h4><span style=\"font-weight: 400;\">Voorbeeld<\/span><\/h4>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-973c303 elementor-widget elementor-widget-code-highlight\" data-id=\"973c303\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-okaidia copy-to-clipboard word-wrap\">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-css line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-css\">\n\t\t\t\t\t<xmp>CSS\r\nh1 {\r\n  color: hsl(240, 100%, 50%); \/* A pure blue color *\/\r\n}\r\np {\r\n    background-color: hsla(0, 100%, 50%, 0.8); \/* A semi-transparent red *\/ \r\n} \r\n<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-386ee74 elementor-widget elementor-widget-text-editor\" data-id=\"386ee74\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<h5><b>Waarom HSL\/HSLA?<\/b><span style=\"font-weight: 400;\"> <\/span><\/h5>\n<p><span style=\"font-weight: 400;\">HSL\/HSLA wordt vaak geprefereerd door designers omdat je ermee over kleurcomponenten onafhankelijk kunt nadenken. Wil je een iets lichtere tint van de kleur die je gebruikt? Pas gewoon de lichtheidswaarde aan. Heb je een minder verzadigde versie nodig? Verlaag de verzadiging. Het biedt een natuurlijke manier om kleuren te manipuleren.<\/span><\/p>\n<h2><span style=\"font-weight: 400;\">Kleurmanipulatie in CSS<\/span><\/h2>\n<h3><span style=\"font-weight: 400;\">Kleurfuncties <\/span><\/h3>\n<p><span style=\"font-weight: 400;\">CSS heeft ingebouwde functies waarmee je bestaande kleuren direct in je stylesheets kunt aanpassen. Deze dynamische aanpak geeft je ongelooflijke flexibiliteit. Laten we eens kijken naar een paar belangrijke functies:<\/span><\/p>\n<p><b>lighten() en darken():<\/b><span style=\"font-weight: 400;\">  Deze functies nemen een kleur en een percentage. Ze passen de lichtheid van de originele kleur aan, waardoor deze respectievelijk lichter of donkerder wordt.<\/span><\/p>\n<h4><span style=\"font-weight: 400;\">Voorbeeld<\/span><\/h4>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-a2633e1 elementor-widget elementor-widget-code-highlight\" data-id=\"a2633e1\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-okaidia copy-to-clipboard word-wrap\">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-css line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-css\">\n\t\t\t\t\t<xmp>CSS\r\np {\r\n  color: blue; \r\n}\r\np.highlight {\r\n  color: lighten(blue, 20%); \/* Creates a lighter blue for the highlighted text *\/\r\n}\r\n<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-ca09db5 elementor-widget elementor-widget-text-editor\" data-id=\"ca09db5\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><b>saturate() en desaturate()<\/b><span style=\"font-weight: 400;\"> Vergelijkbaar met lighten en darken, deze functies passen de verzadiging (intensiteit) van een kleur aan met een percentage.<\/span><\/p>\n<h4><span style=\"font-weight: 400;\">Voorbeeld<\/span><\/h4>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-aee6adb elementor-widget elementor-widget-code-highlight\" data-id=\"aee6adb\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-okaidia copy-to-clipboard word-wrap\">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-css line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-css\">\n\t\t\t\t\t<xmp>CSS\r\nbutton {\r\n  background-color: hsl(30, 80%, 60%); \/* An orange button *\/\r\n}\r\nbutton:hover { \r\n  background-color: desaturate(hsl(30, 80%, 60%), 30%); \/* A less saturated orange on hover *\/\r\n}\r\n<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-e95f4a0 elementor-widget elementor-widget-text-editor\" data-id=\"e95f4a0\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<h5><b>Voordelen van Kleurfuncties:<\/b><span style=\"font-weight: 400;\"> <\/span><\/h5>\n<p><span style=\"font-weight: 400;\">Deze functies stroomlijnen aanpassingen, waardoor het makkelijk wordt om variaties van een basiskleur te maken om een consistent <a href=\"https:\/\/elementor.com\/blog\/nl\/complementaire-kleurenschemas-in-webdesign-een-uitgebreide-gids\/\" data-wpil-monitor-id=\"10368\">kleurenschema in je designs<\/a> te behouden.<\/span><\/p>\n<h3><span style=\"font-weight: 400;\">Relatieve Kleuren <\/span><\/h3>\n<p><span style=\"font-weight: 400;\">CSS relatieve kleuren bieden opmerkelijke aanpassingsmogelijkheden. Ze stellen je in staat om kleuren te defini\u00ebren <\/span><i><span style=\"font-weight: 400;\">gebaseerd op een bestaande kleur<\/span><\/i><span style=\"font-weight: 400;\">. Dit is ongelooflijk handig bij het maken van een consistent kleurenpalet of variaties tussen elementen.<\/span><\/p>\n<p><b>Hoe werkt het?<\/b><span style=\"font-weight: 400;\"> Je gebruikt het <\/span><span style=\"font-weight: 400;\">from<\/span><span style=\"font-weight: 400;\">  sleutelwoord gevolgd door een basiskleur. Dan gebruik je variabelen zoals r, g, b, en <\/span><span style=\"font-weight: 400;\">a<\/span><span style=\"font-weight: 400;\"> (die staan voor rood, groen, blauw en alpha) om delen van die basiskleur aan te passen.<\/span><\/p>\n<h4><span style=\"font-weight: 400;\">Voorbeeld<\/span><\/h4>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-f725f58 elementor-widget elementor-widget-code-highlight\" data-id=\"f725f58\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-okaidia copy-to-clipboard word-wrap\">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-css line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-css\">\n\t\t\t\t\t<xmp>CSS\r\n.section-title {\r\n  color: blue;\r\n}\r\n.section-title-highlight {\r\n  color: from blue lighten(r, 20%) saturate(g, 50%); \r\n  \/* A color derived from blue, with lighter red and more saturated green components *\/\r\n}\r\n<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-2e21277 elementor-widget elementor-widget-text-editor\" data-id=\"2e21277\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><span style=\"font-weight: 400;\">Relatieve kleuren zijn echt handig als je kleurverhoudingen wilt behouden, zelfs als een basiskleur verandert in je <a href=\"https:\/\/elementor.com\/blog\/nl\/carriere-in-webdesign-op-year-vaardigheden-strategieen-en-mogelijkheden\/\" data-wpil-monitor-id=\"10369\">webdesign<\/a>.<\/span><\/p>\n<p><b>Let op:<\/b><span style=\"font-weight: 400;\"> Relatieve kleuren zijn nog niet zo lang in CSS, dus hoewel browser support toeneemt, is het slim om even te checken of het werkt voordat je ze gebruikt.<\/span><\/p>\n<h3><span style=\"font-weight: 400;\">CSS3 Kleurmanipulatie Updates<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">We hebben de basismethoden voor kleurmanipulatie besproken, maar het is goed om te weten dat CSS3 een paar gave nieuwe manieren heeft ge\u00efntroduceerd om met kleuren te werken:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>HWB:<\/b><span style=\"font-weight: 400;\">  Dit kleurmodel staat voor Tint, Witheid en Zwartheid. Het biedt een andere manier om kleuren te beschrijven op een manier die voor mensen logisch is, wat soms fijner is bij het werken met kleurvariaties.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Lab en LCH:<\/b><span style=\"font-weight: 400;\"> Deze kleurruimtes zijn ontworpen om menselijke kleurwaarneming beter weer te geven, waardoor ze in bepaalde situaties preciezer zijn.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Color-mix() functie: <\/b><span style=\"font-weight: 400;\">Met deze functie kun je kleuren op verschillende manieren mengen, direct in CSS, vergelijkbaar met blend-modi in beeldbewerkingsprogramma&#8217;s.<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">Hoewel deze nieuwere functies extra flexibiliteit bieden, kan browser support verschillen. Check altijd even of het werkt als je ze in je projecten wilt gebruiken.<\/span><\/p>\n<h3><span style=\"font-weight: 400;\">Kleurcontrast en Toegankelijkheid<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Je kleurkeuzes hebben direct invloed op hoe toegankelijk je website is voor mensen met visuele beperkingen. Voldoende contrast tussen tekst en achtergrond is cruciaal voor de leesbaarheid.<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>WCAG-richtlijnen:<\/b><span style=\"font-weight: 400;\"> De Web Content Accessibility Guidelines (WCAG) bepalen minimale contrastverhoudingen voor verschillende tekstgroottes en -stijlen om ervoor te zorgen dat inhoud leesbaar is.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Tools voor contrastcontrole:<\/b><span style=\"font-weight: 400;\"> Er zijn veel online tools die je helpen contrastverhoudingen te checken. <\/span> <\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">Het is goed om te weten dat <a href=\"https:\/\/elementor.com\/blog\/nl\/verken-elementor-pro-weergavevoorwaarden-rolrechten-in-de-elementmanager-en-meer\/\" data-wpil-monitor-id=\"10370\">Elementor ingebouwde tools en functies heeft<\/a> waardoor je makkelijker rekening kunt houden met toegankelijkheid in je ontwerpproces. Deze subtiele vermelding past bij onze algemene strategie om Elementor naadloos in het verhaal te verweven.<\/span><\/p>\n<p><b>Onthoud &#8211;<\/b><span style=\"font-weight: 400;\"> <a href=\"https:\/\/elementor.com\/blog\/nl\/31-beste-webveilige-lettertypen-voor-toegankelijk-ontwerp\/\" data-wpil-monitor-id=\"10388\">Toegankelijk ontwerp<\/a> is niet alleen goed om te doen; het vergroot het bereik en de inclusiviteit van je website.<\/span><\/p>\n<h2><span style=\"font-weight: 400;\">Kleurentheorie voor Webontwerpers<\/span><\/h2>\n<h3><span style=\"font-weight: 400;\">De Kleurencirkel  <\/span><\/h3>\n<p><span style=\"font-weight: 400;\">De basis van kleurentheorie ligt in de kleurencirkel. Dit cirkelvormige diagram rangschikt kleuren op basis van hun relaties tot elkaar. Hier is een overzicht van de belangrijkste onderdelen:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Primaire Kleuren:<\/b><span style=\"font-weight: 400;\">  Rood, geel en blauw. Dit zijn de <a href=\"https:\/\/elementor.com\/blog\/nl\/10-toonaangevende-webanalysetools-voor-year-free-and-paid\/\" data-wpil-monitor-id=\"10389\">bouwstenen<\/a> van alle andere kleuren.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Secundaire Kleuren:<\/b><span style=\"font-weight: 400;\">  Oranje, groen en paars. Ze worden gemaakt door twee primaire kleuren te mengen.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Tertiaire Kleuren <\/b><span style=\"font-weight: 400;\">zijn kleuren die ontstaan door het mengen van een primaire en een secundaire kleur (bijvoorbeeld geel-oranje, rood-violet).<\/span><\/li>\n<\/ul>\n<p><b>De Kleurencirkel Begrijpen:<\/b><span style=\"font-weight: 400;\"> De kleurencirkel is een krachtig visualisatiemiddel om te begrijpen hoe kleuren op elkaar inwerken en om doelbewust kleurencombinaties te maken.<\/span><\/p>\n<h3><span style=\"font-weight: 400;\">Kleurenschema&#8217;s  <\/span><\/h3>\n<p><span style=\"font-weight: 400;\">De kleurencirkel biedt een kader voor het maken van harmonieuze kleurenpaletten. Hier zijn een paar veelgebruikte schema&#8217;s:<\/span><\/p>\n<h4><span style=\"font-weight: 400;\">Complementair<\/span><\/h4>\n<p><span style=\"font-weight: 400;\">Kleuren die recht tegenover elkaar staan op de kleurencirkel (bijvoorbeeld rood en groen, blauw en oranje). Deze cre\u00ebren hoog contrast en levendigheid.<\/span><\/p>\n<h4><span style=\"font-weight: 400;\">Analoog<\/span><\/h4>\n<p><span style=\"font-weight: 400;\">Kleuren die naast elkaar liggen op de kleurencirkel (bijvoorbeeld rood, rood-oranje en oranje). Ze geven een harmonieus en vaak rustgevend gevoel.<\/span><\/p>\n<h4><span style=\"font-weight: 400;\">Triadisch<\/span><\/h4>\n<p><span style=\"font-weight: 400;\">Drie kleuren die gelijkmatig verdeeld zijn over de kleurencirkel (bijvoorbeeld rood, geel en blauw). Deze schema&#8217;s zijn gewaagd en dynamisch.<\/span><\/p>\n<h4><span style=\"font-weight: 400;\">Gesplitst-Complementair<\/span><\/h4>\n<p><span style=\"font-weight: 400;\">Een variatie op complementaire kleuren waarbij je de twee kleuren gebruikt die naast de directe tegenovergestelde kleur van je basiskleur liggen, wat een balans tussen contrast en harmonie cre\u00ebert.<\/span><\/p>\n<h4><span style=\"font-weight: 400;\">Tetradisch (of Dubbel Complementair)<\/span><\/h4>\n<p><span style=\"font-weight: 400;\">Gebruikt twee sets complementaire kleuren, vaak in de vorm van een rechthoek op de kleurencirkel. Dit biedt een breed scala aan kleurencombinaties met veel veelzijdigheid.<\/span><\/p>\n<h4><span style=\"font-weight: 400;\">Monochromatisch<\/span><\/h4>\n<p><span style=\"font-weight: 400;\">Variaties van \u00e9\u00e9n tint met verschillende lichtheid en verzadigingswaarden (bijvoorbeeld lichtblauw, middenblauw en donkerblauw). Monochromatische schema&#8217;s roepen een gevoel van eenheid en elegantie op.<\/span><\/p>\n<h4><span style=\"font-weight: 400;\">Tips<\/span><\/h4>\n<ol>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Online Tools:<\/b><span style=\"font-weight: 400;\"> Kleurenschema-generators kunnen geweldige hulpmiddelen zijn om te experimenteren en de perfecte combinatie te vinden.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Balans:<\/b><span style=\"font-weight: 400;\"> Hoewel gewaagde combinaties opvallend kunnen zijn, is het belangrijk om een balans te vinden tussen levendigheid en visuele samenhang in je <a href=\"https:\/\/elementor.com\/blog\/nl\/wat-is-webdesign-en-ontwikkeling-design-vs-front-end-ontwikkeling-vs-back-end-ontwikkeling\/\" data-wpil-monitor-id=\"10371\">webdesign<\/a>.<\/span><\/li>\n<\/ol>\n<h3><span style=\"font-weight: 400;\">Kleurpsychologie<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Kleurkeuzes hebben een diepgaande invloed op hoe mensen je website waarnemen en er emotioneel op reageren. Door kleurpsychologie te begrijpen, kun je specifieke stemmingen en associaties oproepen.<\/span><\/p>\n<h4><span style=\"font-weight: 400;\">Veelvoorkomende kleurassociaties (Westerse cultuur)<\/span><\/h4>\n<ol>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Rood:<\/b><span style=\"font-weight: 400;\">  Passie, opwinding, energie, maar ook gevaar of urgentie. Gebruik het strategisch!<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Blauw:<\/b><span style=\"font-weight: 400;\">  Vertrouwen, betrouwbaarheid, kalmte, professionaliteit. Vaak populair op zakelijke websites.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Groen:<\/b><span style=\"font-weight: 400;\">  Natuur, groei, harmonie, frisheid. Vaak gelinkt aan milieubewuste merken.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Geel:<\/b><span style=\"font-weight: 400;\">  Optimisme, geluk, speelsheid. Het kan overweldigend zijn als je het te veel gebruikt.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Oranje:<\/b><span style=\"font-weight: 400;\">  Warmte, enthousiasme, betaalbaarheid. Geweldig voor call-to-actions.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Paars:<\/b><span style=\"font-weight: 400;\">  Luxe, verfijning, creativiteit. Vaak gebruikt in artistieke of spirituele contexten.<\/span><\/li>\n<\/ol>\n<h4><span style=\"font-weight: 400;\">Belangrijke overwegingen<\/span><\/h4>\n<ol>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Culturele context:<\/b><span style=\"font-weight: 400;\">  Kleurassociaties kunnen per cultuur verschillen. Doe je onderzoek als je je richt op een wereldwijd publiek.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Merkidentiteit:<\/b><span style=\"font-weight: 400;\"> Je kleurkeuzes moeten aansluiten bij de algemene persoonlijkheid en boodschap van je merk.<\/span><\/li>\n<\/ol>\n<p><span style=\"font-weight: 400;\">Met een <a href=\"https:\/\/elementor.com\/blog\/nl\/11-beste-websitebouwers-voor-blogs-in-year\/\" data-wpil-monitor-id=\"10372\">website builder<\/a> zoals Elementor kun je experimenteren met en kleurpsychologie toepassen. De intu\u00eftieve kleurkiezers en <a href=\"https:\/\/elementor.com\/blog\/nl\/maak-kennis-met-elementor-3-13-bouw-slanke-en-flexibele-website-indelingen-met-css-grid\/\" data-wpil-monitor-id=\"10390\">flexibele stylingopties maken het makkelijk om het uiterlijk en gevoel van je website<\/a> precies af te stemmen op de emotionele respons die je wilt oproepen.<\/span><\/p>\n<h2><span style=\"font-weight: 400;\">Geavanceerde CSS-kleurtechnieken<\/span><\/h2>\n<h3><span style=\"font-weight: 400;\">Gradi\u00ebnten<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Gradi\u00ebnten cre\u00ebren naadloze overgangen tussen twee of meer kleuren, waardoor diepte en visuele interesse aan je <a href=\"https:\/\/elementor.com\/blog\/web-design-statistics\/\" data-wpil-monitor-id=\"10373\">webdesigns<\/a> worden toegevoegd. CSS biedt verschillende soorten gradi\u00ebnten:<\/span><\/p>\n<h4><span style=\"font-weight: 400;\">Lineaire gradi\u00ebnten<\/span><\/h4>\n<p><span style=\"font-weight: 400;\">Kleuren veranderen in een rechte lijn. Je definieert een richting (bijv. \u201cto right\u201d, \u201cto bottom left\u201d), en kleurstops langs de weg.<\/span><\/p>\n<h5><span style=\"font-weight: 400;\">Voorbeeld<\/span><\/h5>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-d50d872 elementor-widget elementor-widget-code-highlight\" data-id=\"d50d872\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-okaidia copy-to-clipboard word-wrap\">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-css line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-css\">\n\t\t\t\t\t<xmp>CSS\r\nbackground: linear-gradient(to right, red, orange, yellow);<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-bf10667 elementor-widget elementor-widget-text-editor\" data-id=\"bf10667\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<h4><span style=\"font-weight: 400;\">Radiale gradi\u00ebnten<\/span><\/h4>\n<p><span style=\"font-weight: 400;\">Kleuren veranderen naar buiten vanuit een centraal punt, waardoor een cirkelvormig of elliptisch effect ontstaat.<\/span><\/p>\n<h5><span style=\"font-weight: 400;\">Voorbeeld<\/span><\/h5>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-cb5fe2b elementor-widget elementor-widget-code-highlight\" data-id=\"cb5fe2b\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-okaidia copy-to-clipboard word-wrap\">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-css line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-css\">\n\t\t\t\t\t<xmp>CSS\r\nbackground: radial-gradient(blue, lightblue); \r\n<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-48fdafe elementor-widget elementor-widget-text-editor\" data-id=\"48fdafe\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<h4><span style=\"font-weight: 400;\">Herhalende gradi\u00ebnten<\/span><\/h4>\n<p><span style=\"font-weight: 400;\">Cre\u00eber gestreepte of gepatrooneerde effecten door een gradi\u00ebntpatroon te herhalen.<\/span><\/p>\n<h5><span style=\"font-weight: 400;\">Voorbeeld<\/span><\/h5>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-46fb496 elementor-widget elementor-widget-code-highlight\" data-id=\"46fb496\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-okaidia copy-to-clipboard word-wrap\">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-css line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-css\">\n\t\t\t\t\t<xmp>CSS\r\nbackground: repeating-linear-gradient(45deg, black, black 10px, white 10px, white 20px);\r\n<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-28e9dc6 elementor-widget elementor-widget-text-editor\" data-id=\"28e9dc6\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><span style=\"font-weight: 400;\">Tip &#8211; <\/span><b>Gradi\u00ebntgeneratoren:<\/b><span style=\"font-weight: 400;\"> Online tools maken het cre\u00ebren en aanpassen van gradi\u00ebnten een fluitje van een cent.<\/span><\/p>\n<h3><span style=\"font-weight: 400;\">Kleuranimaties en -overgangen<\/span><\/h3>\n<p><span style=\"font-weight: 400;\"><a href=\"https:\/\/elementor.com\/blog\/text-color-css\/\" data-wpil-monitor-id=\"10374\">Met CSS kun je soepele kleurveranderingen maken<\/a>, wat een vleugje interactie en visuele aantrekkingskracht aan je websites toevoegt.<\/span><\/p>\n<h4><span style=\"font-weight: 400;\">Overgangen<\/span><\/h4>\n<p><span style=\"font-weight: 400;\">Geleidelijke veranderingen in kleureigenschappen die worden geactiveerd door een gebeurtenis, zoals het hoveren over een knop (<\/span><span style=\"font-weight: 400;\">transition<\/span><span style=\"font-weight: 400;\"> eigenschap).<\/span><\/p>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-7070d5b elementor-widget elementor-widget-code-highlight\" data-id=\"7070d5b\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-okaidia copy-to-clipboard word-wrap\">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-css line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-css\">\n\t\t\t\t\t<xmp>CSS\r\nbutton {\r\n   background-color: blue;\r\n   transition: background-color 0.5s ease-in-out; \r\n}\r\n\r\nbutton:hover {\r\n   background-color: green;\r\n}\r\n<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-c1bd813 elementor-widget elementor-widget-text-editor\" data-id=\"c1bd813\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<h4><span style=\"font-weight: 400;\">Animaties<\/span><\/h4>\n<p><span style=\"font-weight: 400;\">Complexere kleurveranderingen met behulp van keyframes en de <\/span><span style=\"font-weight: 400;\">@keyframes<\/span><span style=\"font-weight: 400;\"> regel om verschillende punten in de animatiesequentie te defini\u00ebren.<\/span><\/p>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-df114a0 elementor-widget elementor-widget-code-highlight\" data-id=\"df114a0\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-okaidia copy-to-clipboard word-wrap\">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-css line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-css\">\n\t\t\t\t\t<xmp>CSS\r\n@keyframes color-pulse {\r\n  0% { background-color: red; }\r\n  50% { background-color: yellow; }\r\n  100% { background-color: red; }\r\n}\r\n<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-bce2528 elementor-widget elementor-widget-text-editor\" data-id=\"bce2528\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<h4><span style=\"font-weight: 400;\">Toepassingen<\/span><\/h4>\n<p><span style=\"font-weight: 400;\">Kleuranimaties en -overgangen kunnen worden gebruikt voor:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Interactieve elementen (knoppen, links)<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Het benadrukken van meldingen of updates<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Het toevoegen van speelse visuele effecten<\/span><\/li>\n<\/ul>\n<p><b>Let op:<\/b><span style=\"font-weight: 400;\">  Gebruik animaties met beleid! Te veel gebruiken kan afleiden in plaats van de <a href=\"https:\/\/elementor.com\/blog\/how-osm-uses-additional-breakpoints-for-ux\/\" data-wpil-monitor-id=\"10375\">gebruikerservaring<\/a> verbeteren.<\/span><\/p>\n<h3><span style=\"font-weight: 400;\">CSS-filters <\/span><\/h3>\n<p><span style=\"font-weight: 400;\">CSS-filters bieden een krachtige manier om het uiterlijk van elementen op je website te wijzigen, inclusief afbeeldingen, achtergronden en zelfs tekst. Hier zijn enkele populaire filters:<\/span><\/p>\n<ol>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>grayscale():<\/b><span style=\"font-weight: 400;\"> Zet kleuren om in grijstinten.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>sepia():<\/b><span style=\"font-weight: 400;\"> Past een vintage, bruinachtige tint toe.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>saturate():<\/b><span style=\"font-weight: 400;\"> Verhoogt of verlaagt de kleurverzadiging.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>contrast():<\/b><span style=\"font-weight: 400;\"> Past het contrast tussen lichte en donkere gebieden aan.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>brightness():<\/b><span style=\"font-weight: 400;\"> Maakt kleuren lichter of donkerder.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>blur():<\/b><span style=\"font-weight: 400;\"> Voegt een vervagingseffect toe.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>invert():<\/b><span style=\"font-weight: 400;\"> Keert kleuren om.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>hue-rotate():<\/b><span style=\"font-weight: 400;\"> Verschuift kleuren langs de kleurencirkel.<\/span><\/li>\n<\/ol>\n<h4><span style=\"font-weight: 400;\">Voorbeeld<\/span><\/h4>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-b4f81f3 elementor-widget elementor-widget-code-highlight\" data-id=\"b4f81f3\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-okaidia copy-to-clipboard word-wrap\">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-css line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-css\">\n\t\t\t\t\t<xmp>CSS\r\nimg {\r\n  filter: sepia(80%) blur(3px);\r\n}\r\nimg:hover {\r\n  filter: grayscale(0%); \/* Image becomes full color on hover *\/\r\n}\r\n<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-6189283 elementor-widget elementor-widget-text-editor\" data-id=\"6189283\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<h4><span style=\"font-weight: 400;\">Tips<\/span><\/h4>\n<ol>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Filters kunnen worden gecombineerd voor unieke effecten.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Gebruik overgangen om soepele filterveranderingen te cre\u00ebren bij hover of interactie.<\/span><\/li>\n<\/ol>\n<h3><b>Werken met kleurvariabelen<\/b><span style=\"font-weight: 400;\"> <\/span><\/h3>\n<p><span style=\"font-weight: 400;\">CSS-variabelen (ook wel custom properties genoemd) gooien helemaal om hoe je kleuren regelt en je website er consistent uit laat zien.<\/span><\/p>\n<h4><span style=\"font-weight: 400;\">Hoe ze werken<\/span><\/h4>\n<h5><span style=\"font-weight: 400;\">Declareren<\/span><\/h5>\n<p><span style=\"font-weight: 400;\">Je declareert variabelen met twee streepjes (<\/span><span style=\"font-weight: 400;\">&#8212;<\/span><span style=\"font-weight: 400;\">) en een zelfgekozen naam:<\/span><span style=\"font-weight: 400;\"><br \/><\/span><\/p>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-b1184b2 elementor-widget elementor-widget-code-highlight\" data-id=\"b1184b2\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-okaidia copy-to-clipboard word-wrap\">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-css line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-css\">\n\t\t\t\t\t<xmp> CSS\r\n:root {\r\n  --primary-color: blue; \r\n  --accent-color: orange;\r\n}\r\n<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-e58083c elementor-widget elementor-widget-text-editor\" data-id=\"e58083c\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<h5><span style=\"font-weight: 400;\">Gebruiken<\/span><\/h5>\n<p><span style=\"font-weight: 400;\">Je gebruikt de <a href=\"https:\/\/elementor.com\/blog\/nl\/variabelen-in-css-de-var-functie\/\" data-wpil-monitor-id=\"10376\">variabelen met de var() functie<\/a>:<\/span><\/p>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-3f94977 elementor-widget elementor-widget-code-highlight\" data-id=\"3f94977\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-okaidia copy-to-clipboard word-wrap\">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-css line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-css\">\n\t\t\t\t\t<xmp>CSS\r\nh1 { \r\n  color: var(--primary-color);\r\n}\r\nbutton {\r\n  background-color: var(--accent-color);\r\n}\r\n<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-53f8d8c elementor-widget elementor-widget-text-editor\" data-id=\"53f8d8c\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<h4><span style=\"font-weight: 400;\">Voordelen<\/span><\/h4>\n<ol>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Centrale controle:<\/b><span style=\"font-weight: 400;\"> Als je een kleurvariabele verandert, verandert &#8216;ie overal in je stylesheet.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Beter leesbaar:<\/b><span style=\"font-weight: 400;\"> Met duidelijke variabelenamen snap je je CSS veel makkelijker.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Thema&#8217;s maken:<\/b><span style=\"font-weight: 400;\"> Maak verschillende kleurenthema&#8217;s door variabelen dynamisch te wisselen.<\/span><\/li>\n<\/ol>\n<p><b>Preprocessors (Sass, Less):<\/b><span style=\"font-weight: 400;\">  Tools zoals Sass en Less geven CSS <a href=\"https:\/\/elementor.com\/blog\/nl\/nieuwe-hostingfuncties-geavanceerde-caching-staging-omgeving-en-paginaduplicatie-voor-een-verbeterde-workflow\/\" data-wpil-monitor-id=\"10391\">extra coole functies<\/a>, zoals kleurvariabelen, nesting en manieren om met kleuren te spelen. Ze zijn niet per se nodig, maar maken het werken met kleuren nog makkelijker.<\/span><\/p>\n<p><b>Let op:<\/b><span style=\"font-weight: 400;\">  CSS-variabelen werken prima in support. Check altijd even of oudere browsers het ook snappen.<\/span><\/p>\n<h2><span style=\"font-weight: 400;\">Kleuren kiezen voor je website<\/span><\/h2>\n<h3><span style=\"font-weight: 400;\">Branding  <\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Als je al een merk hebt, moeten je <a href=\"https:\/\/elementor.com\/blog\/introducing-new-ecommerce-design-capabilities\/\" data-wpil-monitor-id=\"10377\">belangrijkste websitekleuren matchen met je merkidentiteit<\/a>. Zo ziet alles er hetzelfde uit en herkennen mensen je merk beter. Denk hieraan:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Merkpersoonlijkheid:<\/b><span style=\"font-weight: 400;\">  Welke gevoelens of eigenschappen passen bij je merk? Kies kleuren die daarbij passen.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Logo:<\/b><span style=\"font-weight: 400;\"> Kun je de belangrijkste kleuren uit je logo halen en die als basis gebruiken?<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Bestaand merkspul:<\/b><span style=\"font-weight: 400;\"> Kijk naar je print- of digitale <a href=\"https:\/\/elementor.com\/blog\/nl\/wat-is-het-beste-moment-om-youtube-shorts-te-posten\/\" data-wpil-monitor-id=\"10378\">marketingmateriaal<\/a> om te zien welke kleuren steeds terugkomen.<\/span><\/li>\n<\/ul>\n<h3><span style=\"font-weight: 400;\">Doelgroep<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Het is super belangrijk dat je snapt wat je doelgroep mooi vindt en verwacht als je kleuren kiest. Let op deze dingen:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Demografie:<\/b><span style=\"font-weight: 400;\">  Leeftijd en geslacht kunnen invloed hebben op hoe mensen kleuren zien. Jongeren vinden bijvoorbeeld vaak felle, opvallende kleuren leuker, terwijl ouderen meer van rustige tinten houden.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Culturele achtergrond:<\/b><span style=\"font-weight: 400;\">  Kleuren betekenen in verschillende culturen iets anders. Zoek even uit hoe dat zit in de <a href=\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2017\/10\/marketing.png\" data-wpil-monitor-id=\"10379\">markten<\/a> waar je op mikt.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Branche en niche:<\/b><span style=\"font-weight: 400;\">  In bepaalde branches worden vaak dezelfde kleuren gebruikt (bijvoorbeeld blauw en groen in de zorg). Check wat je concurrenten doen en beslis of je hetzelfde wil of juist anders.<\/span><\/li>\n<\/ul>\n<p><b>Tip:<\/b><span style=\"font-weight: 400;\">  Het is belangrijk om aan je doelgroep te denken, maar laat het niet helemaal bepalen hoe je merk eruit ziet. Probeer een goede mix te vinden die past bij jou \u00e9n je <a href=\"https:\/\/elementor.com\/blog\/nl\/wat-is-een-doelmarkt\/\" data-wpil-monitor-id=\"10380\">doelgroep<\/a>.<\/span><\/p>\n<h3><span style=\"font-weight: 400;\">Webdesign-trends<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Als je weet wat er hip is in <a href=\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2019\/12\/web-design-trends.png\" data-wpil-monitor-id=\"10381\">webdesign, kun je daar inspiratie uit halen<\/a> voor nieuwe kleurencombo&#8217;s en je site er modern uit laten zien. Maar zorg wel dat je een balans vindt tussen trendy en tijdloos design:<\/span><\/p>\n<ol>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Populaire kleurenschema&#8217;s:<\/b><span style=\"font-weight: 400;\"> Kijk eens rond op Dribbble of Behance om te zien welke kleurencombo&#8217;s nu hip zijn.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Opvallende monochromen:<\/b><span style=\"font-weight: 400;\"> Met \u00e9\u00e9n kleur in verschillende tinten en sterktes kun je echt knallen.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Retro paletten:<\/b><span style=\"font-weight: 400;\">  Nostalgie is in! Pastels en gedempte kleuren die doen denken aan bepaalde decennia kunnen echt indruk maken.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Toegankelijkheids-trends:<\/b><span style=\"font-weight: 400;\"> Trends die focussen op hoog contrast en kleuren die ook werken voor kleurenblinden zijn win-win voor design en inclusiviteit.<\/span><\/li>\n<\/ol>\n<p><span style=\"font-weight: 400;\">Ga niet zomaar achter elke trend aan. Kies kleuren die passen bij waar je merk naartoe wil op de lange termijn. Je kunt trendy elementen gebruiken als accent of in delen van je site die je makkelijk kunt veranderen.<\/span><\/p>\n<h2><span style=\"font-weight: 400;\">Conclusie  <\/span><\/h2>\n<p><span style=\"font-weight: 400;\">Kleuren zijn super belangrijk in <a href=\"https:\/\/elementor.com\/blog\/nl\/hoe-je-een-webdesign-workflow-maakt-een-complete-gids\/\" data-wpil-monitor-id=\"10382\">webdesign<\/a>. Ze bepalen hoe mensen je site <a href=\"https:\/\/elementor.com\/blog\/announcing-scroll-snap-and-progress-tracker\/\" data-wpil-monitor-id=\"10383\">ervaren<\/a>, laten zien wie je bent als merk, en be\u00efnvloeden hoe mensen over je website denken. Als je de kneepjes van het vak kent, zowel technisch als creatief, kun je <a href=\"https:\/\/elementor.com\/blog\/nl\/12-portfolio-voorbeelden-van-opvallend-website-ontwerp\/\" data-wpil-monitor-id=\"10384\">waanzinnig mooie websites maken<\/a> die echt iets losmaken bij je publiek.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Belangrijkste punten:<\/span><\/p>\n<ol>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Met CSS kun je van alles doen met kleuren, van <a href=\"https:\/\/elementor.com\/blog\/nl\/hoe-chatgpt-te-gebruiken-van-basisvragen-tot-geavanceerde-technieken\/\" data-wpil-monitor-id=\"10392\">simpele kleurwoorden tot coole technieken<\/a> zoals gradi\u00ebnten en filters.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Kleurentheorie en -psychologie helpen je om bewuste designkeuzes te maken.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Denk aan je merk, je <a href=\"https:\/\/elementor.com\/blog\/nl\/hoe-je-een-doelgroep-voor-je-bedrijf-kunt-vinden\/\" data-wpil-monitor-id=\"10385\">doelgroep<\/a> en wat er nu hip is als je je kleurenpalet samenstelt.<\/span><\/li>\n<\/ol>\n<p><span style=\"font-weight: 400;\">Wees niet bang om te experimenteren, nieuwe combinaties uit te proberen en kleuren te vinden die je creativiteit aanwakkeren.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Een <a href=\"https:\/\/elementor.com\/blog\/nl\/9-beste-websitebouwers-voor-online-winkels-in-year\/\" data-wpil-monitor-id=\"10386\">websitebouwer<\/a> zoals Elementor maakt het supermakkelijk om je toffe kleurenschema&#8217;s toe te passen. De gebruiksvriendelijke interface, opties voor kleurenaanpassing en features gericht op prestaties maken het <a href=\"https:\/\/elementor.com\/blog\/nl\/wat-is-een-wireframe-in-webdesignhoe-te-maken-processen-gereedschappen\/\" data-wpil-monitor-id=\"10387\">webdesignproces<\/a> een eitje, zodat jij je kunt focussen op het uiten van je visie.<\/span><\/p>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Kleuren zijn de levensader van webdesign. Ze bepalen de sfeer, vestigen de identiteit van een merk, leiden het oog van de gebruiker en cre\u00ebren een blijvende emotionele impact. CSS (Cascading Style Sheets) is de taal die ons in staat stelt deze levendigheid naar het web te brengen. Het geeft ons precieze controle over hoe kleuren worden toegepast op tekst, achtergronden, randen en elk ander visueel element van een webpagina.<\/p>\n","protected":false},"author":2024234,"featured_media":113326,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[515],"tags":[],"marketing_persona":[],"marketing_intent":[],"class_list":["post-126791","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-bronnen"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.7 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>CSS &amp; HTML kleuren: Eigenschappen, codes, trefwoorden en namen<\/title>\n<meta name=\"description\" content=\"Kleuren zijn de levensader van webdesign. Ze bepalen de sfeer, vestigen de identiteit van een merk, leiden het oog van de gebruiker en cre\u00ebren een blijvende emotionele impact. CSS (Cascading Style Sheets) is de taal die ons in staat stelt deze levendigheid naar het web te brengen. Het geeft ons precieze controle over hoe kleuren worden toegepast op tekst, achtergronden, randen en elk ander visueel element van een webpagina.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/elementor.com\/blog\/nl\/css-html-kleuren-eigenschappen-codes-trefwoorden-en-namen\/\" \/>\n<meta property=\"og:locale\" content=\"nl_NL\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"CSS &amp; HTML kleuren: Eigenschappen, codes, trefwoorden en namen\" \/>\n<meta property=\"og:description\" content=\"Kleuren zijn de levensader van webdesign. Ze bepalen de sfeer, vestigen de identiteit van een merk, leiden het oog van de gebruiker en cre\u00ebren een blijvende emotionele impact. CSS (Cascading Style Sheets) is de taal die ons in staat stelt deze levendigheid naar het web te brengen. Het geeft ons precieze controle over hoe kleuren worden toegepast op tekst, achtergronden, randen en elk ander visueel element van een webpagina.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/elementor.com\/blog\/nl\/css-html-kleuren-eigenschappen-codes-trefwoorden-en-namen\/\" \/>\n<meta property=\"og:site_name\" content=\"Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/elemntor\/\" \/>\n<meta property=\"article:published_time\" content=\"2025-07-01T05:10:21+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-11-15T22:25:53+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2020\/12\/14.12.2020_WEB-DESIGNER-VS-WEB-DEVELOPER_BLOG-01-2.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"631\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Itamar Haim\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@elemntor\" \/>\n<meta name=\"twitter:site\" content=\"@elemntor\" \/>\n<meta name=\"twitter:label1\" content=\"Geschreven door\" \/>\n\t<meta name=\"twitter:data1\" content=\"Itamar Haim\" \/>\n\t<meta name=\"twitter:label2\" content=\"Geschatte leestijd\" \/>\n\t<meta name=\"twitter:data2\" content=\"15 minuten\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/elementor.com\/blog\/nl\/css-html-kleuren-eigenschappen-codes-trefwoorden-en-namen\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/elementor.com\/blog\/nl\/css-html-kleuren-eigenschappen-codes-trefwoorden-en-namen\/\"},\"author\":{\"name\":\"Itamar Haim\",\"@id\":\"https:\/\/elementor.com\/blog\/nl\/#\/schema\/person\/5d24783541c454816685653dfed73377\"},\"headline\":\"CSS &amp; HTML kleuren: Eigenschappen, codes, trefwoorden en namen\",\"datePublished\":\"2025-07-01T05:10:21+00:00\",\"dateModified\":\"2025-11-15T22:25:53+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/elementor.com\/blog\/nl\/css-html-kleuren-eigenschappen-codes-trefwoorden-en-namen\/\"},\"wordCount\":2884,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/elementor.com\/blog\/nl\/#organization\"},\"image\":{\"@id\":\"https:\/\/elementor.com\/blog\/nl\/css-html-kleuren-eigenschappen-codes-trefwoorden-en-namen\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2020\/12\/14.12.2020_WEB-DESIGNER-VS-WEB-DEVELOPER_BLOG-01-2.png\",\"articleSection\":[\"Bronnen\"],\"inLanguage\":\"nl-NL\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/elementor.com\/blog\/nl\/css-html-kleuren-eigenschappen-codes-trefwoorden-en-namen\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/elementor.com\/blog\/nl\/css-html-kleuren-eigenschappen-codes-trefwoorden-en-namen\/\",\"url\":\"https:\/\/elementor.com\/blog\/nl\/css-html-kleuren-eigenschappen-codes-trefwoorden-en-namen\/\",\"name\":\"CSS &amp; HTML kleuren: Eigenschappen, codes, trefwoorden en namen\",\"isPartOf\":{\"@id\":\"https:\/\/elementor.com\/blog\/nl\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/elementor.com\/blog\/nl\/css-html-kleuren-eigenschappen-codes-trefwoorden-en-namen\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/elementor.com\/blog\/nl\/css-html-kleuren-eigenschappen-codes-trefwoorden-en-namen\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2020\/12\/14.12.2020_WEB-DESIGNER-VS-WEB-DEVELOPER_BLOG-01-2.png\",\"datePublished\":\"2025-07-01T05:10:21+00:00\",\"dateModified\":\"2025-11-15T22:25:53+00:00\",\"description\":\"Kleuren zijn de levensader van webdesign. Ze bepalen de sfeer, vestigen de identiteit van een merk, leiden het oog van de gebruiker en cre\u00ebren een blijvende emotionele impact. CSS (Cascading Style Sheets) is de taal die ons in staat stelt deze levendigheid naar het web te brengen. Het geeft ons precieze controle over hoe kleuren worden toegepast op tekst, achtergronden, randen en elk ander visueel element van een webpagina.\",\"breadcrumb\":{\"@id\":\"https:\/\/elementor.com\/blog\/nl\/css-html-kleuren-eigenschappen-codes-trefwoorden-en-namen\/#breadcrumb\"},\"inLanguage\":\"nl-NL\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/elementor.com\/blog\/nl\/css-html-kleuren-eigenschappen-codes-trefwoorden-en-namen\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"nl-NL\",\"@id\":\"https:\/\/elementor.com\/blog\/nl\/css-html-kleuren-eigenschappen-codes-trefwoorden-en-namen\/#primaryimage\",\"url\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2020\/12\/14.12.2020_WEB-DESIGNER-VS-WEB-DEVELOPER_BLOG-01-2.png\",\"contentUrl\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2020\/12\/14.12.2020_WEB-DESIGNER-VS-WEB-DEVELOPER_BLOG-01-2.png\",\"width\":1200,\"height\":631},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/elementor.com\/blog\/nl\/css-html-kleuren-eigenschappen-codes-trefwoorden-en-namen\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Blog\",\"item\":\"https:\/\/elementor.com\/blog\/nl\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Bronnen\",\"item\":\"https:\/\/elementor.com\/blog\/nl\/category\/bronnen\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"CSS &amp; HTML kleuren: Eigenschappen, codes, trefwoorden en namen\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/elementor.com\/blog\/nl\/#website\",\"url\":\"https:\/\/elementor.com\/blog\/nl\/\",\"name\":\"Elementor\",\"description\":\"Website Builder for WordPress\",\"publisher\":{\"@id\":\"https:\/\/elementor.com\/blog\/nl\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/elementor.com\/blog\/nl\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"nl-NL\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/elementor.com\/blog\/nl\/#organization\",\"name\":\"Elementor\",\"url\":\"https:\/\/elementor.com\/blog\/nl\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"nl-NL\",\"@id\":\"https:\/\/elementor.com\/blog\/nl\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2025\/06\/images.png\",\"contentUrl\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2025\/06\/images.png\",\"width\":225,\"height\":225,\"caption\":\"Elementor\"},\"image\":{\"@id\":\"https:\/\/elementor.com\/blog\/nl\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/elemntor\/\",\"https:\/\/x.com\/elemntor\",\"https:\/\/www.instagram.com\/elementor\/\",\"https:\/\/www.youtube.com\/channel\/UCt9kG_EDX8zwGSC1-ycJJVA?sub_confirmation=1\",\"https:\/\/en.wikipedia.org\/wiki\/Elementor\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/elementor.com\/blog\/nl\/#\/schema\/person\/5d24783541c454816685653dfed73377\",\"name\":\"Itamar Haim\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"nl-NL\",\"@id\":\"https:\/\/elementor.com\/blog\/nl\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/830174068538633c83fd732c583ea1fe9d4c813314075640bf78d5a621982848?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/830174068538633c83fd732c583ea1fe9d4c813314075640bf78d5a621982848?s=96&d=mm&r=g\",\"caption\":\"Itamar Haim\"},\"description\":\"Itamar Haim, SEO Team Lead at Elementor, is a digital strategist merging SEO &amp; AEO \/ GEO, and web development. He leverages deep WordPress expertise to drive global organic growth, empowering businesses to navigate the AI era and ensuring top-tier search performance for millions of websites.\",\"sameAs\":[\"https:\/\/elementor.com\/blog\/author\/itamarha\/\",\"https:\/\/www.linkedin.com\/in\/itamar-haim-8149b85b\/\"],\"url\":\"https:\/\/elementor.com\/blog\/nl\/author\/itamarha\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"CSS &amp; HTML kleuren: Eigenschappen, codes, trefwoorden en namen","description":"Kleuren zijn de levensader van webdesign. Ze bepalen de sfeer, vestigen de identiteit van een merk, leiden het oog van de gebruiker en cre\u00ebren een blijvende emotionele impact. CSS (Cascading Style Sheets) is de taal die ons in staat stelt deze levendigheid naar het web te brengen. Het geeft ons precieze controle over hoe kleuren worden toegepast op tekst, achtergronden, randen en elk ander visueel element van een webpagina.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/elementor.com\/blog\/nl\/css-html-kleuren-eigenschappen-codes-trefwoorden-en-namen\/","og_locale":"nl_NL","og_type":"article","og_title":"CSS &amp; HTML kleuren: Eigenschappen, codes, trefwoorden en namen","og_description":"Kleuren zijn de levensader van webdesign. Ze bepalen de sfeer, vestigen de identiteit van een merk, leiden het oog van de gebruiker en cre\u00ebren een blijvende emotionele impact. CSS (Cascading Style Sheets) is de taal die ons in staat stelt deze levendigheid naar het web te brengen. Het geeft ons precieze controle over hoe kleuren worden toegepast op tekst, achtergronden, randen en elk ander visueel element van een webpagina.","og_url":"https:\/\/elementor.com\/blog\/nl\/css-html-kleuren-eigenschappen-codes-trefwoorden-en-namen\/","og_site_name":"Blog","article_publisher":"https:\/\/www.facebook.com\/elemntor\/","article_published_time":"2025-07-01T05:10:21+00:00","article_modified_time":"2025-11-15T22:25:53+00:00","og_image":[{"width":1200,"height":631,"url":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2020\/12\/14.12.2020_WEB-DESIGNER-VS-WEB-DEVELOPER_BLOG-01-2.png","type":"image\/png"}],"author":"Itamar Haim","twitter_card":"summary_large_image","twitter_creator":"@elemntor","twitter_site":"@elemntor","twitter_misc":{"Geschreven door":"Itamar Haim","Geschatte leestijd":"15 minuten"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/elementor.com\/blog\/nl\/css-html-kleuren-eigenschappen-codes-trefwoorden-en-namen\/#article","isPartOf":{"@id":"https:\/\/elementor.com\/blog\/nl\/css-html-kleuren-eigenschappen-codes-trefwoorden-en-namen\/"},"author":{"name":"Itamar Haim","@id":"https:\/\/elementor.com\/blog\/nl\/#\/schema\/person\/5d24783541c454816685653dfed73377"},"headline":"CSS &amp; HTML kleuren: Eigenschappen, codes, trefwoorden en namen","datePublished":"2025-07-01T05:10:21+00:00","dateModified":"2025-11-15T22:25:53+00:00","mainEntityOfPage":{"@id":"https:\/\/elementor.com\/blog\/nl\/css-html-kleuren-eigenschappen-codes-trefwoorden-en-namen\/"},"wordCount":2884,"commentCount":0,"publisher":{"@id":"https:\/\/elementor.com\/blog\/nl\/#organization"},"image":{"@id":"https:\/\/elementor.com\/blog\/nl\/css-html-kleuren-eigenschappen-codes-trefwoorden-en-namen\/#primaryimage"},"thumbnailUrl":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2020\/12\/14.12.2020_WEB-DESIGNER-VS-WEB-DEVELOPER_BLOG-01-2.png","articleSection":["Bronnen"],"inLanguage":"nl-NL","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/elementor.com\/blog\/nl\/css-html-kleuren-eigenschappen-codes-trefwoorden-en-namen\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/elementor.com\/blog\/nl\/css-html-kleuren-eigenschappen-codes-trefwoorden-en-namen\/","url":"https:\/\/elementor.com\/blog\/nl\/css-html-kleuren-eigenschappen-codes-trefwoorden-en-namen\/","name":"CSS &amp; HTML kleuren: Eigenschappen, codes, trefwoorden en namen","isPartOf":{"@id":"https:\/\/elementor.com\/blog\/nl\/#website"},"primaryImageOfPage":{"@id":"https:\/\/elementor.com\/blog\/nl\/css-html-kleuren-eigenschappen-codes-trefwoorden-en-namen\/#primaryimage"},"image":{"@id":"https:\/\/elementor.com\/blog\/nl\/css-html-kleuren-eigenschappen-codes-trefwoorden-en-namen\/#primaryimage"},"thumbnailUrl":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2020\/12\/14.12.2020_WEB-DESIGNER-VS-WEB-DEVELOPER_BLOG-01-2.png","datePublished":"2025-07-01T05:10:21+00:00","dateModified":"2025-11-15T22:25:53+00:00","description":"Kleuren zijn de levensader van webdesign. Ze bepalen de sfeer, vestigen de identiteit van een merk, leiden het oog van de gebruiker en cre\u00ebren een blijvende emotionele impact. CSS (Cascading Style Sheets) is de taal die ons in staat stelt deze levendigheid naar het web te brengen. Het geeft ons precieze controle over hoe kleuren worden toegepast op tekst, achtergronden, randen en elk ander visueel element van een webpagina.","breadcrumb":{"@id":"https:\/\/elementor.com\/blog\/nl\/css-html-kleuren-eigenschappen-codes-trefwoorden-en-namen\/#breadcrumb"},"inLanguage":"nl-NL","potentialAction":[{"@type":"ReadAction","target":["https:\/\/elementor.com\/blog\/nl\/css-html-kleuren-eigenschappen-codes-trefwoorden-en-namen\/"]}]},{"@type":"ImageObject","inLanguage":"nl-NL","@id":"https:\/\/elementor.com\/blog\/nl\/css-html-kleuren-eigenschappen-codes-trefwoorden-en-namen\/#primaryimage","url":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2020\/12\/14.12.2020_WEB-DESIGNER-VS-WEB-DEVELOPER_BLOG-01-2.png","contentUrl":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2020\/12\/14.12.2020_WEB-DESIGNER-VS-WEB-DEVELOPER_BLOG-01-2.png","width":1200,"height":631},{"@type":"BreadcrumbList","@id":"https:\/\/elementor.com\/blog\/nl\/css-html-kleuren-eigenschappen-codes-trefwoorden-en-namen\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Blog","item":"https:\/\/elementor.com\/blog\/nl\/"},{"@type":"ListItem","position":2,"name":"Bronnen","item":"https:\/\/elementor.com\/blog\/nl\/category\/bronnen\/"},{"@type":"ListItem","position":3,"name":"CSS &amp; HTML kleuren: Eigenschappen, codes, trefwoorden en namen"}]},{"@type":"WebSite","@id":"https:\/\/elementor.com\/blog\/nl\/#website","url":"https:\/\/elementor.com\/blog\/nl\/","name":"Elementor","description":"Website Builder for WordPress","publisher":{"@id":"https:\/\/elementor.com\/blog\/nl\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/elementor.com\/blog\/nl\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"nl-NL"},{"@type":"Organization","@id":"https:\/\/elementor.com\/blog\/nl\/#organization","name":"Elementor","url":"https:\/\/elementor.com\/blog\/nl\/","logo":{"@type":"ImageObject","inLanguage":"nl-NL","@id":"https:\/\/elementor.com\/blog\/nl\/#\/schema\/logo\/image\/","url":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2025\/06\/images.png","contentUrl":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2025\/06\/images.png","width":225,"height":225,"caption":"Elementor"},"image":{"@id":"https:\/\/elementor.com\/blog\/nl\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/elemntor\/","https:\/\/x.com\/elemntor","https:\/\/www.instagram.com\/elementor\/","https:\/\/www.youtube.com\/channel\/UCt9kG_EDX8zwGSC1-ycJJVA?sub_confirmation=1","https:\/\/en.wikipedia.org\/wiki\/Elementor"]},{"@type":"Person","@id":"https:\/\/elementor.com\/blog\/nl\/#\/schema\/person\/5d24783541c454816685653dfed73377","name":"Itamar Haim","image":{"@type":"ImageObject","inLanguage":"nl-NL","@id":"https:\/\/elementor.com\/blog\/nl\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/830174068538633c83fd732c583ea1fe9d4c813314075640bf78d5a621982848?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/830174068538633c83fd732c583ea1fe9d4c813314075640bf78d5a621982848?s=96&d=mm&r=g","caption":"Itamar Haim"},"description":"Itamar Haim, SEO Team Lead at Elementor, is a digital strategist merging SEO &amp; AEO \/ GEO, and web development. He leverages deep WordPress expertise to drive global organic growth, empowering businesses to navigate the AI era and ensuring top-tier search performance for millions of websites.","sameAs":["https:\/\/elementor.com\/blog\/author\/itamarha\/","https:\/\/www.linkedin.com\/in\/itamar-haim-8149b85b\/"],"url":"https:\/\/elementor.com\/blog\/nl\/author\/itamarha\/"}]}},"_links":{"self":[{"href":"https:\/\/elementor.com\/blog\/nl\/wp-json\/wp\/v2\/posts\/126791","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/elementor.com\/blog\/nl\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/elementor.com\/blog\/nl\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/elementor.com\/blog\/nl\/wp-json\/wp\/v2\/users\/2024234"}],"replies":[{"embeddable":true,"href":"https:\/\/elementor.com\/blog\/nl\/wp-json\/wp\/v2\/comments?post=126791"}],"version-history":[{"count":2,"href":"https:\/\/elementor.com\/blog\/nl\/wp-json\/wp\/v2\/posts\/126791\/revisions"}],"predecessor-version":[{"id":143262,"href":"https:\/\/elementor.com\/blog\/nl\/wp-json\/wp\/v2\/posts\/126791\/revisions\/143262"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/elementor.com\/blog\/nl\/wp-json\/wp\/v2\/media\/113326"}],"wp:attachment":[{"href":"https:\/\/elementor.com\/blog\/nl\/wp-json\/wp\/v2\/media?parent=126791"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/elementor.com\/blog\/nl\/wp-json\/wp\/v2\/categories?post=126791"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/elementor.com\/blog\/nl\/wp-json\/wp\/v2\/tags?post=126791"},{"taxonomy":"marketing_persona","embeddable":true,"href":"https:\/\/elementor.com\/blog\/nl\/wp-json\/wp\/v2\/marketing_persona?post=126791"},{"taxonomy":"marketing_intent","embeddable":true,"href":"https:\/\/elementor.com\/blog\/nl\/wp-json\/wp\/v2\/marketing_intent?post=126791"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}