fooidge / pleasejs Goto Github PK
View Code? Open in Web Editor NEWJavaScript Library for creating random pleasing colors and color schemes
JavaScript Library for creating random pleasing colors and color schemes
Please publish to NPM, for easy use in JS projects which use dependency management.
Seems like a great library but it would help if there were even minimal documentation for various options possible and the differences.
The code is clean and easy to read but still needs some knowledge of color theory to get started. It'll also enable others to make enhancements and send pull requests for minor changes.
Please consider starting a wiki with minimal info and I'm sure others chime in to improve it over time.
Hello! Thanks a lot for the amazing library!
In my project I need to create constant colors for users and chats based on their id: Uuid
. I looked for a solution and found the PleaseJS library that is able to generate nice random colors. I have thought that I can override your random function to produce constant colors for any given id
. But it was even easier! I just need to submit my id
as seed
and everything works! Cool! I use it this way:
Please.make_color({seed: id});
But I still need to monkey-patch your library because there is no way to use my own seed
value now. Maybe we should add it? This will enable such crazy use-cases as mine is. ๐
Please.make_color( {base_color: 'red', colors_returned: 5} );
["#aN", "#964f4d", "#aN", "#aN", "#aN"]
Or at least in the readme ๐
Hi, I want to create something similar to the example page of Please.js. Basically to have a few divs, and have their background color changed based upon function called.
It is easy for just one color, but how to output the value of a function that creates a color scheme?
Here is the fiddle with one color, and the setup is ready with four divs to accept the values for a color scheme, but I don't know how to do it.
I've no idea if the output is intended and the documentation is wrong, or vice versa.
Is there an option to ensure the generated colors from colors_returned
are human distinguishable?
The Make a few.
demo that generates 4 colors are often hard to tell apart.
https://github.com/Fooidge/PleaseJS/blob/master/Please.js#L551
I'm curious why this returns the color as a string if there's only one result, but an array otherwise. Makes embedding code sort of convoluted. I didn't submit a patch because I assume there's a reason, but I just wanted to know what it is.
Because it will always be minified, rename to Please.min.js
will be easier to recognized as dist file, be the same as src may be ambiguous.
Version 0.2.0 doesn't support node and that's what is currently in npm.
/dev/colors/node_modules/pleasejs/please.js:600
})( window );
^
ReferenceError: window is not defined
at Object.<anonymous> (/dev/colors/node_modules/pleasejs/please.js:600:5)
Also 0.4.0 has a bug:
npm install
[email protected] node_modules/pleasejs
node index.js
module.js:333
throw err;
^
Error: Cannot find module 'pleasejs'
at Function.Module._resolveFilename (module.js:331:15)
I discovered this library through the Github trending email. After a bit of searching I found the site http://www.checkman.io/please/ which shows it in use.
Please add a link to the readme.
This project is definitely unmaintained. Last commit 2014. 9 PRs waiting. The library's pretty much broken.
You should expand your demo.js file into actual case examples. To exactly figure out how one uses please one has to reverse engineer your demo page. Not a big deal but not ideal.
var make_color_multiple = document.getElementById("make-color-multiple");
addEventListener(make_color_multiple, "click", function() {
var e = document.getElementById("multiple-demo").getElementsByTagName("div");
var t = Please.make_color({
colors_returned: 4
});
for (var n = e.length - 1; n >= 0; n--) {
remove_first_child(e[n]);
e[n].style.background = t[n]
}
});
Yesterday I was developing using this library and I noticed some improvements that can be made.
There are a few things that need to be done:
Feel free to suggest a new name. I'll go for chromatic.js
I'm not sure if this is just me, but I tested Please.make_color with base_color gray and black, and it always returns red shades. I'm fairly new at coding so please let me know if it's me being a n00b :)
var colors = Please.make_color({
base_color: 'gray',
colors_returned: 20,
format:'hex'
});
const hsv = colorsys.hexToHsv( '#FF0000'); // {h: 204, s: 91, v: 74}
this.colors = Please.make_scheme(hsv, {
scheme_type: 'analogous',
format: 'hex'
}); // ["#d2ebb6", "#1705b6", "#43b8b24a", "#87d1b24a", "#4144db6", "#0ca8e88"]
console.log(hsv, this.colors); // {h: 204, s: 91, v: 74} (6) ["#d2ebb6", "#1705b6", "#43b8b24a", "#87d1b24a", "#4144db6", "#0ca8e88"]
I also tried returning RGB's, and the values for them are in the millions and negatives!
[
"rgb(-1698300,-667998,18870)",
"rgb(-1698300,-1240388,18870)",
"rgb(-1583823,-1698300,18870)",
"rgb(-1011432,-1698300,18870)",
"rgb(-439042,-1698300,18870)",
"rgb(18870,-1698300,-95608)"
]
colorsys.hexToHsv
is returning the correct values, I double checked using some online tools
Hi!
Can you please tag your version so that it matches your bower.json? Without it, I have to use "*" in my bower.json which is brittle.
When I use 0.2.0 in my bower.json:
โ bower install
bower pleasejs#~0.2.0 not-cached git://github.com/Fooidge/PleaseJS.git#~0.2.0
bower pleasejs#~0.2.0 resolve git://github.com/Fooidge/PleaseJS.git#~0.2.0
bower pleasejs#~0.2.0 ENORESTARGET No tag found that was able to satisfy ~0.2.0
Hi,
It is a common practise to add a rule in the .gitignore
file to ignore the node_modules folder. The package.json
allows us to install all npm packages that is required by this library by executing npm install
command. However, it is a common practise and does not mean you must remove it. If there is a valid reason, leave it to be.
P.S. Thanks for the awesome plugin!
Cool library!
I am working on a project where the client picks a color (or a color and a compliment) and it reskins a whole CMS driven Material Design site.
Is there any interest in adding a
Please.make_scheme({ scheme_type: 'material', //set scheme type format: 'hex' //give it to us in rgb });
This may be too specific and I'm not sure if anyone else would want it.
I was trying all the different scheme generators and noticed that the 'double' doesn't work.
Thanks
How much smaller (file size) would a light version be that only gives you the defaults options and the one function make_color()
?
After some digging I can see that it's licensed under MIT (https://github.com/Fooidge/PleaseJS/blob/master/bower.json) but it'd be nice to see that in a license file or in readme.md or something.
This code could be much easier to maintain if you pulled in css color names and color math from external well tested modules.
I need to get color with a fixed opacity
Being a web designer, with limited JS skills, I would like to know how should I output results of Please.js functions?
For example, the elementary Please.make_color(); function, how should I get the output of it?
Sorry for this type of question :)
Mirko
Instead of LESS / SASS / etc.
According to the docs, I expected a string out of this when passing colors_returned: 1
return Please.make_color({
base_color: color,
colors_returned: 1,
format: 'hex'
});
I'm getting an array with one color in it
The docs say:
If you set it to 1, you'll just get the one color! It makes a sort of sense if you think about it.
Maybe I'm overthinking it? :)
And the first one should be "Name_to_RGB"
greyscale: true or grayscale: true, doesn't generate hex value of 6 instead : "#000000.36cd673" .
I'd like to be able to define a max brightness or darkness for the color generation.
If I want to put text over it, I want it to be easy to read, with a white or dark font.
I've implemented something like that using YIQ:
var yiq = ((rgb.r*299)+(rgb.g*587)+(rgb.b*114))/1000;
return (yiq >= 128) ? 'black' : 'white';
In this case I test the color generated to adapt the font color, but it would be better if I could generate only colors that are suitable for a dark font, or for a white font.
Another great article about it: http://24ways.org/2010/calculating-color-contrast/
The make_colors function return an array containing a few exactly same colors. When I have colors_returned = 20, I would like them to be all different since I am using this to create dynamic charts. Is this a bug?
Hi !
It would be great to add the ability to use a color in hex as "base_color".
Example :
Please.make_color({
base_color: '#FF0000'
});
Would be great to get the option of spitting out a harmonious contrasting color based on a color input.
There should be
main: "Please.js"
instead of
main: "please.js"
So, my code is:
var csscolornames = ["AliceBlue", "AntiqueWhite", "Aqua", "Aquamarine", "Azure", "Beige", "Bisque", "Black", "BlanchedAlmond", etc];
chex = Please.make_color({base_color: csscolornames[i]});
console.log("CHEX " + chex);
chsv = Please.HEX_to_HSV(String(chex));
Everything works except when chex is using base_color:black
. The console.log chex shows: #000000.randomhex
where "randomhex" is a relative black color (eg. #240000). The subsequent comand HEX_to_HSV
fails as the String is not in actual HEX format. Also, I need to use HEX_to_HSV
as apparently if I use format:'hsv'
in make_color()
, the object returned doesn't have any values stored (eg. h, s, v), so I can't access them (eg. chex.h, chex.s, chex.v), if I try to console.log chex it would be [Object] [object]
, but when I use HEX_to_HSV
, the console.log chsv would show me eg. [Object] {h:98, s:.4, v:.5}
.
http://knowyourmeme.com/memes/dolan
And have a laugh or two in between :D
colors_returned: (1-infinity) Setting colors_returned to higher than 1 will return an array full of the colors Please has made for you. If you set it to 1, you'll just get the one color! It makes a sort of sense if you think about it.
In my opinion it would make a lot of more sense if the function would always return an array of strings when the color_returned is used.
In many use cases the number comes from a dynamic value and now the result needs to be converted for consistent results.
It would be nice if the library supported colours generated based on a seed.
I can give this a go later this week if you're interested.
@Fooidge - I love this library; I use it all the time to generate soothing color palettes.
More specifically, I used the demo feature on website a lot just to generate color palettes to use for other projects. As @billcastillo mentioned in #72, it looks as though the domain has expired and the website is no longer available.
Is it possible for me to fork this repo and stand up the website again? Or do you have other files you used to generate the website? If you can point me in the right direction or get me started, I'd be more than happy to stand up the website again and maintain this.
Please let me know - I really miss the site!
Hi! Thank you for this module.
var color = '#1ba1e2';
var color_rgb = Please.HEX_to_RGB(color);
console.log("Hex: ", color);
console.log("Rgb: ", color_rgb);
console.log("Rgb: ", Please.HSV_to_RGB(Please.RGB_to_HSV(color_rgb)));
I hav next result:
Hex: #1ba1e2
Rgb: {r: 27, g: 161, b: 226}
Rgb: {r: 26, g: 161, b: 226}
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.