CODEWITHSUNDEEP
javascripthtml
user3081140
user3081140

Reputation: 23

display hex of random colour selected

I'm building a random background colour picker just for fun.

Very simply.. as you click a button the page refreshes and a background colour is selected from an array of a few different colours.

Now what I'd like to do is I'd like to display the hex of the current colour in plain html and I'm really new to JS so I have no clue how to do this. Could anyone help me out please?

Here's my code:

<script>
   var bgcolorlist=new Array("#F70000","#B9264F","#990099","#74138C","#0000CE","#1F88A7","#4A9586","#FF2626","#D73E68","#B300B3","#8D18AB","#5B5BFF","#25A0C5","#5EAE9E","#FF5353","#DD597D","#CA00CA","#A41CC6","#7373FF","#29AFD6","#74BAAC","#FF7373","#E37795","#D900D9","#BA21E0","#8282FF","#4FBDDD","#8DC7BB","#FF8E8E","#E994AB","#FF2DFF","#CB59E8","#9191FF","#67C7E2","#A5D3CA","#FFA4A4","#EDA9BC","#F206FF","#CB59E8","#A8A8FF","#8ED6EA","#C0E0DA","#FFB5B5","#F0B9C8","#FF7DFF","#D881ED","#B7B7FF","#A6DEEE","#CFE7E2","#FFC8C8","#F4CAD6","#FFA8FF","#EFCDF8","#C6C6FF","#C0E7F3","#DCEDEA","#FFEAEA","#F8DAE2","#FFC4FF","#EFCDF8","#DBDBFF","#D8F0F8","#E7F3F1")
   document.body.style.background=bgcolorlist[Math.floor(Math.random()*bgcolorlist.length)]
</script>

<form><input type=button value="click here forever" onClick="window.location.reload()"></form> 
<center>
<p>This colour is:  </p>
</div>

Upvotes: 2

Views: 128

Answers (5)

Igl3
Igl3

Reputation: 5108

First you need to get the color of the body, this you can achieve by: 

var bgColor = window.getComputedStyle(document.body,null).getPropertyValue('background-color');

which returns you a string like "rgb(170,170,170)"

Then you need to parse and convert this String:

//regular expression which returns an array with your 3 decimal values for rgb
var res = bgColor.toString().match(/[0-9]{3}/g);

//this converts a decimal to hex
function componentToHex(c) {
    var hex = parseInt(c).toString(16);  
    return (hex.length < 2) ? "0" + hex : hex;  
}

//this concatenates the new string
function rgbToHex(a, b, c) {
    return "#" + componentToHex(a) + componentToHex(b) + componentToHex(c);
}

//Then you can call it by
var x = rgbToHex(res[0],res[1],res[2]);

This x you can then append to your Span after you gave it an id and got it with document.getElementById()

And here an Example Fiddle

Upvotes: 0

Sridhar R
Sridhar R

Reputation: 20418

Try this

HTML

<p>This colour is:  <b id="resu"></b></p>

In Jquery

var image = new Array ("#F70000","#B9264F","#990099","#74138C","#0000CE","#1F88A7","#4A9586","#FF2626","#D73E68","#B300B3","#8D18AB","#5B5BFF","#25A0C5","#5EAE9E","#FF5353","#DD597D","#CA00CA","#A41CC6","#7373FF","#29AFD6","#74BAAC","#FF7373","#E37795","#D900D9","#BA21E0","#8282FF","#4FBDDD","#8DC7BB","#FF8E8E","#E994AB","#FF2DFF","#CB59E8","#9191FF","#67C7E2","#A5D3CA","#FFA4A4","#EDA9BC","#F206FF","#CB59E8","#A8A8FF","#8ED6EA","#C0E0DA","#FFB5B5","#F0B9C8","#FF7DFF","#D881ED","#B7B7FF","#A6DEEE","#CFE7E2","#FFC8C8","#F4CAD6","#FFA8FF","#EFCDF8","#C6C6FF","#C0E7F3","#DCEDEA","#FFEAEA","#F8DAE2","#FFC4FF","#EFCDF8","#DBDBFF","#D8F0F8","#E7F3F1");
var size = image.length
var x = Math.floor(size*Math.random())

$('body').css('background-color',image[x]);
$('#resu').text(image[x]);

In Javascript

var bgcolorlist=new Array("#F70000","#B9264F","#990099","#74138C","#0000CE","#1F88A7","#4A9586","#FF2626","#D73E68","#B300B3","#8D18AB","#5B5BFF","#25A0C5","#5EAE9E","#FF5353","#DD597D","#CA00CA","#A41CC6","#7373FF","#29AFD6","#74BAAC","#FF7373","#E37795","#D900D9","#BA21E0","#8282FF","#4FBDDD","#8DC7BB","#FF8E8E","#E994AB","#FF2DFF","#CB59E8","#9191FF","#67C7E2","#A5D3CA","#FFA4A4","#EDA9BC","#F206FF","#CB59E8","#A8A8FF","#8ED6EA","#C0E0DA","#FFB5B5","#F0B9C8","#FF7DFF","#D881ED","#B7B7FF","#A6DEEE","#CFE7E2","#FFC8C8","#F4CAD6","#FFA8FF","#EFCDF8","#C6C6FF","#C0E7F3","#DCEDEA","#FFEAEA","#F8DAE2","#FFC4FF","#EFCDF8","#DBDBFF","#D8F0F8","#E7F3F1")
var col = bgcolorlist[Math.floor(Math.random()*bgcolorlist.length)];
document.body.style.background = col;
document.getElementById("resu").innerHTML = col;

Upvotes: 0

RononDex
RononDex

Reputation: 4183

Add a span with a given id and set its content to the selected color like this:

<script>
    var bgcolorlist=new Array("#F70000","#B9264F","#990099","#74138C","#0000CE","#1F88A7","#4A9586","#FF2626","#D73E68","#B300B3","#8D18AB","#5B5BFF","#25A0C5","#5EAE9E","#FF5353","#DD597D","#CA00CA","#A41CC6","#7373FF","#29AFD6","#74BAAC","#FF7373","#E37795","#D900D9","#BA21E0","#8282FF","#4FBDDD","#8DC7BB","#FF8E8E","#E994AB","#FF2DFF","#CB59E8","#9191FF","#67C7E2","#A5D3CA","#FFA4A4","#EDA9BC","#F206FF","#CB59E8","#A8A8FF","#8ED6EA","#C0E0DA","#FFB5B5","#F0B9C8","#FF7DFF","#D881ED","#B7B7FF","#A6DEEE","#CFE7E2","#FFC8C8","#F4CAD6","#FFA8FF","#EFCDF8","#C6C6FF","#C0E7F3","#DCEDEA","#FFEAEA","#F8DAE2","#FFC4FF","#EFCDF8","#DBDBFF","#D8F0F8","#E7F3F1");
    var randomColor = bgcolorlist[Math.floor(Math.random()*bgcolorlist.length)];
    document.body.style.background = randomColor;
</script>

<form><input type=button value="click here forever" onClick="window.location.reload()"></form> 

<center>
<p>This colour is:  <span id='color'></span></p>

<script>
    document.getElementById("color").innerHTML = randomColor; // Writes the color to the span            
</script>

See demo here: http://jsfiddle.net/2LQNh/

Upvotes: 1

Cracker0dks
Cracker0dks

Reputation: 2490

used @RononDex solution and upgraded it with a

Function()

and no reload.

see here http://jsfiddle.net/MGzCE/

Upvotes: 0

Vinay Shukla
Vinay Shukla

Reputation: 1844

You can store the value Math.floor(Math.random()*bgcolorlist.length) in a variable and when you need to display the current hex use this variable.

Upvotes: 0

Related Questions