Get only light colors randomly using JavaScript

Question

Below is my code that shows all types of color like dark blue,light blue,dark pink,light pink etc. But I want to get only light colors using JavaScript. Is it possible?

function getRandomColor() {
    var letters = '0123456789ABCDEF'.split('');
    var color = '#';
    for (var i = 0; i < 6; i++ ) {
        color += letters[Math.floor(Math.random() * 16)];
    }
    return color;
}

How can I do it? Thank you.

possible duplicate of [How to generate light colour shades in javascript](http://stackoverflow.com/questions/11225050/how-to-generate-light-colour-shades-in-javascript) — adeneo, May 12 '14 at 05:53

score 35 · Answer 1 · edited Jun 20 '20 at 09:12

35

You can also use HSL colors.

HSL stands for hue, saturation, and lightness - and represents a cylindrical-coordinate representation of colors.

An HSL color value is specified with: hsl(hue, saturation, lightness).

Hue is a degree on the color wheel (from 0 to 360) - 0 (or 360) is red, 120 is green, 240 is blue. Saturation is a percentage value; 0% means a shade of gray and 100% is the full color. Lightness is also a percentage; 0% is black, 100% is white.

function getRandomColor() {
  color = "hsl(" + Math.random() * 360 + ", 100%, 75%)";
  return color;
}

edited Jun 20 '20 at 09:12

Community

1
1

answered May 12 '14 at 07:57

Kruga

721
5
18

1

Excellent answer. Worked great for me because I was also wanting to avoid white and grey. – Xandor May 04 '19 at 18:59
Yeah, this is exactly what I was looking for, light colors other than white and grey. Works perfect – David Chopin Nov 14 '19 at 02:35

Aliendroid · Accepted Answer · 2014-05-13T02:35:21.350

33

you can do so by cutting the string off forcing the random to be high number in HEX

      function getRandomColor() {
                var letters = 'BCDEF'.split('');
                var color = '#';
                for (var i = 0; i < 6; i++ ) {
                    color += letters[Math.floor(Math.random() * letters.length)];
                }
                return color;
            }

quick dirty way

edited May 13 '14 at 02:35

answered May 12 '14 at 05:48

Aliendroid

515
3
9

2

what I did was, I added an extra '66' at end of the RGB color and made it RGBA so every color becomes light on its own :-) – Mohammad Mahroz Feb 16 '18 at 18:28

score 5 · Answer 3 · answered May 12 '14 at 05:47

5

A small improvement:

function getRandomColor() {
  return 'rgb(' + 
    (Math.floor(Math.random()*56)+200) + ', ' +
    (Math.floor(Math.random()*56)+200) + ', ' +
    (Math.floor(Math.random()*56)+200) +
    ')';
}

answered May 12 '14 at 05:47

Naman Goel

1,525
11
16

score 1 · Answer 4 · answered Jan 22 '23 at 12:00

const generateRandomLightColor = () => {
    const red = Math.floor(Math.random() * 255)
    const green = Math.floor(Math.random() * 255)
    const blue = Math.floor(Math.random() * 255)
    const opacity = 0.5
    return `rgba(${red}, ${green}, ${blue}, ${opacity})`
}

score 0 · Answer 5 · answered Jul 13 '21 at 10:03

function getRandomInt(min, max) {
    min = Math.ceil(min);
    max = Math.floor(max);
    return Math.floor(Math.random() * (max - min + 1)) + min;
}

function getRandomColor() {
  return Array.from({length: 3}, ii=>Math.floor(getRandomInt(130, 240)));
}

Get only light colors randomly using JavaScript

5 Answers5