How to generate multiple colors from a Color by Javascript

Question

I want to generate multiples colors from a Single color which I will gave. I got some codes and this works. But on every refresh the color is getting change. I want like color will not change on every refresh. How can I do that? Can anyone help?

sample link: https://randomcolor.llllll.li/

put up some code, some kind of example. what do you expect as to do without having anything to work with! — MKougiouris, Dec 11 '17 at 09:50
You are assuming an awful lot here and haven't posted anything for anyone to go on....edit your post and give some examples of what you have to give people some idea and content to back up what you are asking. — SPlatten, Dec 11 '17 at 09:50
That is not example or your code. That is a lib on Github :) — DanteTheSmith, Dec 11 '17 at 10:01

DanteTheSmith · Answer 1 · 2017-12-11T10:09:31.437

Where is exact code / problem?

Best I can do here is guess.

You need to use same generation process every time you generate color, end up with same color and apply it to desired elements in a way that satisfies you.

Here is simple way, in HTML use

<some parent element onload="loadColors()">

Now every time that element gets loaded into DOM (and it will on 1st visit as well as refresh) it will execute your function.

And in JS:

var loadcolors = function(){
   // your process to generate color here
   var yourGeneratedColor = ???
   // bind that color to your elements, for example:
   document.getElementById('Id-of-your-element').backgroundColor = your GeneratedColor;
}

If you are using random with seeding or the generation process is very resource heavy you might opt to use cookie or local storage to hold on to color once you have generated it. This way you generate it 1st time and only if the resource where you stored it gets destroyed.

EDIT - Answer to the comment:

If you only wanna input 1 color (or couple of) you can do it simple.

var yourColor = color + ""; // to make sure its string
localStorage.setItem('oneColor', yourColor); // store color under oneColor name in local storage
var retrievedColor = localStorage.getItem('oneColor'); // retrieve it's value

If you need to store many colors, you wanna store them all to object and then stringify them before saving.

var myColors = {
// object with my colors or array of colors, even arrays of colors..
}

// Put the object into storage
localStorage.setItem('storedColors', JSON.stringify(myColors));

// Retrieve the object from storage
var retrievedColors = localStorage.getItem('storedColors');

You can still use the onload I showed you above and in that function check if color object or color is present in local storage. If not generate and store them, if it's there just load it and apply to elements.

To check if something is there simply try to retrieve it, and if it's null it's not there.

if (localStorage.getItem("item") === null) // not there

thanks. Can you please tell me how to save it in local storage — Kapil Paul, Dec 11 '17 at 10:01

Kalaiselvan · Answer 2 · 2017-12-11T10:01:58.260

0

it will be helpful to you

var color=["red","green","yellow"];
//var color=randomColor({hue: 'red', count: 18})
document.getElementById("div_One").style.backgroundColor=color[0];
document.getElementById("div_two").style.backgroundColor=color[1];
document.getElementById("div_three").style.backgroundColor=color[2];

div{
width:100px;
height:100px;
}

<div  id="div_One"></div>
<div  id="div_two"></div>
<div  id="div_three"></div>

edited Dec 11 '17 at 10:01

answered Dec 11 '17 at 09:56

Kalaiselvan

2,095
1
18
31

thanks. but I want to generate. I dont want to put the color codes or color names. like i want to generate 100 colors then I it will generate 100 colors depends on that 1 color I gave – Kapil Paul Dec 11 '17 at 09:58
`var color=randomColor({hue: 'red', count: 100})` you can access like this – Kalaiselvan Dec 11 '17 at 10:02

How to generate multiple colors from a Color by Javascript

2 Answers2