Hello everyone! Getting random colors inside Google Earth Engine can be challenging, especially when you are comparing similar features with events like onClick
. If the colors end up similar then the features are easily indistinguishable. While working on a separate project I realised this problem. There are many ways to do this, in this article I will describe two.
Let’s use a boilerplate for testing our methods. Name it random_color_gen
.
// Add the title on which we will test the colors
var mapTitle = ui.Label({
value: 'Lorem ipsum dolor sit amet',
style: {color: 'blue', fontWeight: 'bold', fontSize: '20px'}
});
// Add a description
var mapDesc = ui.Label({
value: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. \
Consequatur dolorem enim animi similique asperiores \
velit ex necessitatibus optio.',
style: {fontSize: '16px'}
});
//Create a button to invoke the test result
var runButton = ui.Button({
label: 'Generate colour',
style: {stretch: 'horizontal'}
});
// Create a panel
var panel = ui.Panel({
layout: ui.Panel.Layout.flow('vertical'),
style: {width: '25%', padding: '10px'}
});
panel.add(mapTitle);
panel.add(mapDesc);
panel.add(runButton);
ui.root.insert(0, panel);
This will create a left panel like this.

Okay, let’s start.
At first let’s add an onClick
event to our runButton
.
var runButton = ui.Button({
label: 'Generate colour',
onClick: function(){
// Here we will create the colors
},
style: {stretch: 'horizontal'}
});
Method 1: Using Math()
function
The colors inside Google Earth Engine require to be #rrggbb
or string format. The idea is to use Math()
function to generate random strings until we create a format similar to #rrggbb
where r
=red, g
=green and b
=blue. We will try this,
Math.floor(Math.random()*16777215).toString(16)
In this line,
Math.random()*16777215
returns a random number between 0 and 16777215Math.floor()
returns the largest integer less than or equal to a given number, means it creates a rounded integer from any decimal valuetoString(16)
finally returns a string of the hexadecimal value
By adding this line to our runButton
we can change colour of the panel title.
var runButton = ui.Button({
label: 'Generate colour',
onClick: function(){
// Here we will create the colors
var aColor = Math.floor(Math.random()*16777215).toString(16)
//print(aColor)
mapTitle.style().set('color', aColor);
},
style: {stretch: 'horizontal'}
});
Save the script and run the code. Use print()
to see what strings are returned by aColor
. But how did I know that 16777215 will create that color? well,
- find a color and the associated hex value from here. I chose ‘white’ (
#ffffff
) - then convert the hex value to decimal. There are many online converters like this
The aColor
creates and holds the string similar to #rrggbb
and is used to assign style()
property of mapTitle
.
Simple.
Method 2: Using a third party library
As you have already noticed the title of our app occasionally creates white colour which makes it impossible to read thanks to the white background. Why not use a third party library called randomColor
(github, I am not associated). This library is amazing; its tiny, creates random shades of same color, uses luminosity and can even create HSL
, HSV
, RGB
and RGBA
color formats. Imagine you want to generate a landcover map, but afraid to end up creating something murky or outlandish like ‘green waterbodies’ or ‘blue forests’. This library using its hue
property will help us keep our color scheme and generate different shades of the same hue. We can of course generate random colors like before without doing maths.
Let’s start. Create a blank file called randomColour
inside Google Earth Engine. Copy all codes from randomColor/randomColor.js
, paste it to randomColour
and save.

We need to import this library into our script. Add this line at the top of random_color_gen
, save and run.
var randomColor = require(‘users/username/your_project:randomColor’)
At first you may see an error in the console saying something about a ‘module
’ not defined. This is because a variable called module
inside our newly created randomColor
is messed up. We will search for this “module
thing” inside randomColor
.

Hmm. Comment out the line 11, 12 and 13 and try running random_color_gen
again. The error should be gone.
Yay!
The variable randomColor
in line 1 of random_color_gen
gives an object which we will turn to a function and set a hue
property. Add these new lines to runButton
, save and run again.
var runButton = ui.Button({
label: 'Generate colour',
onClick: function(){
// Here we will create the colors
var aColor = randomColor.randomColor({hue:'blue'});
mapTitle.style().set('color', aColor);
},
style: {stretch: 'horizontal'}
});
Every new event of the button generates a new shade of blue for the title. Try other colors like red, orange, pink, teal or anything you please. You can also use hex values like #RRGGBB
. You can even change the accent of the hue
by setting luminosity
property to light
, dark
or random
.
There may be similar other libraries, for example PleaseJS, palette.js, gradstop, ee-palettes etc which you may try.
Have fun.
This article is previously published @medium.