Random CSS Color code

Question

This blog post about generating random CSS color codes in JavaScript have multiple solutions for generating a random color in JavaScript. The shortest I can find is this:

'#'+(Math.random()*0xffffff).toString(16).slice(-6)

If you are not familiar with CSS color code read documentations here.

Can we do better? What about other languages?

You can remove the slice by doing this #'+(Math.random()*0xffffff|0).toString(16) — Griffin, Sep 17, 2013 at 10:39
What is the "0xffffff" needed for? I'm not seeing much of a difference in my results without it. — path411, Sep 17, 2013 at 22:18
@path411 Theoretically, Math.random().toString(16) can produce a representation with less than 6 hex-digits after the (hexa)decimal point, in which case the function would break. For example, 0.1658172607421875 becomes 0.2A73 in hex. — primo, Sep 18, 2013 at 8:51

primo · Accepted Answer · 2013-09-17 06:31:09Z

34

PHP 23 bytes

#<?=md5(rand())&ÿÿÿÿÿÿ;

Where ÿ is character 255. Bitwise and will truncate the string returned from md5, which is already in hexadecimal format.

answered Sep 17, 2013 at 6:31

primo

32.7k5 gold badges56 silver badges132 bronze badges

8

\$\begingroup\$ This is one of my favourite solutions on the site. \$\endgroup\$
– Griffin
Sep 17, 2013 at 10:08

Add a comment |

Doorknob · Accepted Answer · 2013-09-17 00:07:42Z

9

Three character codes are valid too, so I can save some chars (4095 == 0xfff):

Ruby, 24 23 22 18

'#%03x'%rand(4095)

If I have to use a 6-char one, then:

Ruby, 28 27 26 24 20

Shaved one character off because 8**8-1 == 0xffffff

'#%06x'%rand(8**8-1)

Thanks to chron for the format string, saving 4 chars!

Cheating (with this xkcd strip in mind):

Ruby/JS/Python/Perl/lots more, 6 (or 5)

"#a83"

I assure you, I generated it randomly!

An even cheatier version:

"red"

edited Sep 17, 2013 at 0:07

answered Sep 16, 2013 at 22:26

Doorknob

70.6k19 gold badges138 silver badges378 bronze badges

\$\begingroup\$ You don't need parentheses for method calls in Ruby, right? \$\endgroup\$
– Mohsen
Sep 16, 2013 at 22:50
\$\begingroup\$ @Mohsen Yes, but Ruby gets confused and thinks I'm calling to_s on 4095 if I omit them. \$\endgroup\$
– Doorknob
Sep 16, 2013 at 22:51
\$\begingroup\$ You can get it down to 20 with a sprintf format string: '#%06x'%rand(8**8-1) \$\endgroup\$
– Paul Prestidge
Sep 17, 2013 at 0:04
\$\begingroup\$ @chron Nice, thanks! Editing \$\endgroup\$
– Doorknob
Sep 17, 2013 at 0:05

Add a comment |

ashleedawg · Accepted Answer · 2019-12-11 21:03:58Z

8

Javascript

'#'+Math.random().toString(16).substr(2,6)

Just a little shorter at 42.

function randomColor() {
  return '#' + Math.random().toString(16).substr(2, 6);
}

for (var n = 0; n < 16*9; n++) {
  var el = document.createElement('SPAN');
  el.style.backgroundColor = randomColor();
  document.getElementById('demo').appendChild(el);
}

span { width: calc(100%/16); 
       height: calc(100vh/9);
       margin-top: -7px; 
       display: inline-block;
     }

<div id='demo'></div>

edited Dec 11, 2019 at 21:03

ashleedawg

1035 bronze badges

answered Sep 16, 2013 at 23:37

tristin

3192 silver badges6 bronze badges

1

\$\begingroup\$ I'm not sure why this was downvoted. It works fine in every browser I've tested. +1 \$\endgroup\$
– primo
Sep 17, 2013 at 6:11
10

