diff --git a/cypress/integration/rendering/flowchart.spec.js b/cypress/integration/rendering/flowchart.spec.js
index 4ea4cbcee..06c84ac2e 100644
--- a/cypress/integration/rendering/flowchart.spec.js
+++ b/cypress/integration/rendering/flowchart.spec.js
@@ -524,4 +524,36 @@ describe('Flowchart', () => {
       { flowchart: { htmlLabels: false } }
     );
   });
+
+  it('25: Set node text color according to style when html labels are enabled', () => {
+    imgSnapshotTest(
+      `graph LR
+      A[red<br>text] --> B(blue<br>text)
+      C[/red<br/>text/] --> D{blue<br/>text}
+      style A color:red;
+      style B color:blue;
+      style C stroke:#ff0000,fill:#ffcccc,color:#ff0000
+      style D stroke:#0000ff,fill:#ccccff,color:#0000ff
+      click B "index.html#link-clicked" "link test"
+      click D testClick "click test"
+      `,
+      { flowchart: { htmlLabels: true } }
+    );
+  });
+
+  it('26: Set node text color according to style when html labels are disabled', () => {
+    imgSnapshotTest(
+      `graph LR
+      A[red<br>text] --> B(blue<br>text)
+      C[/red<br/>text/] --> D{blue<br/>text}
+      style A color:red;
+      style B color:blue;
+      style C stroke:#ff0000,fill:#ffcccc,color:#ff0000
+      style D stroke:#0000ff,fill:#ccccff,color:#0000ff
+      click B "index.html#link-clicked" "link test"
+      click D testClick "click test"
+      `,
+      { flowchart: { htmlLabels: false } }
+    );
+  });
 });
diff --git a/dist/index.html b/dist/index.html
index 2505d8010..9df88224e 100644
--- a/dist/index.html
+++ b/dist/index.html
@@ -353,6 +353,17 @@ graph TB
     linkStyle 1 stroke:greenyellow,stroke-width:2px
     style C fill:greenyellow,stroke:green,stroke-width:4px
   </div>
+  <div class="mermaid">
+    graph LR
+    A[red<br>text] --> B(blue<br>text)
+    C[/red<br/>text/] --> D{blue<br/>text}
+    style A color:red;
+    style B color:blue;
+    style C stroke:#ff0000,fill:#ffcccc,color:#ff0000
+    style D stroke:#0000ff,fill:#ccccff,color:#0000ff
+    click B "index.html#link-clicked" "link test"
+    click D testClick "click test"
+  </div>
 
   <hr/>
 
diff --git a/docs/flowchart.md b/docs/flowchart.md
index ff0e6cbdc..b6bdabc2f 100644
--- a/docs/flowchart.md
+++ b/docs/flowchart.md
@@ -509,13 +509,13 @@ It is possible to apply specific styles such as a thicker border or a different
 graph LR
     id1(Start)-->id2(Stop)
     style id1 fill:#f9f,stroke:#333,stroke-width:4px
-    style id2 fill:#ccf,stroke:#f66,stroke-width:2px,stroke-dasharray: 5, 5
+    style id2 fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5, 5
 ```
 ```mermaid
 graph LR
     id1(Start)-->id2(Stop)
     style id1 fill:#f9f,stroke:#333,stroke-width:4px
-    style id2 fill:#ccf,stroke:#f66,stroke-width:2px,stroke-dasharray: 5, 5
+    style id2 fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5, 5
 ```
 
 
diff --git a/src/diagrams/flowchart/flowRenderer.js b/src/diagrams/flowchart/flowRenderer.js
index 931608b45..decb382f8 100644
--- a/src/diagrams/flowchart/flowRenderer.js
+++ b/src/diagrams/flowchart/flowRenderer.js
@@ -87,6 +87,7 @@ export const addVertices = function(vert, g, svgId) {
       vertexNode.parentNode.removeChild(vertexNode);
     } else {
       const svgLabel = document.createElementNS('http://www.w3.org/2000/svg', 'text');
+      svgLabel.setAttribute('style', labelStyle.replace('color:', 'fill:'));
 
       const rows = vertexText.split(/<br\s*\/?>/gi);