# Conditional custom colors

**URL:** <https://talk.observablehq.com/t/conditional-custom-colors/8924>\
**Category:** Help\
**Created:** [March 14, 2024, 3:39pm UTC](https://talk.observablehq.com/t/conditional-custom-colors/8924 "2024-03-14T15:39:17Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![mindlessgreen](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/mindlessgreen/32/8402_2.png) [@mindlessgreen](https://talk.observablehq.com/u/mindlessgreen)\
**Post date:** [March 14, 2024, 3:39pm UTC](https://talk.observablehq.com/t/conditional-custom-colors/8924/1 "2024-03-14T15:39:17Z")

</div>

I have a scatterplot where the stroke color for the points is a variable that can be selected from a dropdown. So, by default if a categorical variable is selected, the 10 color palette is used and if a continuous variable is selected, the turbo colormap is used. How do I set a custom palette and a custom colormap for both of these types of input in the same plot?

```auto
viewof x = Inputs.select(["depth","table","price"], {value: "depth", multiple: false, label: "X axis"})

viewof y = Inputs.select(["depth","table","price"], {value: "table", multiple: false, label: "Y axis"})

viewof col = Inputs.select(Object.keys(diamonds[0]).sort(), {value: "cut", multiple: false, label: "Color variable"})

Plot.plot({
  color: {
    legend: true
    //type: "categorical",
    //range: ["green", "purple", "orange", "yellow", "blue", "pink", "brown", "grey", "green", "lavender"]
  },
  marks: [
    Plot.dot(diamonds, {
      x: x,
      y: y,
      stroke: col,
      tip: true,
      channels: {Color: "color", Clarity: "clarity"}
    })
  ],
  grid: true
})

```

Here is a notebook that I am working with:

[https://observablehq.com/d/38a75cdbdb9d0db3](https://observablehq.com/d/38a75cdbdb9d0db3)

---

<div class="post-metadata">

**Author:** ![Fil](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/fil/32/207_2.png) [@Fil](https://talk.observablehq.com/u/Fil)\
**Post date:** [March 14, 2024, 10:42pm UTC](https://talk.observablehq.com/t/conditional-custom-colors/8924/2 "2024-03-14T22:42:16Z")

</div>

There might be a better idea but here’s a possibility: compute a chart and let Plot decide on the default color scale; then read back its type, it will be “linear” or “ordinal”

```js
Plot.dot(table, {fill:col}).plot().scale("color").type

```

(you can add `filter:[]` to avoid “drawing” the dots in the plot that will be discarded instantly anyway)

---

<div class="post-metadata">

**Author:** ![mindlessgreen](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/mindlessgreen/32/8402_2.png) [@mindlessgreen](https://talk.observablehq.com/u/mindlessgreen)\
**Post date:** [March 15, 2024, 5:26pm UTC](https://talk.observablehq.com/t/conditional-custom-colors/8924/3 "2024-03-15T17:26:55Z")

</div>

Thanks for the input. It’s not clear to me exactly what you mean. Could you please create a working example possibly using the example above?

---

<div class="post-metadata">

**Author:** ![Fil](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/fil/32/207_2.png) [@Fil](https://talk.observablehq.com/u/Fil)\
**Post date:** [March 15, 2024, 5:52pm UTC](https://talk.observablehq.com/t/conditional-custom-colors/8924/4 "2024-03-15T17:52:58Z")

</div>

sure! here’s a suggestion  
[https://observablehq.com/compare/38a75cdbdb9d0db3...9804e992c95e0fdb](https://observablehq.com/compare/38a75cdbdb9d0db3...9804e992c95e0fdb)