\$\begingroup\$ #'+Math.random().toString(16).slice(-6) \$\endgroup\$
– Mohsen
Sep 17, 2013 at 22:30
\$\begingroup\$ @Mohsen nice! Didn't know slice could do negatives. \$\endgroup\$
– tristin
Sep 18, 2013 at 1:08

Add a comment |

Cruncher · Accepted Answer · 2013-11-05 20:22:03Z

Fish 79

vnnnnnnnn 
601234567;
>xxxxxxxx<
 89""""""?
 nnABCDEF:
 vv""""""-
 vvoooooo1
 >>>>>>>>^

Not the shortest solution in the world, but it was fun to code :)

It's also not a uniform distribution, but all outputs have a non-zero probability 7 and F are most likely digits.

Outputs:

python fish.py randomColor.fish
07FFF7

python fish.py randomColor.fish
07EFD7

python fish.py randomColor.fish
366F67

python fish.py randomColor.fish
977FD7

python fish.py randomColor.fish
97F7F7

python fish.py randomColor.fish
87F6FF

GMills · Accepted Answer · 2021-06-02 20:59:52Z

4

PowerShell, 28 24 bytes

-4 bytes thanks to @Julian!

"#{0:X6}"-f(random 16MB)

Try it online!

edited Jun 2, 2021 at 20:59

answered Jun 1, 2021 at 16:48

GMills

9567 silver badges14 bronze badges

\$\begingroup\$ You can omit the -ma as it is implicit and save 4 bytes \$\endgroup\$
– Julian
Jun 2, 2021 at 2:55

Add a comment |

emanresu A · Accepted Answer · 2021-07-15 08:55:18Z

4

Vyxal `Ṫ`, 8 7 bytes

\#k66ƈṅ

Try it Online!

\#      # Push a #
    6ƈ  # Choose six...
  k6    # Hex digits
      ṅ # Appended to the #

edited Jul 15, 2021 at 8:55

answered Jul 15, 2021 at 7:06

emanresu A

32k4 gold badges68 silver badges182 bronze badges

\$\begingroup\$ You can outsource a byte to a flag using this method: Try it Online! \$\endgroup\$
– Underslash
Jul 15, 2021 at 8:45
\$\begingroup\$ @Underslash Nice, thanks! \$\endgroup\$
– emanresu A
Jul 15, 2021 at 8:52

Add a comment |

marinus · Accepted Answer · 2013-11-06 07:34:17Z

2

APL (17)

'#',(⎕D,⎕A)[6?16]

Explanation:

6?16: 6 random numbers from 1 to 16
⎕D,⎕A: the digits (0..9) followed by the alphabet (A..Z) (but only the first 16 values are ever used, i.e. 0..F)
'#',: add a # to the front

answered Nov 6, 2013 at 7:34

marinus

31.1k6 gold badges68 silver badges112 bronze badges

\$\begingroup\$ 6?16 is 6 non-repeating random values though, that narrows the colorspace a bit... \$\endgroup\$
– mniip
Feb 17, 2014 at 15:27
\$\begingroup\$ @mniip Yeah, it should be ?6⍴16 instead. \$\endgroup\$
– Adám
Sep 27, 2021 at 0:08

Add a comment |

pxeger · Accepted Answer · 2021-06-01 13:47:55Z

2

Zsh, 37 bytes

<<<\#`tr -dc 0-9a-f</*/ur*m|head -c6`

Try it online!

