# How to create circular color gradient plot?

**URL:** <https://discourse.julialang.org/t/how-to-create-circular-color-gradient-plot/102301>\
**Category:** Visualization\
**Tags:** makie\
**Created:** [July 31, 2023, 11:27am UTC](https://discourse.julialang.org/t/how-to-create-circular-color-gradient-plot/102301 "2023-07-31T11:27:04Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![vladdez](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/vladdez/32/45806_2.png) [@vladdez](https://discourse.julialang.org/u/vladdez)\
**Post date:** [July 31, 2023, 11:27am UTC](https://discourse.julialang.org/t/how-to-create-circular-color-gradient-plot/102301/1 "2023-07-31T11:27:04Z")

</div>

I see a lot of examples how to do it in Python, but no example how to do it in Julia Makie.

> **[How to make circular color gradient in Python? \[SOLVED\] | GoLinuxCloud](https://www.golinuxcloud.com/how-to-make-circular-color-gradient-in-python/)**
>
> A color gradient is a way to smoothly transition between two or more colors. A circular gradient is a type of color gradient that transitions in a circular

What should I use, mash?

---

<div class="post-metadata">

**Author:** ![sdanisch](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/sdanisch/32/1406_2.png) [@sdanisch](https://discourse.julialang.org/u/sdanisch)\
**Post date:** [July 31, 2023, 12:49pm UTC](https://discourse.julialang.org/t/how-to-create-circular-color-gradient-plot/102301/2 "2023-07-31T12:49:45Z")

</div>

We currently don’t have a circular gradient, but I think it has been requested before…  
What do you want to achieve? Right now you will need to use a Mesh, to emulate it, e.g. like this:

```julia
using GLMakie, LinearAlgebra

cmap = to_colormap(:viridis)
function color(i, j)
    distance_01 = norm(Point2f(i, j)) / sqrt(2)
    return Makie.interpolated_getindex(cmap, distance_01, (0, 1))
end

colors = [color(i, j) for i in -1:0.1:1, j in -1:0.1:1]

mesh(Rect2f(0, 0, 1, 1); color=colors, shading=false)

```

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

---

<div class="post-metadata">

**Author:** ![vladdez](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/vladdez/32/45806_2.png) [@vladdez](https://discourse.julialang.org/u/vladdez)\
**Post date:** [July 31, 2023, 12:55pm UTC](https://discourse.julialang.org/t/how-to-create-circular-color-gradient-plot/102301/3 "2023-07-31T12:55:08Z")

</div>

Hello!  
Thank you very much for your answer!  
I would like to recreate this picture: at least e and h.

 ![image](https://global.discourse-cdn.com/julialang/original/3X/e/0/e0c15a491bd80808e8c267b394772177c76a1aa3.png)

---

<div class="post-metadata">

**Author:** ![vladdez](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/vladdez/32/45806_2.png) [@vladdez](https://discourse.julialang.org/u/vladdez)\
**Post date:** [July 31, 2023, 1:11pm UTC](https://discourse.julialang.org/t/how-to-create-circular-color-gradient-plot/102301/4 "2023-07-31T13:11:31Z")

</div>

offtop, but also important  
Is there a Kindlmann colormap in Julia?  
[https://www.kennethmoreland.com/color-advice/](https://www.kennethmoreland.com/color-advice/)

---

<div class="post-metadata">

**Author:** ![jules](https://avatars.discourse-cdn.com/v4/letter/j/41988e/32.png) [@jules](https://discourse.julialang.org/u/jules)\
**Post date:** [July 31, 2023, 2:50pm UTC](https://discourse.julialang.org/t/how-to-create-circular-color-gradient-plot/102301/5 "2023-07-31T14:50:55Z")

</div>

don’t think so, might be a good PR to colorschemes?

---

<div class="post-metadata">

**Author:** ![empet](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/empet/32/221303_2.png) [@empet](https://discourse.julialang.org/u/empet)\
**Post date:** [July 31, 2023, 6:17pm UTC](https://discourse.julialang.org/t/how-to-create-circular-color-gradient-plot/102301/6 "2023-07-31T18:17:26Z")

</div>

I succeeded to reproduce the first circular color gradient, and plot it with PlotlyJS:

```julia
using PlotlyJS
mycolors = ["#ff0000", "#ffff00", "#00ff00", "#00ffff", "#0000ff", "#ff00ff", "#ff0000"]
cmap =[[k/6, c] for (k, c) in zip(0:6, mycolors)];
xl=yl= range(-1, 1, 100)
x = ones(length(yl)) * xl'; y= yl* ones(length(xl))';
z =@. √(x^2 +y^2)
plt=Plot(heatmap(z=z, colorscale=cmap, showscale=false),
         Layout(width=350, height=350, xaxis_visible=false, yaxis_visible=false))

```

![circular-cmap](https://global.discourse-cdn.com/julialang/original/3X/6/1/6126c4044061daf83467c184fae0b1373900fb1a.png)  
Changing the hexcolors in mycolors you can get another colo gradient. But by the nowadays standards for colorschemes, this is a bad gradient, because it exhibits bands.  
Replacing `colorscale=cmap`, by `colorscale=reverse(colors.turbo)` (i.e. using google turbo colormap, as an improved version of jet/rainbow colormap) we get a better circular color gradient:  
 ![circular-turbo](https://global.discourse-cdn.com/julialang/original/3X/1/a/1a37242f6ebf62e1b4f0b6e4eca6a5c00412139d.png)  
or `colorscale=reverse(colors.curl)` (curl is a cmocean diverging colorscheme):  
 ![circular-rev-curl](https://global.discourse-cdn.com/julialang/original/3X/b/3/b3da1226ee7edefca7a028243a6d8b711e2345ac.png)

LE: to get the plot (h) define the kinglman colormao as follows:

```julia
kmancolors= ["rgb(255, 255, 255)",
             "rgb(252, 220, 200)",
             "rgb(205, 205, 10)",
             "rgb(97, 193, 9)",
             "rgb(15, 168, 8)",
             "rgb(7, 137, 66)",
             "rgb(5, 105, 105)",
             "rgb(7, 69, 142)",
             "rgb(24, 8, 163)",
             "rgb(39, 4, 82)",
             "rgb(0,0,0)"]
kman_cmap=[[k/(length(kmancolors)-1), c] for (k,c) in zip(0:(length(kmancolors)-1), kmancolors)]

```

and set `colorscale=kman_cmap`:  
 ![kinglmancmap](https://global.discourse-cdn.com/julialang/original/3X/c/3/c30ce38106d08cc763e1c889571c2011b518c6e6.png)

---

<div class="post-metadata">

**Author:** ![joa-quim](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/joa-quim/32/227_2.png) [@joa-quim](https://discourse.julialang.org/u/joa-quim)\
**Post date:** [August 1, 2023, 11:55am UTC](https://discourse.julialang.org/t/how-to-create-circular-color-gradient-plot/102301/7 "2023-08-01T11:55:57Z")

</div>

With GMT.jl this should be a one liner but I’m not at a computer to confirm. See background images example in [Subplots](https://www.generic-mapping-tools.org/GMTjl_doc/examples/subplot/01_subplots/#background_images)