title: Custom GitHub badges with dynamic color
body: <p>I struggle with creating a <a href="https://shields.io" rel="nofollow noreferrer">shields.io</a> badge which changes color dynamically.</p>
  
  <p>I am able to use the JSON response to parse a text into a <a href="https://img.shields.io/badge/dynamic/json.svg?label=custom&amp;url=https://jsonplaceholder.typicode.com/posts&amp;query=$[1].id&amp;colorB=orange" rel="nofollow noreferrer">badge</a> and set the color to orange:</p>
  
  <pre><code>https://img.shields.io/badge/dynamic/json.svg?label=custom&amp;url=https://jsonplaceholder.typicode.com/posts&amp;query=$[1].id&amp;colorB=orange
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/Idhja.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Idhja.png" alt="enter image description here"></a></p>
  
  <p>Works well...</p>
  
  <hr>
  
  <p>However, I want to change the color according to a rule. I might return the HEX color in JSON as well to be parsed into the badge. I tried the public <a href="http://www.colr.org/json/" rel="nofollow noreferrer">API</a> to get a random color and <strong><em>test</em></strong> the behavior:</p>
  
  <pre><code>http://www.colr.org/json/color/random
  </code></pre>
  
  <p>I get the first randomly get color with JsonPath <code>$.colors[0].hex</code> and place it o the badge URL as both as the dynamic value and color:</p>
  
  <pre><code>https://img.shields.io/badge/dynamic/json.svg?label=custom&amp;url=http://www.colr.org/json/color/random&amp;query=$.colors[0].hex&amp;colorB=$.colors[0].hex
  </code></pre>
  
  <p>Regardless of the randomly chosen color, the result is always somehow green (the last generated result was <code>#D0BB79</code>:</p>
  
  <p><a href="https://i.stack.imgur.com/Qt0kw.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Qt0kw.png" alt="enter image description here"></a></p>
  
  <p>I would expect something like this which correctly matches the <a href="https://www.color-hex.com/color/d0bb79" rel="nofollow noreferrer"><code>#D0BB79</code></a> color:</p>
  
  <p><a href="https://i.stack.imgur.com/DBKBB.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/DBKBB.png" alt="enter image description here"></a></p>
  
  <p>How to make the color dynamic as well? The sample dynamically colorful badges are provided with <a href="https://coveralls.io/" rel="nofollow noreferrer">Coveralls.io</a>, <a href="https://codecov.io/" rel="nofollow noreferrer">Codecov.io</a> or <a href="https://sonarcloud.io/" rel="nofollow noreferrer">SonarCloud.io</a>. </p>