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 16777215
  • Math.floor() returns the largest integer less than or equal to a given number, means it creates a rounded integer from any decimal value
  • toString(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 “modulething” 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 hueby 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.