UI Color Gradients

Source Notebook

Community contributed collection of beautiful multi-color gradients from uiGradients

Details

The data is imported from uigradients.com and formatted for the Wolfram Language.
The default content is an Association of names and color gradients.
Additional content elements include:
"Names"list of all color names
"Colors"list of all color gradients

Examples

Basic Examples

Retrieve the data:

In[1]:=
ResourceData[\!\(\*
TagBox["\"\<UI Color Gradients\>\"",
#& ,
BoxID -> "ResourceTag-UI Color Gradients-Input",
AutoDelete->True]\)] // Short
Out[1]=

Apply a purple gradient filling to a rectangle:

In[2]:=
Graphics[{LinearGradientFilling[ResourceData[\!\(\*
TagBox["\"\<UI Color Gradients\>\"",
#& ,
BoxID -> "ResourceTag-UI Color Gradients-Input",
AutoDelete->True]\)]["Purple"]], RegularPolygon[4]}]
Out[2]=

Fill from a curve to the axis:

In[3]:=
Plot[2 Sin[x] + x, {x, 0, 15}, FillingStyle -> LinearGradientFilling[ResourceData[\!\(\*
TagBox["\"\<UI Color Gradients\>\"",
#& ,
BoxID -> "ResourceTag-UI Color Gradients-Input",
AutoDelete->True]\)]["Neon Green"], Top], Filling -> Bottom]
Out[3]=

Scope & Additional Elements

Get the list of all color names:

In[4]:=
ResourceData[\!\(\*
TagBox["\"\<UI Color Gradients\>\"",
#& ,
BoxID -> "ResourceTag-UI Color Gradients-Input",
AutoDelete->True]\), "Names"] // Short
Out[4]=

Get the list of all color gradients:

In[5]:=
ResourceData[\!\(\*
TagBox["\"\<UI Color Gradients\>\"",
#& ,
BoxID -> "ResourceTag-UI Color Gradients-Input",
AutoDelete->True]\), "Colors"] // Short
Out[5]=

Gradient Fillings

Use LinearGradientFilling to apply a linear gradient filling of the US map:

In[6]:=
colors = ResourceData[\!\(\*
TagBox["\"\<UI Color Gradients\>\"",
#& ,
BoxID -> "ResourceTag-UI Color Gradients-Input",
AutoDelete->True]\)]["Cool Sky"]
Out[6]=
In[7]:=
GeoGraphics[{LinearGradientFilling[colors], Polygon[\!\(\*
NamespaceBox["LinguisticAssistant",
DynamicModuleBox[{WolframAlphaClient`Private`query$$ = "United States", WolframAlphaClient`Private`boxes$$ = TemplateBox[{"\"United States\"", 
RowBox[{"Entity", "[", 
RowBox[{"\"Country\"", ",", "\"UnitedStates\""}], "]"}], "\"Entity[\\\"Country\\\", \\\"UnitedStates\\\"]\"", "\"country\""}, "Entity"], WolframAlphaClient`Private`allassumptions$$ = {}, WolframAlphaClient`Private`assumptions$$ = {}, WolframAlphaClient`Private`open$$ = {1, 2}}, 
DynamicBox[ToBoxes[
AlphaIntegration`LinguisticAssistantBoxes["", 1, 
Dynamic[WolframAlphaClient`Private`query$$], 
Dynamic[WolframAlphaClient`Private`boxes$$], 
Dynamic[WolframAlphaClient`Private`allassumptions$$], 
Dynamic[WolframAlphaClient`Private`assumptions$$], 
Dynamic[WolframAlphaClient`Private`open$$]], StandardForm],
ImageSizeCache->{182.25, {8.125, 17.125}},
TrackedSymbols:>{WolframAlphaClient`Private`query$$, WolframAlphaClient`Private`boxes$$, WolframAlphaClient`Private`allassumptions$$, WolframAlphaClient`Private`assumptions$$, WolframAlphaClient`Private`open$$}],
DynamicModuleValues:>{},
UndoTrackedVariables:>{WolframAlphaClient`Private`open$$}],
BaseStyle->{"Deploy"},
DeleteWithContents->True,
Editable->False,
SelectWithContents->True]\)]}]
Out[7]=

Use ConicGradientFilling to style a sector chart:

In[8]:=
colors = ResourceData[\!\(\*
TagBox["\"\<UI Color Gradients\>\"",
#& ,
BoxID -> "ResourceTag-UI Color Gradients-Input",
AutoDelete->True]\)]["Omolon"]
Out[8]=
In[9]:=
SectorChart[Tuples[{1, 2}, 2], ChartStyle -> ConicGradientFilling[colors, ImageScaled[{0.5, 0.5}]], Sequence[
 PolarGridLines -> Automatic, PolarAxes -> Automatic, PolarTicks -> {0, 60 Degree, 120 Degree, 240 Degree, 300 Degree}, SectorOrigin -> 0]]
Out[9]=

Apply a RadialGradientFilling to a rectangle:

In[10]:=
colors = ResourceData[\!\(\*
TagBox["\"\<UI Color Gradients\>\"",
#& ,
BoxID -> "ResourceTag-UI Color Gradients-Input",
AutoDelete->True]\)]["After the Rain"]
Out[10]=
In[11]:=
Graphics[{RadialGradientFilling[colors, {{0.05, 0}, {1, 1.1}}], RegularPolygon[4]}]
Out[11]=

Wolfram Research, "UI Color Gradients" from the Wolfram Data Repository (2021)  

License Information

https://raw.githubusercontent.com/ghosh/uiGradients/master/LICENSE.md

Data Resource History

Source Metadata

Data Downloads

Publisher Information