title: Vega-lite set color from data whilst retaining a legend
body: <p>I'm trying to use values from the data in order to set the colors of the bars. I would also like this to be reflected in a legend.</p>
  
  <p>So I've figured out how to use a specific color for a bar, based on a value in the data:</p>
  
  <pre><code>{
    "$schema": "https://vega.github.io/schema/vega-lite/v4.json",
    "description": "A bar chart that directly encodes color names in the data.",
    "data": {
      "values": [
        {
          "color": "rgb(0, 0, 0)",
          "b": 28,
          "type": "outside"
        },
        {
          "color": "rgb(255, 0, 0)",
          "b": 55,
          "type": "inside"
        },
        {
          "color": "rgb(0, 255, 0)",
          "b": 43,
          "type": "dew"
        }
      ]
    },  
    "mark": "bar",
    "encoding": {
      "x": {
        "field": "type",
        "type": "nominal"
      },
      "y": {
        "field": "b",
        "type": "quantitative"
      },
      "color": { "field": "color", "type": "nominal", "legend": {}, "scale": null}
    }
  }
  </code></pre>
  
  <p>Correctly colored bars:</p>
  
  <p><a href="https://i.stack.imgur.com/mxCNM.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/mxCNM.png" alt="Correctly Colored Bars"></a></p>
  
  <p>The above only works due to the <code>"scale": null</code> which prevents the legend from showing. If I remove this, then the legend shows, but the custom colors are lost and I get the rbg values showing up in the legend:</p>
  
  <pre><code>{
    "$schema": "https://vega.github.io/schema/vega-lite/v4.json",
    "description": "A bar chart that directly encodes color names in the data.",
    "data": {
      "values": [
        {
          "color": "rgb(0, 0, 0)",
          "b": 28,
          "type": "outside"
        },
        {
          "color": "rgb(255, 0, 0)",
          "b": 55,
          "type": "inside"
        },
        {
          "color": "rgb(0, 255, 0)",
          "b": 43,
          "type": "dew"
        }
      ]
    },  
    "mark": "bar",
    "encoding": {
      "x": {
        "field": "type",
        "type": "nominal"
      },
      "y": {
        "field": "b",
        "type": "quantitative"
      },
      "color": { "field": "color", "type": "nominal", "legend": {}}
    }
  }
  </code></pre>
  
  <p>Colors lost, wrong legend labels:</p>
  
  <p><a href="https://i.stack.imgur.com/q9dQC.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/q9dQC.png" alt="enter image description here"></a></p>
  
  <p>I can obviously get the correct legend labels with:</p>
  
  <pre><code>{
    "$schema": "https://vega.github.io/schema/vega-lite/v4.json",
    "description": "A bar chart that directly encodes color names in the data.",
    "data": {
      "values": [
        {
          "color": "rgb(0, 0, 0)",
          "b": 28,
          "type": "outside"
        },
        {
          "color": "rgb(255, 0, 0)",
          "b": 55,
          "type": "inside"
        },
        {
          "color": "rgb(0, 255, 0)",
          "b": 43,
          "type": "dew"
        }
      ]
    },  
    "mark": "bar",
    "encoding": {
      "x": {
        "field": "type",
        "type": "nominal"
      },
      "y": {
        "field": "b",
        "type": "quantitative"
      },
      "color": { "field": "type", "type": "nominal", "legend": {}}
    }
  }
  </code></pre>
  
  <p>But still I don't get the colors I want:</p>
  
  <p><a href="https://i.stack.imgur.com/rTx7T.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/rTx7T.png" alt="enter image description here"></a></p>
  
  <p>Is it possible to have both custom colors and a legend?</p>