{"id":126821,"date":"2025-03-02T10:01:16","date_gmt":"2025-03-02T08:01:16","guid":{"rendered":"https:\/\/elementor.com\/blog\/hoe-je-tekstkleur-verandert-in-css-html\/"},"modified":"2026-01-06T15:02:03","modified_gmt":"2026-01-06T13:02:03","slug":"hoe-je-tekstkleur-verandert-in-css-html","status":"publish","type":"post","link":"https:\/\/elementor.com\/blog\/nl\/hoe-je-tekstkleur-verandert-in-css-html\/","title":{"rendered":"Hoe je tekstkleur verandert in CSS &amp; HTML"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"126821\" class=\"elementor elementor-126821 elementor-94582\" data-elementor-post-type=\"post\">\n\t\t\t\t<div class=\"elementor-element elementor-element-639d699c e-flex e-con-boxed e-con e-parent\" data-id=\"639d699c\" 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-ef2fdfa elementor-widget elementor-widget-text-editor\" data-id=\"ef2fdfa\" 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>Zo ziet het eruit in basis CSS-code:<\/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-262f1a6 elementor-widget elementor-widget-code-highlight\" data-id=\"262f1a6\" 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-default 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 {  \/* Targets all paragraph elements *\/\r\n  color: red; \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-71a4d49f elementor-widget elementor-widget-text-editor\" data-id=\"71a4d49f\" 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;\">In dit voorbeeld zou alle alineatekst in je HTML rood worden. Natuurlijk is rood nog maar het begin! Er zijn talloze manieren om kleurwaarden 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 (2026)\" data-wpil-keyword-link=\"linked\"  data-wpil-monitor-id=\"32936\">CSS<\/a> uit te drukken, waardoor je een enorm palet hebt om mee te experimenteren.<\/span><\/p>\n<h2><span style=\"font-weight: 400;\">Kleurwaarden: Je tekstuele regenboog <\/span><\/h2>\n<h3><span style=\"font-weight: 400;\">Kleurnamen <\/span><\/h3>\n<p><span style=\"font-weight: 400;\">CSS biedt een verzameling basiskleurnamen voor de meest voorkomende kleuren. Denk aan \u201crood,\u201d \u201cblauw,\u201d \u201cgeel,\u201d \u201cgroen,\u201d enzovoort. Deze zijn makkelijk te onthouden, wat ze een uitstekend startpunt maakt voor beginners. Hier is een voorbeeld:<\/span><\/p>\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-5e4b17d elementor-widget elementor-widget-code-highlight\" data-id=\"5e4b17d\" 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-default 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: 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-6e5c9e5 elementor-widget elementor-widget-text-editor\" data-id=\"6e5c9e5\" 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;\">Het grootste voordeel van kleurnamen is hun eenvoud. Je bent echter beperkt tot een relatief kleine set kleuren, die niet altijd precies bij je ontwerpvisie passen.<\/span><\/p>\n<h2><span style=\"font-weight: 400;\">Hexadecimale kleurcodes <\/span><\/h2>\n<p><span style=\"font-weight: 400;\">Hexadecimale kleurcodes, beginnend met een \u201c#\u201d, bieden een enorm uitgebreid kleurenpalet. Ze bestaan uit zes tekens die de Rood-, Groen- en Blauw-componenten (RGB) van een kleur vertegenwoordigen. Bijvoorbeeld, #FF0000 is puur rood, terwijl #008000 een diep groen is.<\/span><\/p>\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-ab9a954 elementor-widget elementor-widget-code-highlight\" data-id=\"ab9a954\" 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-default 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: #F26522; \/* A warm orange tone *\/\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-7d94393 elementor-widget elementor-widget-text-editor\" data-id=\"7d94393\" 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;\">Hex-codes geven je precisie en miljoenen kleurmogelijkheden. Veel ontwerptools en <a href=\"https:\/\/elementor.com\/blog\/nl\/7-beste-websitebouwers-zonder-code-in-year\/\" data-wpil-monitor-id=\"10312\">websites bieden kleurkiezers die hex-codes outputten<\/a>, waardoor het makkelijk is om de exacte tint te vinden die je wilt. Het enige kleine nadeel is dat ze op het eerste gezicht minder intu\u00eftief te lezen zijn dan kleurnamen.<\/span><\/p>\n<h2><span style=\"font-weight: 400;\">RGB- en RGBA-kleuren<\/span><\/h2>\n<p><span style=\"font-weight: 400;\">RGB biedt nog een manier om kleuren te defini\u00ebren op basis van hun Rood-, Groen- en Blauw-componenten. Binnen de rgb()-functie geef je de intensiteit van elke component aan op een schaal van 0 tot 255. Bijvoorbeeld, rgb(255, 0, 0) produceert hetzelfde pure rood als #FF0000.<\/span><\/p>\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-9234c6b elementor-widget elementor-widget-code-highlight\" data-id=\"9234c6b\" 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-default 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\nh2 {\r\n  color: rgb(128, 0, 128); \/* A rich purple *\/\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-17e2f36 elementor-widget elementor-widget-text-editor\" data-id=\"17e2f36\" 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;\">De echte kracht van RGB komt met de toevoeging van een alfakanaal, wat je RGBA geeft. Deze \u201cA\u201d staat voor \u201calpha\u201d en regelt de transparantie. RGBA-waarden worden uitgedrukt als rgba(R, G, B, A), waarbij de alfawaarde varieert van 0 (volledig transparant) tot 1 (volledig ondoorzichtig). Hier zie je hoe je een semi-transparante tekstoverlay maakt:<\/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-c6bdc5c elementor-widget elementor-widget-code-highlight\" data-id=\"c6bdc5c\" 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-default 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.overlay-text {\r\n   color: rgba(0, 0, 0, 0.6); \/* Black text with 60% opacity *\/\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-90baaa4 elementor-widget elementor-widget-text-editor\" data-id=\"90baaa4\" 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;\">RGBA is ideaal voor het lagen van tekst over <a href=\"https:\/\/elementor.com\/blog\/nl\/css-background-image-eigenschap-hoe-voeg-je-een-css-achtergrondafbeelding-toe\/\" data-wpil-monitor-id=\"10313\">afbeeldingen of achtergronden<\/a>, waardoor je precieze controle hebt over hoeveel de onderliggende elementen doorschijnen.<\/span><\/p>\n<h2><span style=\"font-weight: 400;\">HSL- en HSLA-kleuren<\/span><\/h2>\n<p><span style=\"font-weight: 400;\">HSL (Tint, Verzadiging, Helderheid) is een kleurmodel dat beter aansluit bij hoe mensen kleur waarnemen. Het wordt uitgedrukt als hsl(H, S, L):<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Tint<\/b><span style=\"font-weight: 400;\"> is het type kleur op een 360-graden kleurenwiel (0 is rood, 120 is groen, 240 is blauw, etc.).<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Verzadiging:<\/b><span style=\"font-weight: 400;\"> De intensiteit van de kleur (0% is grijs, 100% is volle kleur)<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Helderheid:<\/b><span style=\"font-weight: 400;\"> Hoe licht of donker de kleur is (0% is zwart, 100% is wit)<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">HSLA voegt simpelweg een alfakanaal toe voor transparantie, net als RGBA.<\/span><\/p>\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-81e8390 elementor-widget elementor-widget-code-highlight\" data-id=\"81e8390\" 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-default 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: hsl(30, 100%, 50%); \/* A vibrant orange *\/\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-2def1d6 elementor-widget elementor-widget-text-editor\" data-id=\"2def1d6\" 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;\">HSL kan soms intu\u00eftiever zijn voor beginners om te begrijpen. Het stelt je in staat om te denken in termen van kleurtypes en levendigheid in plaats van het mengen van individuele rood-, groen- en blauwcomponenten.<\/span><\/p>\n<h2><span style=\"font-weight: 400;\">Methoden om tekstkleur te veranderen<\/span><\/h2>\n<p><span style=\"font-weight: 400;\">Er zijn drie primaire methoden om <a href=\"https:\/\/elementor.com\/blog\/nl\/hoe-centreer-je-tekst-in-css-tekstuitlijning-in-css-html\/\" data-wpil-monitor-id=\"10314\">tekstkleur te veranderen met CSS<\/a>. Elke techniek biedt verschillende niveaus van controle en specificiteit, waardoor je precies de elementen kunt targeten die je wilt stijlen.<\/span><\/p>\n<h3><span style=\"font-weight: 400;\">Inline stijlen <\/span><\/h3>\n<p><span style=\"font-weight: 400;\"><a href=\"https:\/\/elementor.com\/blog\/nl\/hoe-voeg-je-css-toe-aan-html-inline-interne-externe-css\/\" data-wpil-monitor-id=\"10315\">Inline stijlen worden direct toegepast binnen een HTML<\/a>-element&#8217;s openingstag met het style-attribuut. Laten we de kleur van een specifieke alinea veranderen:<\/span><\/p>\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-6d224de elementor-widget elementor-widget-code-highlight\" data-id=\"6d224de\" 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-default copy-to-clipboard word-wrap\">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-markup line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-markup\">\n\t\t\t\t\t<xmp>HTML\r\n<p style=\"color: blue;\">This paragraph will have blue text.<\/p>\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-77333ba elementor-widget elementor-widget-text-editor\" data-id=\"77333ba\" 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;\">Inline stijlen zijn handig voor snelle, eenmalige wijzigingen aan individuele elementen. Ze hebben echter enkele nadelen:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Rommelig:<\/b><span style=\"font-weight: 400;\"> Ze maken je HTML moeilijker te lezen en onderhouden.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Specificiteit:<\/b><span style=\"font-weight: 400;\"> Inline stijlen zullen andere, meer algemene CSS-regels overschrijven, wat soms kan leiden tot onverwachte stijlproblemen.<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">Daarom is het meestal het beste om inline stijlen spaarzaam te gebruiken en alleen als het echt nodig is.<\/span><\/p>\n<h3><span style=\"font-weight: 400;\">Interne Stylesheets  <\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Interne stylesheets gebruiken &lt;style&gt; tags in het &lt;head&gt; gedeelte van je HTML-document. Hiermee kun je stijlen defini\u00ebren voor specifieke HTML-elementen:<\/span><\/p>\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-484c07c elementor-widget elementor-widget-code-highlight\" data-id=\"484c07c\" 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-default 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<head>\r\n  <style>\r\n    h1 { \r\n      color: #009933; \/* A dark green *\/\r\n    }\r\n\r\n    p {\r\n      color: #333333; \/* A dark gray *\/\r\n    }\r\n  <\/style>\r\n<\/head>\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-9262856 elementor-widget elementor-widget-text-editor\" data-id=\"9262856\" 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;\">Interne stylesheets zijn top voor het stylen van een hele webpagina. Ze hebben deze voordelen:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Centralisatie:<\/b><span style=\"font-weight: 400;\"> Houdt je stijlregels op \u00e9\u00e9n plek binnen de HTML.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Specificiteit:<\/b><span style=\"font-weight: 400;\"> Interne stijlen hebben voorrang op de meeste standaard browserstijlen, maar zijn minder specifiek dan inline stijlen.<\/span><\/li>\n<\/ul>\n<h3><span style=\"font-weight: 400;\">Externe Stylesheets  <\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Externe stylesheets zijn de aanbevolen aanpak voor het beheren van de CSS van je website. Je maakt een apart .css-bestand en <a href=\"https:\/\/elementor.com\/blog\/nl\/html-koppelingen-hyperlinks-syntaxis-code-attributen-en-voorbeelden\/\" data-wpil-monitor-id=\"10316\">linkt het aan je HTML<\/a>-document met de &lt;link&gt; tag in het &lt;head&gt; gedeelte:<\/span><\/p>\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-16b3bed elementor-widget elementor-widget-code-highlight\" data-id=\"16b3bed\" 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-default copy-to-clipboard word-wrap\">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-markup line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-markup\">\n\t\t\t\t\t<xmp>HTML\r\n<head>\r\n  <link rel=\"stylesheet\" href=\"styles.css\"> \r\n<\/head>\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-deb161a elementor-widget elementor-widget-text-editor\" data-id=\"deb161a\" 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>styles.css:<\/b><\/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-fe5a131 elementor-widget elementor-widget-code-highlight\" data-id=\"fe5a131\" 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-default copy-to-clipboard \">\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  color: #222222; \/* Sets default text color for the page *\/\r\n}\r\n\r\nh1 {\r\n  color: #CD5C5C; \/* Indian red for headings *\/\r\n}  \r\n\r\na { \r\n  color: #0000EE; \/* Standard blue for links *\/\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-52364e2 elementor-widget elementor-widget-text-editor\" data-id=\"52364e2\" 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;\">Externe stylesheets bieden verschillende belangrijke voordelen:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Onderhoudbaarheid:<\/b><span style=\"font-weight: 400;\"> Door CSS te scheiden van <a href=\"https:\/\/elementor.com\/blog\/nl\/spatie-toevoegen-in-html-codes-en-tips-ultieme-gids\/\" data-wpil-monitor-id=\"10317\">HTML blijft je code<\/a> georganiseerd en makkelijker bij te werken.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Herbruikbaarheid:<\/b><span style=\"font-weight: 400;\"> E\u00e9n stylesheet kan op meerdere HTML-pagina&#8217;s worden toegepast, wat zorgt voor een consistente look op je hele website.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Preprocessors:<\/b><span style=\"font-weight: 400;\"> Je kunt geavanceerde CSS-preprocessors zoals Sass of Less gebruiken om je stylesheet <a href=\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2023\/09\/SSL.png\" data-wpil-monitor-id=\"10318\">ontwikkeling<\/a> te stroomlijnen (we gaan het hier in een toekomstig artikel over hebben!).<\/span><\/li>\n<\/ul>\n<h2><span style=\"font-weight: 400;\">CSS Specificiteit en Overerving  <\/span><\/h2>\n<p><span style=\"font-weight: 400;\">Het begrijpen van CSS-specificiteit en overerving is belangrijk om onverwachte tekstkleurveranderingen te voorkomen. Specificiteit verwijst naar hoe CSS bepaalt welke regel voorrang krijgt als er meerdere conflicterende stijlen voor een element bestaan. Over het algemeen zullen specifiekere selectors (zoals ID&#8217;s) minder specifieke (zoals HTML-tags) overschrijven.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Overerving betekent dat sommige <a href=\"https:\/\/elementor.com\/blog\/nl\/hoe-onderstreep-je-tekst-in-css-css-text-decoration-eigenschap\/\" data-wpil-monitor-id=\"10319\">CSS-eigenschappen<\/a>, zoals kleur, worden doorgegeven van ouderelementen aan hun kindelementen. Dit betekent dat als je een tekstkleur instelt op de &lt;body&gt; tag, alle tekst binnen de pagina die kleur erft, tenzij die wordt overschreven door specifiekere stijlen.<\/span><\/p>\n<h2><span style=\"font-weight: 400;\">Specifieke Elementen Aanspreken  <\/span><\/h2>\n<p><span style=\"font-weight: 400;\">CSS geeft je precieze controle over welke tekstelementen je wilt stylen. Laten we kijken naar de meest voorkomende manieren van aanspreken:<\/span><\/p>\n<h3><span style=\"font-weight: 400;\">HTML Tags<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">De simpelste manier is om generieke HTML-tags aan te spreken. Dit past je kleurverandering toe op alle elementen van dat type binnen je pagina:<\/span><\/p>\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-a11bf53 elementor-widget elementor-widget-code-highlight\" data-id=\"a11bf53\" 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-default copy-to-clipboard \">\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: #9932CC; \/* Dark orchid for paragraphs *\/\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\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-b201c80 e-flex e-con-boxed e-con e-parent\" data-id=\"b201c80\" 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-3e8bae9 elementor-widget elementor-widget-text-editor\" data-id=\"3e8bae9\" 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;\">Classes<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Classes bieden een flexibelere manier om tekstkleurstijlen toe te passen. Je definieert een class in je CSS en voegt dan het class-attribuut toe aan de HTML-elementen die je wilt aanspreken:<\/span><\/p>\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-7ff1af3 elementor-widget elementor-widget-code-highlight\" data-id=\"7ff1af3\" 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-default copy-to-clipboard \">\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.highlight { \r\n  color: #FFD700; \/* A vibrant gold *\/\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-2e99b2b elementor-widget elementor-widget-code-highlight\" data-id=\"2e99b2b\" 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-default copy-to-clipboard \">\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 class=\"highlight\">This text will be highlighted in gold.<\/p>\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-27dbeb3 elementor-widget elementor-widget-text-editor\" data-id=\"27dbeb3\" 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;\">Classes zijn geweldig omdat:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Herbruikbaarheid:<\/b><span style=\"font-weight: 400;\"> Je kunt dezelfde class op meerdere elementen toepassen, wat zorgt voor consistente styling.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Organisatie:<\/b><span style=\"font-weight: 400;\"> <a href=\"https:\/\/elementor.com\/blog\/nl\/css-klassen-selectoren-styling-tips-trucs-en-meer\/\" data-wpil-monitor-id=\"10320\">Classes helpen je CSS te structureren<\/a> en maken het makkelijker te begrijpen.<\/span><\/li>\n<\/ul>\n<h3><span style=\"font-weight: 400;\">ID&#8217;s  <\/span><\/h3>\n<p><span style=\"font-weight: 400;\">ID&#8217;s zijn unieke identificaties voor specifieke HTML-elementen en gebruiken het id-attribuut. Gebruik ID&#8217;s spaarzaam, aangezien ze een zeer hoge specificiteit hebben die andere stijlen kan overschrijven.<\/span><\/p>\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-61483bd elementor-widget elementor-widget-code-highlight\" data-id=\"61483bd\" 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-default copy-to-clipboard \">\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#important-message { \r\n  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-c50f2bf elementor-widget elementor-widget-code-highlight\" data-id=\"c50f2bf\" 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-default copy-to-clipboard \">\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 id=\"important-message\">This message will have red text.<\/p>\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-6e95a21 elementor-widget elementor-widget-text-editor\" data-id=\"6e95a21\" 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;\">ID&#8217;s zijn voornamelijk nuttig voor het stylen van enkele, onderscheidende elementen en worden vaak gebruikt bij JavaScript-interacties.<\/span><\/p>\n<h2><span style=\"font-weight: 400;\">Tekstkleur Veranderen bij Gebruikersinteracties<\/span><\/h2>\n<h3><span style=\"font-weight: 400;\">Hover-effecten  <\/span><\/h3>\n<p><span style=\"font-weight: 400;\">De :hover pseudo-class voegt een speciaal tintje toe aan je website, waardoor je de tekstkleur kunt veranderen wanneer een gebruiker met de muis over een element beweegt. Dit is een veel voorkomende techniek voor het highlighten van <a href=\"https:\/\/elementor.com\/blog\/nl\/introductie-van-elementor-3-23-live-resultaten-zwevende-knoppen-link-in-bio-en-meer\/\" data-wpil-monitor-id=\"10334\">links of knoppen<\/a>:<\/span><\/p>\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-2072c38 elementor-widget elementor-widget-code-highlight\" data-id=\"2072c38\" 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-default copy-to-clipboard \">\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\na:hover { \r\n  color: #EE82EE; \/* A playful violet for link hover *\/\r\n}\r\n\r\n.button:hover {\r\n    color: white; \/* White text on button 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-1b65521 elementor-widget elementor-widget-text-editor\" data-id=\"1b65521\" 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;\">Hover-effecten geven visuele feedback, wat de gebruiker laat zien dat een element interactief is. Ze <a href=\"https:\/\/elementor.com\/blog\/nl\/verbeterde-websiteprestaties-bij-spread-agency-met-elementors-image-optimizer\/\" data-wpil-monitor-id=\"10335\">verbeteren de navigatie en kunnen je website<\/a> aantrekkelijker maken.<\/span><\/p>\n<h3><span style=\"font-weight: 400;\">Andere Toestanden  <\/span><\/h3>\n<p><span style=\"font-weight: 400;\">CSS biedt extra pseudo-classes om tekst te stylen op basis van verschillende interactietoestanden:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">:active: Wanneer op een element wordt geklikt of getikt.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">:visited: Voor het <a href=\"https:\/\/elementor.com\/blog\/nl\/html-afbeeldingen-code-grootte-links-stijl-seo-tips\/\" data-wpil-monitor-id=\"10321\">stylen van links<\/a> die de gebruiker al heeft bezocht.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">:focus: Wanneer een element (zoals een formulierveld) toetsenbordfocus heeft.<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">Laten we bezochte links een minder verzadigde kleur geven:<\/span><\/p>\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-fe69509 elementor-widget elementor-widget-code-highlight\" data-id=\"fe69509\" 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-default copy-to-clipboard \">\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\na:visited {\r\n color:  #800080; \/* A muted purple for visited links *\/\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-b340d6a elementor-widget elementor-widget-text-editor\" data-id=\"b340d6a\" 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;\">Deze pseudo-classes geven je nog meer controle over hoe je tekst reageert op gebruikersacties, wat de <a href=\"https:\/\/elementor.com\/blog\/how-osm-uses-additional-breakpoints-for-ux\/\" data-wpil-monitor-id=\"10322\">gebruikerservaring verder verbetert<\/a>.<\/span><\/p>\n<h2><span style=\"font-weight: 400;\">Toegankelijkheid en Kleurcontrast  <\/span><\/h2>\n<h3><span style=\"font-weight: 400;\">Het Belang van Voldoende Contrast<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Het kiezen van tekst- en <a href=\"https:\/\/elementor.com\/blog\/nl\/hoe-je-de-achtergrondkleur-in-html-kunt-veranderen\/\" data-wpil-monitor-id=\"10323\">achtergrondkleuren<\/a> met voldoende contrast is essentieel om je website leesbaar te maken voor iedereen, inclusief gebruikers met visuele beperkingen. De Richtlijnen voor Toegankelijkheid van Webinhoud (WCAG) defini\u00ebren minimale contrastverhouding om ervoor te zorgen dat je content leesbaar is.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Slecht kleurcontrast kan tekst moeilijk of zelfs onmogelijk te lezen maken, wat leidt tot frustratie en uitsluiting voor sommige gebruikers. Door prioriteit te geven aan contrast, cre\u00eber je een meer verwelkomende en inclusieve online ervaring.<\/span><\/p>\n<h3><span style=\"font-weight: 400;\">Kleurenblindheid Simulators<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Kleurenblindheid treft een aanzienlijk deel van de bevolking. Kleurenblindheid simulators zijn waardevolle tools die je helpen visualiseren hoe je website eruit ziet voor mensen met verschillende soorten kleurzichtstoornissen. Er bestaan verschillende browserextensies en online tools voor dit doel, en <a href=\"https:\/\/elementor.com\/blog\/nl\/verken-elementor-pro-weergavevoorwaarden-rolrechten-in-de-elementmanager-en-meer\/\" data-wpil-monitor-id=\"10336\">Elementor heeft ook<\/a> een ingebouwde kleurenblindheid simulator.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Empathie speelt een sleutelrol in <a href=\"https:\/\/elementor.com\/blog\/nl\/31-beste-webveilige-lettertypen-voor-toegankelijk-ontwerp\/\" data-wpil-monitor-id=\"10337\">toegankelijk ontwerp<\/a>. Jezelf in de schoenen plaatsen van gebruikers met verschillende vaardigheden bevordert een dieper begrip van hun behoeften.<\/span><\/p>\n<h3><span style=\"font-weight: 400;\">Bronnen en Tools<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Laten we eens kijken naar enkele handige bronnen om ervoor te zorgen dat je kleurkeuzes toegankelijk zijn:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Contrastcheckers:<\/b><span style=\"font-weight: 400;\"> Verschillende online tools (zoals WebAIM&#8217;s Color Contrast Checker: <\/span><a href=\"https:\/\/webaim.org\/resources\/contrastchecker\/\"><span style=\"font-weight: 400;\">https:\/\/webaim.org\/resources\/contrastchecker\/<\/span><\/a><span style=\"font-weight: 400;\">) laten je je tekst- en achtergrondkleuren invoeren en geven aan of ze voldoen aan de WCAG-contrastvereisten.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Toegankelijke Kleurenpalet Generators:<\/b><span style=\"font-weight: 400;\"> Websites zoals Who Can Use: <a href=\"https:\/\/venngage.com\/tools\/accessible-color-palette-generator\">https:\/\/venngage.com\/tools\/accessible-color-palette-generator<\/a> helpen je kleurenpaletten te bouwen die vanaf het begin prioriteit geven aan toegankelijkheid.<\/span><\/li>\n<\/ul>\n<h2><span style=\"font-weight: 400;\">Best Practices voor Tekstkleur Keuzes<\/span><\/h2>\n<h3><span style=\"font-weight: 400;\">Leesbaarheid is Cruciaal<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Je tekstkleurkeuzes mogen nooit ten koste gaan van de leesbaarheid. Hoewel een levendig <a href=\"https:\/\/elementor.com\/blog\/nl\/complementaire-kleurenschemas-in-webdesign-een-uitgebreide-gids\/\" data-wpil-monitor-id=\"10324\">kleurenschema<\/a> aantrekkelijk kan zijn, is het alleen nuttig als je gebruikers de inhoud kunnen lezen. Hier is waar je rekening mee moet houden:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Achtergrond is Belangrijk:<\/b><span style=\"font-weight: 400;\">  Tekstkleur moet duidelijk afsteken tegen de achtergrondkleur. Gebruik altijd een contrastchecker om dit te verifi\u00ebren.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Sterk Contrast:<\/b><span style=\"font-weight: 400;\"> Ga voor hoog-contrast combinaties, vooral voor essenti\u00eble tekst zoals bodytekst en navigatielabels.<\/span><\/li>\n<\/ul>\n<h3><span style=\"font-weight: 400;\">Branding en Kleurpsychologie<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Kleuren hebben de kracht om emoties op te roepen en <a href=\"https:\/\/elementor.com\/blog\/introducing-new-ecommerce-design-capabilities\/\" data-wpil-monitor-id=\"10325\">sterk te be\u00efnvloeden hoe je merk<\/a> wordt waargenomen. Laten we bekijken hoe je je tekstkleuren kunt afstemmen op het doel van je website:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Merkpalet:<\/b><span style=\"font-weight: 400;\"> Verwerk je bestaande merkkleuren in je tekststijl om merkherkenning en een samenhangende look te bevorderen.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Emotie:<\/b><span style=\"font-weight: 400;\">  Begrijp de psychologie van kleur. Warme kleuren (rood, oranje, geel) stralen energie en opwinding uit, terwijl koelere kleuren (blauw, groen, paars) meestal kalmerender zijn.<\/span><\/li>\n<\/ul>\n<h3><span style=\"font-weight: 400;\">Hi\u00ebrarchie en Nadruk<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Gebruik kleur om een duidelijke visuele hi\u00ebrarchie op je pagina&#8217;s te cre\u00ebren. Dit helpt het oog van de gebruiker te leiden en geeft het belang van verschillende tekstelementen aan:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Koppen:<\/b><span style=\"font-weight: 400;\"> Koppen werken vaak goed met vettere of donkerdere kleuren om zich te onderscheiden van de bodytekst.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Oproepen tot Actie:<\/b><span style=\"font-weight: 400;\"> Laat knoppen en andere belangrijke links opvallen met contrasterende kleuren die de aandacht trekken.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Subtiliteit:<\/b><span style=\"font-weight: 400;\"> Gebruik minder verzadigde <a href=\"https:\/\/elementor.com\/blog\/nl\/meer-van-elementor-3-6-verbeterde-import-export-en-herschikking-van-globale-lettertypen-en-kleuren\/\" data-wpil-monitor-id=\"10326\">kleuren of kleinere lettergroottes voor minder belangrijke<\/a> tekstelementen<\/span><\/li>\n<\/ul>\n<h3><span style=\"font-weight: 400;\">Overdrijf het Niet<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Een beetje kleur gaat een lange weg! Hier is waarom eenvoud vaak het beste is:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Overweldigend:<\/b><span style=\"font-weight: 400;\"> Te veel kleuren kunnen je website rommelig en moeilijk leesbaar maken.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Consistentie:<\/b><span style=\"font-weight: 400;\"> Een beperkt, goed gekozen kleurenpalet cre\u00ebert een meer harmonieuze en gepolijste look.<\/span><\/li>\n<\/ul>\n<h2><span style=\"font-weight: 400;\">Elementor: Intu\u00eftief Tekst Stylen<\/span><\/h2>\n<h3><span style=\"font-weight: 400;\">Introductie van de Elementor Visual Editor<\/span><\/h3>\n<p><iframe title=\"Elementor - The Leading Platform for Web Creators\" width=\"800\" height=\"450\" src=\"https:\/\/www.youtube.com\/embed\/le72grP_Q6k?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe><\/p>\n<p><span style=\"font-weight: 400;\">Elementor&#8217;s kernkracht ligt in zijn drag-and-drop visuele editor. Deze editor geeft je real-time controle over het <a href=\"https:\/\/elementor.com\/blog\/nl\/20-principes-van-websiteontwerp-die-elke-webprofessional-moet-weten\/\" data-wpil-monitor-id=\"10327\">ontwerp van je website<\/a>, inclusief tekstkleur, zonder een enkele regel CSS te schrijven (tenzij je dat wilt). Deze aanpak stelt mensen zonder codeerervaring in staat om mooie, kleurrijke websites te cre\u00ebren.<\/span><\/p>\n<h3><span style=\"font-weight: 400;\">Tekstkleur Besturingen in Elementor Widgets<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Bijna alle <a href=\"https:\/\/elementor.com\/blog\/nl\/introductie-van-elementor-3-10-nieuwe-geneste-elementen-de-toekomst-van-ontwerpen-met-widgets-van-elementor\/\" data-wpil-monitor-id=\"10328\">Elementor widgets<\/a> die tekst bevatten (koppen, alinea&#8217;s, knoppen, enz.) hebben intu\u00eftieve kleurkiezer besturingen binnen hun stijlopties. Laten we dit illustreren:<\/span><\/p>\n<ol>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Selecteer een Widget:<\/b><span style=\"font-weight: 400;\"> Kies een willekeurige tekstgebaseerde widget op je pagina.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Styling Tab:<\/b><span style=\"font-weight: 400;\"> Ga naar het \u201cStijl\u201d tabblad van de widget in het Elementor bewerkingspaneel.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Kleurenkiezer:<\/b><span style=\"font-weight: 400;\"> Zoek de optie \u201cTekstkleur\u201d en klik erop om een gebruiksvriendelijke kleurenkiezer te openen.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Kies vrij:<\/b><span style=\"font-weight: 400;\"> Je kunt kiezen uit een kleurenpalet, hexcodes invoeren, of de pipet gebruiken om <a href=\"https:\/\/elementor.com\/blog\/nl\/soorten-domeinen-voordelen-voorbeelden-en-hoe-je-de-perfecte-match-kunt-vinden\/\" data-wpil-monitor-id=\"10338\">kleuren perfect te matchen met bestaande kleuren op je website<\/a>.<\/span><\/li>\n<\/ol>\n<p><iframe title=\"Introducing Elementor AI Copilot\" width=\"800\" height=\"450\" src=\"https:\/\/www.youtube.com\/embed\/rWB2moi4XMw?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe><\/p>\n<p><span style=\"font-weight: 400;\">Deze gestroomlijnde workflow versnelt je experimenten en implementatie van tekstkleuren enorm.<\/span><\/p>\n<h3><span style=\"font-weight: 400;\">Globale stijlinstellingen<\/span><\/h3>\n<p><span style=\"font-weight: 400;\"><a href=\"https:\/\/elementor.com\/blog\/nl\/transformeer-je-ontwerpen-copilots-global-styling-generative-fill-expand-image-en-wordpress-uitbreidingen\/\" data-wpil-monitor-id=\"10339\">Elementor biedt globale stijl<\/a>instellingen waarmee je standaardkleuren kunt defini\u00ebren voor koppen, body tekst, links en meer. Dit heeft verschillende voordelen:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Consistentie:<\/b><span style=\"font-weight: 400;\"> Behoud makkelijk een samenhangende look over je hele website.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Tijdbespaarder:<\/b><span style=\"font-weight: 400;\"> Verander kleuren voor de hele site met een paar klikken in plaats van individuele widgets te bewerken.<\/span><\/li>\n<\/ul>\n<h3><span style=\"font-weight: 400;\">Aangepaste CSS-mogelijkheden<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Hoewel Elementor&#8217;s visuele tools ongelooflijk krachtig zijn, wil je ze misschien finetunen met aangepaste CSS. <a href=\"https:\/\/elementor.com\/blog\/nl\/introductie-van-elementor-3-11-nieuwe-loop-carousel-widget-om-de-weergave-van-je-berichten-of-producten-aan-te-passen\/\" data-wpil-monitor-id=\"10340\">Elementor stelt je in staat om aangepaste<\/a> CSS-code direct toe te voegen aan widgets, pagina&#8217;s of de hele site, waardoor je dat extra niveau van controle krijgt wanneer nodig.<\/span><\/p>\n<h2><span style=\"font-weight: 400;\">Bonus: Geavanceerde technieken  tools <\/span><\/h2>\n<h3><span style=\"font-weight: 400;\">Kleurgradi\u00ebnten<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Met CSS-gradi\u00ebnten kun je soepele overgangen tussen meerdere kleuren in je tekst maken. Dit kan opvallende en gedenkwaardige effecten produceren:<\/span><\/p>\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-f8f05d4 elementor-widget elementor-widget-code-highlight\" data-id=\"f8f05d4\" 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-default copy-to-clipboard \">\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  background: linear-gradient(to right, #FF0000, #FFA500, #FFFF00); \r\n  -webkit-background-clip: text;\r\n  -webkit-text-fill-color: transparent; \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-43f3c71 elementor-widget elementor-widget-text-editor\" data-id=\"43f3c71\" 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;\">Om ervoor te zorgen dat kleurgradi\u00ebnten in je tekst worden weergegeven, zoals in het bovenstaande voorbeeld, heb je vaak specifieke -webkit- prefixen nodig voor compatibiliteit tussen verschillende browsers.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Gradi\u00ebnten bieden een unieke kans om diepte en visuele interesse toe te voegen aan koppen of call-to-action elementen.<\/span><\/p>\n<h3><span style=\"font-weight: 400;\">Tekstschaduwen en tekstcontouren<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Laten we wat dimensie toevoegen aan je tekst:<\/span><\/p>\n<p><b>Tekstschaduwen (<\/b><span style=\"font-weight: 400;\">text-shadow<\/span><b>)<\/b><span style=\"font-weight: 400;\"> Cre\u00eber subtiele schaduweffecten achter je tekst, wat de leesbaarheid tegen bepaalde achtergronden verbetert of een vleugje stijl toevoegt.<\/span><\/p>\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-4b65ee4 elementor-widget elementor-widget-code-highlight\" data-id=\"4b65ee4\" 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-default copy-to-clipboard \">\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  text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5); \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-023fb5b elementor-widget elementor-widget-text-editor\" data-id=\"023fb5b\" 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>Tekstcontouren (<\/b><span style=\"font-weight: 400;\">-webkit-text-stroke<\/span><b>)<\/b><span style=\"font-weight: 400;\"> Voeg contouren toe aan je tekst voor meer nadruk of een gedurfder esthetiek.<\/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-1294d6a elementor-widget elementor-widget-code-highlight\" data-id=\"1294d6a\" 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-default copy-to-clipboard \">\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\nh2 {\r\n  -webkit-text-stroke: 1px black; \r\n  color: white; \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-ee23aa4 elementor-widget elementor-widget-text-editor\" data-id=\"ee23aa4\" 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;\">Gebruik tekstschaduwen en contouren met mate. Subtiliteit is vaak het beste, maar gedurfde effecten kunnen schitteren in specifieke gevallen zoals grote, decoratieve titels.<\/span><\/p>\n<h3><span style=\"font-weight: 400;\">Kleurfuncties (als er ruimte is)<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">CSS biedt functies zoals lighten(), darken(), saturate(), en andere om kleuren on-the-fly te manipuleren. Deze zijn vooral handig binnen preprocessors zoals Sass om dynamisch kleurvariaties te berekenen op basis van je kleurthema.<\/span><\/p>\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-b6ecdf6 elementor-widget elementor-widget-code-highlight\" data-id=\"b6ecdf6\" 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-default copy-to-clipboard \">\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\/* Example using the lighten() function *\/\r\nbutton:hover {\r\n    background-color: lighten(#006400, 10%); \/* Lightens the green by 10% 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-ca62649 elementor-widget elementor-widget-text-editor\" data-id=\"ca62649\" 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\n<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\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-bdfac3d elementor-widget elementor-widget-text-editor\" data-id=\"bdfac3d\" 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;\">Conclusie <\/span><\/h2>\n<p><span style=\"font-weight: 400;\">In deze gids hebben we de wereld van <a href=\"https:\/\/elementor.com\/blog\/nl\/css-html-kleuren-eigenschappen-codes-trefwoorden-en-namen\/\" data-wpil-monitor-id=\"10329\">tekstkleur in CSS<\/a> verkend. Je hebt de basics van de kleur-eigenschap geleerd, verschillende manieren om kleurwaardes uit te drukken en methodes om <a href=\"https:\/\/elementor.com\/blog\/nl\/hoeveel-is-mijn-website-waardwaarderingsmethoden-en-hoe-je-de-waarde-van-je-website-kunt-verhogen\/\" data-wpil-monitor-id=\"10341\">specifieke elementen op je website aan te pakken<\/a>. We hebben het gehad over toegankelijkheid, best practices, en zelfs een beetje <a href=\"https:\/\/elementor.com\/blog\/nl\/hoe-chatgpt-te-gebruiken-van-basisvragen-tot-geavanceerde-technieken\/\" data-wpil-monitor-id=\"10342\">geavanceerde technieken<\/a>.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Onthoud dat kleur een krachtig gereedschap is in je <a href=\"https:\/\/elementor.com\/blog\/nl\/7-beste-portfolio-website-bouwers-van-year\/\" data-wpil-monitor-id=\"10330\">webdesign<\/a> arsenaal. Gebruik het strategisch om:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Leesbaarheid te verbeteren<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">De ogen van de gebruiker te sturen<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Emoties op te roepen en aan te sluiten bij je merk<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\"><a href=\"https:\/\/elementor.com\/blog\/nl\/12-portfolio-voorbeelden-van-opvallend-website-ontwerp\/\" data-wpil-monitor-id=\"10331\">Een visueel aantrekkelijke en memorabele website te maken<\/a><\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">Als je het proces van het toevoegen en stylen van tekstkleur wilt stroomlijnen, overweeg dan een krachtige <a href=\"https:\/\/elementor.com\/blog\/nl\/7-beste-gratis-websitebouwers-van-year\/\" data-wpil-monitor-id=\"10332\">websitebouwer<\/a> zoals Elementor. De intu\u00eftieve visuele interface en integratie met geoptimaliseerde <a href=\"https:\/\/elementor.com\/blog\/nl\/5-beste-webhosting-voor-kleine-bedrijven-in-year\/\" data-wpil-monitor-id=\"10333\">hosting<\/a> stellen je in staat om mooie, kleurrijke websites te maken zonder uitgebreide codeerkennis nodig te hebben.<\/span><\/p>\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>De kleur-eigenschap staat centraal bij het manipuleren van CSS-tekstkleur. Deze ogenschijnlijk simpele eigenschap is je sleutel tot het ontsluiten van het hele kleurenspectrum voor de tekst op je website. Het werkt door direct een gewenste kleurwaarde toe te wijzen aan een specifiek tekstelement. <\/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-126821","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>Hoe je tekstkleur verandert in CSS &amp; HTML<\/title>\n<meta name=\"description\" content=\"De kleur-eigenschap staat centraal bij het manipuleren van CSS-tekstkleur. Deze ogenschijnlijk simpele eigenschap is je sleutel tot het ontsluiten van het hele kleurenspectrum voor de tekst op je website. Het werkt door direct een gewenste kleurwaarde toe te wijzen aan een specifiek tekstelement.\" \/>\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\/hoe-je-tekstkleur-verandert-in-css-html\/\" \/>\n<meta property=\"og:locale\" content=\"nl_NL\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Hoe je tekstkleur verandert in CSS &amp; HTML\" \/>\n<meta property=\"og:description\" content=\"De kleur-eigenschap staat centraal bij het manipuleren van CSS-tekstkleur. Deze ogenschijnlijk simpele eigenschap is je sleutel tot het ontsluiten van het hele kleurenspectrum voor de tekst op je website. Het werkt door direct een gewenste kleurwaarde toe te wijzen aan een specifiek tekstelement.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/elementor.com\/blog\/nl\/hoe-je-tekstkleur-verandert-in-css-html\/\" \/>\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-03-02T08:01:16+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2026-01-06T13:02:03+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=\"14 minuten\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/elementor.com\/blog\/nl\/hoe-je-tekstkleur-verandert-in-css-html\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/elementor.com\/blog\/nl\/hoe-je-tekstkleur-verandert-in-css-html\/\"},\"author\":{\"name\":\"Itamar Haim\",\"@id\":\"https:\/\/elementor.com\/blog\/nl\/#\/schema\/person\/5d24783541c454816685653dfed73377\"},\"headline\":\"Hoe je tekstkleur verandert in CSS &amp; HTML\",\"datePublished\":\"2025-03-02T08:01:16+00:00\",\"dateModified\":\"2026-01-06T13:02:03+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/elementor.com\/blog\/nl\/hoe-je-tekstkleur-verandert-in-css-html\/\"},\"wordCount\":2642,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/elementor.com\/blog\/nl\/#organization\"},\"image\":{\"@id\":\"https:\/\/elementor.com\/blog\/nl\/hoe-je-tekstkleur-verandert-in-css-html\/#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\/hoe-je-tekstkleur-verandert-in-css-html\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/elementor.com\/blog\/nl\/hoe-je-tekstkleur-verandert-in-css-html\/\",\"url\":\"https:\/\/elementor.com\/blog\/nl\/hoe-je-tekstkleur-verandert-in-css-html\/\",\"name\":\"Hoe je tekstkleur verandert in CSS &amp; HTML\",\"isPartOf\":{\"@id\":\"https:\/\/elementor.com\/blog\/nl\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/elementor.com\/blog\/nl\/hoe-je-tekstkleur-verandert-in-css-html\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/elementor.com\/blog\/nl\/hoe-je-tekstkleur-verandert-in-css-html\/#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-03-02T08:01:16+00:00\",\"dateModified\":\"2026-01-06T13:02:03+00:00\",\"description\":\"De kleur-eigenschap staat centraal bij het manipuleren van CSS-tekstkleur. Deze ogenschijnlijk simpele eigenschap is je sleutel tot het ontsluiten van het hele kleurenspectrum voor de tekst op je website. Het werkt door direct een gewenste kleurwaarde toe te wijzen aan een specifiek tekstelement.\",\"breadcrumb\":{\"@id\":\"https:\/\/elementor.com\/blog\/nl\/hoe-je-tekstkleur-verandert-in-css-html\/#breadcrumb\"},\"inLanguage\":\"nl-NL\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/elementor.com\/blog\/nl\/hoe-je-tekstkleur-verandert-in-css-html\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"nl-NL\",\"@id\":\"https:\/\/elementor.com\/blog\/nl\/hoe-je-tekstkleur-verandert-in-css-html\/#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\/hoe-je-tekstkleur-verandert-in-css-html\/#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\":\"Hoe je tekstkleur verandert in CSS &amp; HTML\"}]},{\"@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":"Hoe je tekstkleur verandert in CSS &amp; HTML","description":"De kleur-eigenschap staat centraal bij het manipuleren van CSS-tekstkleur. Deze ogenschijnlijk simpele eigenschap is je sleutel tot het ontsluiten van het hele kleurenspectrum voor de tekst op je website. Het werkt door direct een gewenste kleurwaarde toe te wijzen aan een specifiek tekstelement.","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\/hoe-je-tekstkleur-verandert-in-css-html\/","og_locale":"nl_NL","og_type":"article","og_title":"Hoe je tekstkleur verandert in CSS &amp; HTML","og_description":"De kleur-eigenschap staat centraal bij het manipuleren van CSS-tekstkleur. Deze ogenschijnlijk simpele eigenschap is je sleutel tot het ontsluiten van het hele kleurenspectrum voor de tekst op je website. Het werkt door direct een gewenste kleurwaarde toe te wijzen aan een specifiek tekstelement.","og_url":"https:\/\/elementor.com\/blog\/nl\/hoe-je-tekstkleur-verandert-in-css-html\/","og_site_name":"Blog","article_publisher":"https:\/\/www.facebook.com\/elemntor\/","article_published_time":"2025-03-02T08:01:16+00:00","article_modified_time":"2026-01-06T13:02:03+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":"14 minuten"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/elementor.com\/blog\/nl\/hoe-je-tekstkleur-verandert-in-css-html\/#article","isPartOf":{"@id":"https:\/\/elementor.com\/blog\/nl\/hoe-je-tekstkleur-verandert-in-css-html\/"},"author":{"name":"Itamar Haim","@id":"https:\/\/elementor.com\/blog\/nl\/#\/schema\/person\/5d24783541c454816685653dfed73377"},"headline":"Hoe je tekstkleur verandert in CSS &amp; HTML","datePublished":"2025-03-02T08:01:16+00:00","dateModified":"2026-01-06T13:02:03+00:00","mainEntityOfPage":{"@id":"https:\/\/elementor.com\/blog\/nl\/hoe-je-tekstkleur-verandert-in-css-html\/"},"wordCount":2642,"commentCount":0,"publisher":{"@id":"https:\/\/elementor.com\/blog\/nl\/#organization"},"image":{"@id":"https:\/\/elementor.com\/blog\/nl\/hoe-je-tekstkleur-verandert-in-css-html\/#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\/hoe-je-tekstkleur-verandert-in-css-html\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/elementor.com\/blog\/nl\/hoe-je-tekstkleur-verandert-in-css-html\/","url":"https:\/\/elementor.com\/blog\/nl\/hoe-je-tekstkleur-verandert-in-css-html\/","name":"Hoe je tekstkleur verandert in CSS &amp; HTML","isPartOf":{"@id":"https:\/\/elementor.com\/blog\/nl\/#website"},"primaryImageOfPage":{"@id":"https:\/\/elementor.com\/blog\/nl\/hoe-je-tekstkleur-verandert-in-css-html\/#primaryimage"},"image":{"@id":"https:\/\/elementor.com\/blog\/nl\/hoe-je-tekstkleur-verandert-in-css-html\/#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-03-02T08:01:16+00:00","dateModified":"2026-01-06T13:02:03+00:00","description":"De kleur-eigenschap staat centraal bij het manipuleren van CSS-tekstkleur. Deze ogenschijnlijk simpele eigenschap is je sleutel tot het ontsluiten van het hele kleurenspectrum voor de tekst op je website. Het werkt door direct een gewenste kleurwaarde toe te wijzen aan een specifiek tekstelement.","breadcrumb":{"@id":"https:\/\/elementor.com\/blog\/nl\/hoe-je-tekstkleur-verandert-in-css-html\/#breadcrumb"},"inLanguage":"nl-NL","potentialAction":[{"@type":"ReadAction","target":["https:\/\/elementor.com\/blog\/nl\/hoe-je-tekstkleur-verandert-in-css-html\/"]}]},{"@type":"ImageObject","inLanguage":"nl-NL","@id":"https:\/\/elementor.com\/blog\/nl\/hoe-je-tekstkleur-verandert-in-css-html\/#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\/hoe-je-tekstkleur-verandert-in-css-html\/#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":"Hoe je tekstkleur verandert in CSS &amp; HTML"}]},{"@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\/126821","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=126821"}],"version-history":[{"count":2,"href":"https:\/\/elementor.com\/blog\/nl\/wp-json\/wp\/v2\/posts\/126821\/revisions"}],"predecessor-version":[{"id":149646,"href":"https:\/\/elementor.com\/blog\/nl\/wp-json\/wp\/v2\/posts\/126821\/revisions\/149646"}],"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=126821"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/elementor.com\/blog\/nl\/wp-json\/wp\/v2\/categories?post=126821"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/elementor.com\/blog\/nl\/wp-json\/wp\/v2\/tags?post=126821"},{"taxonomy":"marketing_persona","embeddable":true,"href":"https:\/\/elementor.com\/blog\/nl\/wp-json\/wp\/v2\/marketing_persona?post=126821"},{"taxonomy":"marketing_intent","embeddable":true,"href":"https:\/\/elementor.com\/blog\/nl\/wp-json\/wp\/v2\/marketing_intent?post=126821"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}