Skip to content

Instantly share code, notes, and snippets.

@juanbrujo
Created July 9, 2014 02:46
Show Gist options
  • Star 10 You must be signed in to star a gist
  • Fork 2 You must be signed in to fork a gist
  • Save juanbrujo/7e4e17428dc8881d0e7e to your computer and use it in GitHub Desktop.
Save juanbrujo/7e4e17428dc8881d0e7e to your computer and use it in GitHub Desktop.
Mixin to generate random color in LESS
.randomColor(){
@randomColor: `Math.floor(Math.random()*16777215).toString(16)`;
@colorHex: e(@randomColor);
@color: ~"#@{colorHex}";
}
// USE
body {
.randomColor();
background-color: @color;
}
@55sketch
Copy link

Hey - I'm trying to use this to create a random colour as a @base, and then create a colour scheme using a series of variables from that, but I keep returning an error 'error evaluating function spin: Object # has no method 'toHSL''.

I guess this is because the hex number only exists once the CSS is compiled. Any ideas how I might achieve this?

@magnusohlin
Copy link

Sometimes the code snippet generates an invalid hex code (with 5 number/letters) Use this instead to fix the issue:

.randomColor() {
  @randomColor: `(Math.random()*0xFFFFFF<<0).toString(16)`;
  @colorHex: e(@randomColor);
  @color: ~"#@{colorHex}";
}

I found the answer in the comment section of this post:
https://css-tricks.com/snippets/javascript/random-hex-color/

@Jogai
Copy link

Jogai commented Jun 13, 2017

This always gives a color:
spin(#F0F, @i*@colorsneeded)

example https://codepen.io/anon/pen/BZzPvL

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment