How do I generate a random hex code that of a lighter color in javascript?

Question

I am using a random color for the background, but since the text is black, when really dark colors are generated, the text can't be seen. How do I exclude these dark colors when generating the hexadecimal code?

I could only figure out how to get this:

Math.floor(Math.random()*16777215).toString(16)

But this does not exclude dark colors. Could someone please help me?

Thank you in advance!

Something that might help you - stackoverflow.com/questions/6187738/… — painotpi
– painotpi, Commented Dec 12, 2012 at 5:39
This one too, it's almost what you want (remove 0 to 8, for example) stackoverflow.com/questions/1484506/… — Diego Basch
– Diego Basch, Commented Dec 12, 2012 at 5:40
You could use a bitwise OR to ensure some of the high bits are always set. Something like c = (Math.floor(Math.random()*0xffffff)|0x0f0f0f).toString(16); — david
– david, Commented Dec 12, 2012 at 5:48

ajax333221 · Accepted Answer · 2012-12-12 07:00:25Z

9

The higher the values, the lighter the color will be, you can try to add a random value to a high number (200 in this case):

var randValue = Math.floor(Math.random()*56)+200; //200 to 255

Note: the maximum HEX value is FF which equals to decimal 255

Then, you can optionally convert these RBG values to HEX using .toString(16), but as far as I know, you can set colors using RBG values.

Here is a jsFiddle Demo

edited Dec 12, 2012 at 7:00

answered Dec 12, 2012 at 5:54

ajax333221

11.9k16 gold badges65 silver badges95 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Deadlock Over a year ago

Accepted answer generates dark colours. This one works perfect. Thanks you VU

KingKongFrog · Accepted Answer · 2012-12-12 05:47:49Z

4

What I would do is generate a number from 00 to FF for each (RGB) (ie 000000 to FFFFFF). I would also make sure the G value is approximately higher than 33.

edited Dec 12, 2012 at 5:47

answered Dec 12, 2012 at 5:41

KingKongFrog

14.5k22 gold badges78 silver badges134 bronze badges

4 Comments

areke Over a year ago

Thanks! I just used this code instead:

(Math.floor((Math.random()*222)+33).toString(16))+(Math.floor((Math.random()*222)+33).toString(16))+(Math.floor((Math.random()*222)+33).toString(16))

Really dark colors are no longer generated... Thank you!

ajax333221 Over a year ago

@areke I think your code produces from decimal 33 to 254. And decimal 33 is 21 HEX. (meaning that you can get #212121 which is pretty dark, it is darker than the text-color of comments here in SO)

KingKongFrog Over a year ago

33 hex is 51 decimal. So just change it to 51 if you are using decimal values.

ajax333221 Over a year ago

@KingKongFrog 33 hex is too low, even 99 hex (or 153 decimal) is very dark, just look how dark they are

Stevie-Ray Hartog · Accepted Answer · 2013-10-31 17:55:56Z

3

random RGB without the numbers 1 & 2, so you get nice colors, done with less code:

var randomColor = (function lol(m, s, c) {
                    return s[m.floor(m.random() * s.length)] +
                        (c && lol(m, s, c - 1));
                })(Math, '3456789ABCDEF', 4);

JSFiddle Demo

edited Oct 31, 2013 at 17:55

answered Oct 31, 2013 at 17:36

Stevie-Ray Hartog

4213 silver badges10 bronze badges

1 Comment

Rob Bajorek Over a year ago

Not bad, though I think some of the colors are still too dark. I'd try it only with ABCDEF.

Collectives™ on Stack Overflow

How do I generate a random hex code that of a lighter color in javascript?

3 Answers 3

1 Comment

4 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

4 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related