</*/ur*m: input from /dev/urandom (shortened with wildcards)
tr -dc 0-9a-f: keep only characters in the range 0-9a-f
head -c6: take the first 6 characters
<<<#``: prepend # and print

answered Jun 1, 2021 at 13:47

pxeger

22.6k4 gold badges48 silver badges127 bronze badges

Add a comment |

Jakque · Accepted Answer · 2021-06-01 14:59:45Z

2

Python 3, 44 bytes

from secrets import*
print("#"+token_hex(3))

Try it online!

Did you know this built-in python module? It was added in python 3.6 to include some random function for paswords (more informations here).

How it works ?

Basicaly, I generate a random 3-bytes long hexadecimal string ... Yeah, that's it.

Python 2, 32 31 bytes

I also have the slightly less elegant : (also works in Python3 in 34 33 bytes by adding parenthesis for the print function)

print"#%06x"%((id(0)>>16)%8**8)

Try it online!

This one uses the fact that at each execution of the code, python uses an indivdual memory address for each object. This memeory address change at each execution of the program. As the last 16 bits of this id are not random, I shifted the result before using a modulo to have the right number of bits

Thanks to pxeger for -1 bytes

edited Jun 1, 2021 at 14:59

answered Jun 1, 2021 at 13:39

Jakque

2,3884 silver badges12 bronze badges

1

\$\begingroup\$ You can use id(0) for -1 byte, though I'm not sure relying on ASLR alone is necessarily a valid random source. (Python doesn't "assign an id number", it uses the memory address of the object, which is assigned by the kernel, and is typically only a bit random, so it's really only suitable for seeding a PRNG) \$\endgroup\$
– pxeger
Jun 1, 2021 at 13:51
\$\begingroup\$ @pxeger I don't know if it is a valid random source, but it seems that it choose evenly a number on the wanted interval at each execution. As I saw the same trick on other problems using random, I thought I could use it here. Otherwise I have also my first solution :p \$\endgroup\$
– Jakque
Jun 1, 2021 at 15:09

Add a comment |

xigoi · Accepted Answer · 2021-06-01 20:01:32Z

2

Vyxal `Ṫ`, 7 bytes

\#6(k6℅

Try it Online!

Explanation

\#6(k6℅
\#      Push "#"
   (    For _
  6     in range(6):
    k6    "0123456789abcdef"
      ℅   Random item

Ṫ Concatenate the stack

answered Jun 1, 2021 at 20:01

xigoi

5,8081 gold badge7 silver badges18 bronze badges

Add a comment |

Ivar Matstoms · Accepted Answer · 2021-09-28 13:57:07Z

2

Python 3, 32 bytes

print(f"{hash('a'):x}#"[:-8:-1])

answered Sep 28, 2021 at 13:57

Ivar Matstoms

812 bronze badges

Add a comment |

raspi · Accepted Answer · 2014-02-17 15:11:38Z

1

Bash (51)

od -N4 -An -tx /dev/urandom | cut -c2-7 | sed s/^/#/

answered Feb 17, 2014 at 15:11

raspi

1292 bronze badges

Add a comment |

Matthew Jensen · Accepted Answer · 2019-12-11 23:21:03Z

1

Python 3, 53 bytes

from random import*;print(f"#{randint(0,16**6):06x}")

Try it online!

answered Dec 11, 2019 at 23:21

Matthew Jensen

2,1373 silver badges23 bronze badges

Add a comment |

Wasif · Accepted Answer · 2021-06-01 09:48:17Z

1

+100

Python 3, 50 bytes

import time
print(f"#{int(time.time()%16**6):6x}")

Try it online!

Random generation by modulo of current time saves two precious bytes

Also 0 before 06x can be omitted

answered Jun 1, 2021 at 9:48

Wasif

12k1 gold badge15 silver badges45 bronze badges

1

\$\begingroup\$ using f"{i:6x} will give leading spaces instead of 0 when i is less than 6 digits long in hexadecimal. You should instead use the format f"{i:06x}. But you also can gain 1 byte by replacing 16**6 by 8**8 an 2 bytes using "%06x"%i instead using the previous f-string syntax : Try it online! \$\endgroup\$
– Jakque
Jun 1, 2021 at 10:13

Add a comment |

xigoi · Accepted Answer · 2021-06-01 19:50:17Z

1

Nim, 57 bytes

import colors,random
randomize()
echo 0xffffff.rand.Color

Try it online!

answered Jun 1, 2021 at 19:50

xigoi

5,8081 gold badge7 silver badges18 bronze badges

Add a comment |

xigoi · Accepted Answer · 2021-06-01 20:09:14Z

1

Jelly, 9 bytes

6ØhX¤€”#;

Try it online!

Explanation

6ØhX¤€”#;   Main niladic link
6           6
     €      Map
    ¤       (
 Øh           "0123456789abcdef"
   X          Choose random
    ¤       )
        ;   Prepend
      ”#      "#"

edited Jun 1, 2021 at 20:09

answered Jun 1, 2021 at 19:56

xigoi

5,8081 gold badge7 silver badges18 bronze badges

Add a comment |

MarcMush · Accepted Answer · 2021-06-02 21:18:35Z

1

Julia 1.0, 24 bytes

'#'repr(rand(UInt))[3:8]

Try it online!

edited Jun 2, 2021 at 21:18

answered Jun 2, 2021 at 21:12

MarcMush

5,0558 silver badges14 bronze badges

Add a comment |

Shaggy · Accepted Answer · 2021-07-15 08:47:38Z

1

Japt `-P`, 11 bytes

Gö6 msG i'#

Test it

answered Jul 15, 2021 at 8:47

Shaggy

36k4 gold badges30 silver badges89 bronze badges

Add a comment |

0xff · Accepted Answer · 2021-09-28 15:03:34Z

1

Java (JDK), 54 bytes

n->"#"+Long.toHexString((int)(Math.random()*0xffffff))

Try it online!

answered Sep 28, 2021 at 15:03

0xff

7994 silver badges12 bronze badges

Add a comment |

ntrupin · Accepted Answer · 2021-09-30 03:17:13Z

1

Mathematica, 30 bytes

0xfff == 4095, so we can just take a random integer from 0-4095 and convert it to hexadecimal form. We save a few characters using prefix and infix notation.

RandomInteger@4095~BaseForm~16

Try it online!

answered Sep 30, 2021 at 3:17

ntrupin

1412 bronze badges

Add a comment |

cnamejj · Accepted Answer · 2021-09-30 06:26:37Z

Ly, 29 26 bytes

'#o6['0'??'9G[p'(+,0]po,]p

Try it online!

At a high level, here's how this one works...

write out #
loop 6 times...
each iteration, write out a random digit in 0-f range

And for people who like gory details about stacks. :)

'#o6['0'??'9G[p'(+,0]po,]p
'#o                        - push "#" on stack, print it as char
   6[                  ,]  - loop 6 times
     '0'?                  - push "0" and "?" codepoints on stack
         ?                 - pick a random number between them
          '9G              - is it greater then "9" codepoint?
             [p    0]p     - if/then, called if pick is > "9"
               '(          - push 28 on stack (Note 1)
                 +         - add 28 to random pick (Note 1)
                  ,        - decrement (Note 1)
                      o    - print top of stack as a char
                         p - clear the loop artifact from the stack

Note 1: Mapping the codepoints :-? to a-f means adding 27 to the codepoint. The shortest way to do that would be to push ' onto the stack, but the code for that (at least on TIO) '' doesn't work. So this code loads 28 (which is ( then decrements the result with , instead.

score 1 · Accepted Answer · 2021-10-06 21:12:46Z

1

C (tcc), 46 43 bytes

-3 bytes, thanks @ceilingcat

main(){srand(main);printf("#%08X",rand());}

Try it online!

4 byte color codes are valid, the last byte is used as alpha.
C is weird with random numbers because of how old it is. While the code above is technically a valid answer, it does a really bad job because different compilers treat rand() differently and often use a suboptimal generator, in addition to not actually guaranteeing every possible color. Importing a better library for generation isn't exactly a good idea for Code Golf though.

edited Oct 6, 2021 at 21:12

answered Sep 29, 2021 at 21:00

user99404

\$\begingroup\$ 42 bytes \$\endgroup\$
– ceilingcat
Oct 10, 2021 at 8:28

Add a comment |

roblogic · Accepted Answer · 2021-10-08 03:03:38Z

0

Zsh (coreutils), 26 bytes

Using jot, originally in BSD Unix. Try it Online.

jot -w\#%x -r 1 0 16777216

edited Oct 8, 2021 at 3:03

answered Oct 8, 2021 at 2:05

roblogic

1,32911 silver badges14 bronze badges

Add a comment |

TangyTongs · Accepted Answer · 2021-10-08 07:43:49Z

0

Red, 18 bytes

random 255.255.255

answered Oct 8, 2021 at 7:43

TangyTongs

1

4

\$\begingroup\$ I don't think it gives the number in hexadecimal or adds # to the front. \$\endgroup\$
– Bubbler
Oct 8, 2021 at 7:52
\$\begingroup\$ Welcome to the site. Can you provide some way to test this? As Bubbler pointed out it looks like it doesn't work. \$\endgroup\$
– Wheat Wizard ♦
Oct 8, 2021 at 9:23

Add a comment |

Gotoro · Accepted Answer · 2021-10-08 13:17:25Z

0

Python 3.8 (pre-release), 43 bytes

from os import*
print("#"+urandom(3).hex())

Try it online!

1 byte less than current top Python 3 sol by @Jakque, as I don't think that one by @Ivar Matstoms is fair

answered Oct 8, 2021 at 13:17

Gotoro

1497 bronze badges

Add a comment |

Stack Exchange Network

Random CSS Color code

25 Answers 25

PHP 23 bytes

Ruby, 24 23 22 18

Ruby, 28 27 26 24 20

Ruby/JS/Python/Perl/lots more, 6 (or 5)

Javascript

Fish 79

PowerShell, 28 24 bytes

Vyxal `Ṫ`, 8 7 bytes

APL (17)

Zsh, 37 bytes

Python 3, 44 bytes

How it works ?

Python 2, 32 31 bytes

Vyxal `Ṫ`, 7 bytes

Explanation

Python 3, 32 bytes

Bash (51)

Python 3, 53 bytes

Python 3, 50 bytes

Nim, 57 bytes

Jelly, 9 bytes

Explanation

Julia 1.0, 24 bytes

Japt `-P`, 11 bytes

Java (JDK), 54 bytes

Mathematica, 30 bytes

Ly, 29 26 bytes

C (tcc), 46 43 bytes

Zsh (coreutils), 26 bytes

Red, 18 bytes

Python 3.8 (pre-release), 43 bytes

Your Answer

Not the answer you're looking for? Browse other questions tagged
code-golf
random
css
or ask your own question.

Linked

Hot Network Questions

Random CSS Color code

25 Answers 25

PHP 23 bytes

Ruby, 24 23 22 18

Ruby, 28 27 26 24 20

Ruby/JS/Python/Perl/lots more, 6 (or 5)

Javascript

Fish 79

PowerShell, 28 24 bytes

Vyxal Ṫ, 8 7 bytes

APL (17)

Zsh, 37 bytes

Python 3, 44 bytes

How it works ?

Python 2, 32 31 bytes

Vyxal Ṫ, 7 bytes

Explanation

Python 3, 32 bytes

Bash (51)

Python 3, 53 bytes

Python 3, 50 bytes

Nim, 57 bytes

Jelly, 9 bytes

Explanation

Julia 1.0, 24 bytes

Japt -P, 11 bytes

Java (JDK), 54 bytes

Mathematica, 30 bytes

Ly, 29 26 bytes

C (tcc), 46 43 bytes

Zsh (coreutils), 26 bytes

Red, 18 bytes

Python 3.8 (pre-release), 43 bytes

Your Answer

Sign up or log in

Post as a guest

Not the answer you're looking for? Browse other questions tagged code-golfrandomcss or ask your own question.

Linked

Related

Hot Network Questions

Vyxal `Ṫ`, 8 7 bytes

Vyxal `Ṫ`, 7 bytes

Japt `-P`, 11 bytes

Not the answer you're looking for? Browse other questions tagged
code-golf
random
css
or ask your own question.