# Color Range: pick color in range base on values in a vector

**URL:** <https://discourse.julialang.org/t/color-range-pick-color-in-range-base-on-values-in-a-vector/80533>\
**Category:** New to Julia\
**Tags:** colors\
**Created:** [May 5, 2022, 11:17am UTC](https://discourse.julialang.org/t/color-range-pick-color-in-range-base-on-values-in-a-vector/80533 "2022-05-05T11:17:11Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![Nash](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/nash/32/14482_2.png) [@Nash](https://discourse.julialang.org/u/Nash)\
**Post date:** [May 5, 2022, 11:17am UTC](https://discourse.julialang.org/t/color-range-pick-color-in-range-base-on-values-in-a-vector/80533/1 "2022-05-05T11:17:11Z")

</div>

I want to show the wealth of 6 people by showing a brighter yellow color if the person is closer to the wealthiest in the group, and deeper red if the person is closer to the poorest in the group.

I know the following will generate a range of colors between red and yellow, but here the “slicing” is uniform. How can I take the wealth-numbers from my vector and assign the appropriate colors:

```julia
wealth = [1, 12, 45, 2, 129, 10]
range(colorant"yellow", stop=colorant"red", length=length(wealth)).

```

Note: I want to assign the colors to nodes in a GraphRecipe plot, but unless the method is very different, I suppose showing the solution using marker dots in an x-y scatter plot will do.

---

<div class="post-metadata">

**Author:** ![originalsouth](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/originalsouth/32/32061_2.png) [@originalsouth](https://discourse.julialang.org/u/originalsouth)\
**Post date:** [May 5, 2022, 11:45am UTC](https://discourse.julialang.org/t/color-range-pick-color-in-range-base-on-values-in-a-vector/80533/2 "2022-05-05T11:45:17Z")

</div>

Is this what you are looking for?

```julia
range(colorant"yellow", stop=colorant"red", length=maximum(wealth))[wealth]

```

---

<div class="post-metadata">

**Author:** ![ffevotte](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/ffevotte/32/6587_2.png) [@ffevotte](https://discourse.julialang.org/u/ffevotte)\
**Post date:** [May 5, 2022, 11:47am UTC](https://discourse.julialang.org/t/color-range-pick-color-in-range-base-on-values-in-a-vector/80533/3 "2022-05-05T11:47:18Z")

</div>

If you wrap your color range into a [`ColorScheme`](https://juliagraphics.github.io/ColorSchemes.jl/stable/basics/#Make-your-own-colorscheme) object, then the linear interpolation that you need to convert between wealth and color is already implemented:

```julia
julia> using Colors, ColorSchemes

julia> cs = ColorScheme([colorant"yellow", colorant"red"]);

julia> wealth = [1, 12, 45, 2, 129, 10];

julia> colors = get.(Ref(cs), (wealth .- minimum(wealth)) ./ maximum(wealth))
6-element Array{RGB{N0f8},1} with eltype RGB{FixedPointNumbers.N0f8}:
 RGB{N0f8}(1.0,1.0,0.0)
 RGB{N0f8}(1.0,0.914,0.0)
 RGB{N0f8}(1.0,0.659,0.0)
 RGB{N0f8}(1.0,0.992,0.0)
 RGB{N0f8}(1.0,0.008,0.0)
 RGB{N0f8}(1.0,0.929,0.0)

```

---

<div class="post-metadata">

**Author:** ![stevengj](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/stevengj/32/71_2.png) [@stevengj](https://discourse.julialang.org/u/stevengj)\
**Post date:** [May 5, 2022, 1:45pm UTC](https://discourse.julialang.org/t/color-range-pick-color-in-range-base-on-values-in-a-vector/80533/4 "2022-05-05T13:45:26Z")

</div>

> [@ffevotte](#):
>
> the linear interpolation that you need

Note that linear interpolation will yield a colormap that is not perceptually uniform, so it will tend to distort data (see e.g. this [nice video on the design of matplotlib’s color schemes](https://www.youtube.com/watch?v=xAoljeRJ3lU)). You can use the [PerceptualColormaps.jl package](https://github.com/peterkovesi/PerceptualColourMaps.jl) to correct this, for example:

```julia
using Colors, ColorSchemes, PerceptualColourMaps

cs = ColorScheme([colorant"yellow", colorant"red"])
origcolors = get(cs, 0:0.01:1) # linear interpolation, not perceptually uniform

# generate corrected colormap:
rgbdata = equalisecolourmap("RGB", RGBA{Float64}.(origcolors), "CIEDE2000", [1,0,0])
newcolors = [RGB(rgb...) for rgb in eachrow(rgb)]

```

Compare the original linear colormap `origcolors` (top) with the corrected colormap `newcolors` (bottom):

 ![image](https://global.discourse-cdn.com/julialang/original/3X/d/e/dec9b034ab6f895fb931ccb559df698009b9c2ad.png)  
 ![image](https://global.discourse-cdn.com/julialang/original/3X/d/0/d0b263fd1ac42cfc8ea7b5d1ab462fdca99a32ab.png)  
You can see that the original linearly interpolated scheme washes out some of the visual contrast, especially on the red (right) side of the scale.

Then you can create a `ColorScheme` object and do interpolation on it:

```julia
newcs = ColorScheme(newcolors)

wealth = [1, 12, 45, 2, 129, 10]
colors = get(newcs, wealth, :extrema)

```

 ![image](https://global.discourse-cdn.com/julialang/original/3X/2/7/27c01cb0a17f0467620cd99a1fdd252715b1b0e5.png)  
Note that there is no need to do broadcasting: you can do `get(newcs, somearray, :extrema)` rather than `get.(Ref(newcs), normalized_somearray)`, because the ColorSchemes.jl package implements a vectorized `get` method, and by passing `:extrema` as the third argument it will automatically normalize the data (and you can also pass a different normalization).

---

<div class="post-metadata">

**Author:** ![stevengj](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/stevengj/32/71_2.png) [@stevengj](https://discourse.julialang.org/u/stevengj)\
**Post date:** [May 5, 2022, 1:50pm UTC](https://discourse.julialang.org/t/color-range-pick-color-in-range-base-on-values-in-a-vector/80533/5 "2022-05-05T13:50:56Z")

</div>

However, in general I would recommend not designing your own colormaps, because high-quality colormaps are carefully designed to be perceptually uniform, accessible to people with color-vision deficiencies, etc.

For example you might use one of the [“scientific” colormaps](https://www.fabiocrameri.ch/colourmaps/) provided [here in ColorSchemes.jl](https://juliagraphics.github.io/ColorSchemes.jl/stable/catalogue/#scientific), or one of [Matplotlib’s perceptually uniform sequential colormaps](https://matplotlib.org/3.5.0/tutorials/colors/colormaps.html) available [here in ColorSchemes.jl](https://juliagraphics.github.io/ColorSchemes.jl/stable/catalogue/#matplotlib).

---

<div class="post-metadata">

**Author:** ![stevengj](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/stevengj/32/71_2.png) [@stevengj](https://discourse.julialang.org/u/stevengj)\
**Post date:** [May 5, 2022, 1:57pm UTC](https://discourse.julialang.org/t/color-range-pick-color-in-range-base-on-values-in-a-vector/80533/6 "2022-05-05T13:57:40Z")

</div>

By the way, if you run this code in a multimedia-capable environment such as a Jupyter notebook, it displays the colors visually for you:

 ![image](https://global.discourse-cdn.com/julialang/original/3X/2/f/2f34b4d1c0d74c59a503ce7cf856942c850f8aca.png)