davidmerfield / randomcolor Goto Github PK
View Code? Open in Web Editor NEWA tiny script for generating attractive colors
License: Creative Commons Zero v1.0 Universal
A tiny script for generating attractive colors
License: Creative Commons Zero v1.0 Universal
I guess the 'hsv' format was intended to be used in CSS, problem is that CSS does not support HSV, only HSL.
Check https://gist.github.com/xpansive/1337890 for a one liner converter (it works with hue between 0 and 360 and all others values between 0 and 1)
ps: I'm working on a PHP port, will tell you when ready :-)
Hello. Thanks for your lib !
I'm using it for generating colors in a bookmark minisite (open source)
As you can see, random colors generated with luminosity "light" are not always contrasting well with a black text for the "blue" hue (it's even worse with purple, so I don't use it).
I'm expecting "light" colors to contrast well with a dark color. Could this be an improvement ? Or am I assuming wrong ?
I expect the following to be true
randomColor({seed: 1}) === randomColor({seed: 1})
However, it is not. This is a problem where I want to have a randomly generated color based on the hash of a string. Think something like Github's Identicons for new users without an avatar.
Here is the line causing the issue. The seed value is hidden inside that closure and persists across calls. If you remove the && !seed
, that should be all that's needed to keep randomColor
deterministically random.
I wanted to use this inside some NG2 components, is it available?
Extend the functionality to generate N
(distinct) colors with a list of excludes
that must not appear among the generated set. A typical example would be "background color" and "text color" (B&W).
The excludes should be considered as a part of the colors during the generation process, so the new colors are as far as possible from each other as well from the excludes, this is done in #50
E.g. rgba(233, 114, 255, 0.5)
.
I'm using the library for to make a color with format rgba:
color = randomColor({
hue:'random',
format:'rgba'
});
console.log('rgba',color);
console:
rgba #4ddd90
I'm wrong or the suport for this feature yet not complete? I saw the issues about this feature.
Thank you for attention.
When I call randomColors with monochrome hue and random luminosity, the resulting colors are not monochrome.
I like the example on the Readme page, "the dots". Would it be possible to make it interactive with number of colors defined by the user? It would allow us to better try how the colors will look like with the intended use-case.
Related to color perception at #50
That would be nice if we could define an alpha value when using rgba format instead of random value.
Hi, there were some changes made to the library since v0.4.4 release notably alpha option support. I was wondering whether a new version could be published to npm.
#77 is also related
Thanks!
bower install randomcolor --save
How to fix this?
I think there should be feature which will make sure that it will always generate random unique color.
There are lots of switch statements in the codebase, and many of them are missing a break;
. Is this intentional? Omitting it has some implications.
Take this one for example:
switch (options.luminosity) {
case 'bright':
sMin = 55;
case 'dark':
sMin = sMax - 10;
case 'light':
sMax = 55;
}
If options.luminosity
is 'bright'
, it will run all three statements:
sMin = 55;
sMin = sMax - 10;
sMax = 55;
If it's 'dark'
, it will run these two:
sMin = sMax - 10;
sMax = 55;
And for 'light'
, it just runs this:
sMax = 55;
Is this all intended?
The docs state that the seed value must be an integer or a string.What if the string you try to pass is not a number?
I find them quite useful but for now I just copy them directly into my source code
fritx/markppt@ae7df02#diff-5f48f4b7cd5fa5aa6e97a127e55158deR271
For now, when I am trying to define module from randomColor, r.js shows error -
Uncaught Error: Mismatched anonymous define() module: function ()
There are any plans to make this script capable to work with r.js?
I am wondering if I could set the hue from a hex and get colors based on that hex.
What if I do not want random colors and one color cannot spread between 20 counts. Is it possible to support set of colors?
randomColor({hue: ['blue','monochrome'], luminosity: 'bright', count: 20});
randomColor({hue: ['blue','monochrome'], luminosity: 'light', count: 20});
how to use randomColor to generate color palettes giving the base color (e.g. 'hue' option)
for example like these https://www.google.com/design/spec/style/color.html
https://cdnjs.cloudflare.com/ajax/libs/randomcolor/0.4.4/randomColor.js
and
{
"_args": [
[
{
"raw": "randomcolor@^0.4.4",
"scope": null,
"escapedName": "randomcolor",
"name": "randomcolor",
"rawSpec": "^0.4.4",
"spec": ">=0.4.4 <0.5.0",
"type": "range"
},
"/Users/ardokusuma/Documents/workspace/local-tunnel/avengers"
]
],
"_from": "randomcolor@>=0.4.4 <0.5.0",
"_id": "[email protected]",
"_inCache": true,
"_location": "/randomcolor",
"_npmOperationalInternal": {
"host": "packages-12-west.internal.npmjs.com",
"tmp": "tmp/randomcolor-0.4.4.tgz_1459804934773_0.7336271230597049"
},
"_npmUser": {
"name": "davidmerfield",
"email": "[email protected]"
},
"_npmVersion": "1.4.9",
"_phantomChildren": {},
"_requested": {
"raw": "randomcolor@^0.4.4",
"scope": null,
"escapedName": "randomcolor",
"name": "randomcolor",
"rawSpec": "^0.4.4",
"spec": ">=0.4.4 <0.5.0",
"type": "range"
},
"_requiredBy": [
"/"
],
"_resolved": "https://unpm.uberinternal.com/randomcolor/-/randomcolor-0.4.4.tgz",
"_shasum": "5ff56862e97ba03beb0419ff0536ec7aff59eeeb",
"_shrinkwrap": null,
"_spec": "randomcolor@^0.4.4",
"_where": "/Users/ardokusuma/Documents/workspace/local-tunnel/avengers",
"author": {
"name": "David Merfield"
},
"bugs": {
"url": "https://github.com/davidmerfield/randomColor/issues"
},
"dependencies": {},
"description": "For generating attractive random colors",
"devDependencies": {
"cheerio": "^0.19.0",
"highlight": "^0.2.3",
"highlight.js": "^8.7.0",
"html-minifier": "^0.7.2"
},
"directories": {
"test": "tests"
},
"dist": {
"shasum": "5ff56862e97ba03beb0419ff0536ec7aff59eeeb",
"tarball": "https://unpm.uberinternal.com/randomcolor/-/randomcolor-0.4.4.tgz"
},
"homepage": "http://llllll.li/randomColor/",
"keywords": [
"attractive",
"random",
"color",
"generator"
],
"license": "MIT",
"main": "randomColor.js",
"maintainers": [
{
"name": "davidmerfield",
"email": "[email protected]"
}
],
"name": "randomcolor",
"optionalDependencies": {},
"readme": "ERROR: No README data found!",
"repository": {
"type": "git",
"url": "git://github.com/davidmerfield/randomColor.git"
},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"spm": {
"main": "randomColor.js"
},
"version": "0.4.4"
}
But I cannot find the alpha option being used in the given randomColor.js
http://en.wikipedia.org/wiki/Luminance vs. http://en.wikipedia.org/wiki/Luminosity
Refers to the property of the options object for adjusting perceived brightness.
Hello. First thank you for the module.
I wanted to ask you about this commit.
9759c8d
We have been using your module for a while now and the colors were just fine. But after updating to this last version, our colors changed and it could be considered a "breaking change". Is there a way to get back to the same behaviour / colors than before?
I don't know if it's only for us but this change might have "broken" expected colors in every project using it. (we have been playing with the seed until we found the colors we liked)
I get the following error when I call randomColor() :
[...]/node_modules/randomcolor/randomColor.js:36
if (options.seed && !seed) seed = options.seed;
^
TypeError: Cannot read property 'seed' of undefined
The simple fix: randomColor({})
randomColor({seed: 'string'});
TypeError: The seed value must be an integer
at randomColor (randomcolor/randomColor.js:48:13)
Hey, I'm fairly new to webdevelopment and I couldn't figure out how to make the script target this
.target {
background: #random}
Could not find 2.0 on cdnjs.com. Can you please add this to http://cdnjs.com/libraries/randomcolor?
Thanks
//removed previous issue during the port
Inspired by this great job, I ported the js code to cpp so it can be used some cpp based ui programs
Hi there, what do you think about publishing this on nuget.
Have a nice one.
Is't possible to generate a fix color ( not random )?
This looks exactly like a lib that I'd soon need!
I see there's an option for providing a seed for having deterministic results, but is there any way of specifying "I want 5 colors (with these settings) that are as different from each other as possible"? So that if I ask for 3 colors, I won't get 3 different shades of red.
Being able to specify linear transitions such as Luminosity: dark to light or Hue: red to blue would be a welcomed addition!
Здравствуйте. Напишите понятную нормальную инструкцию о том, как использовать ваш скрипт. Мне не понятно, как классу дать случайный цвет
It would be really nice to have a way to always generate the same color scheme from a given random seed.
I'm wondering. If you create randomcolros with hue: 'pink'
and hue: 'purple'
, could there be overlapping colors? By eye I can't really tell, but it seems like there are some overlapping colors.
So I ran this through a neural network, and it seems like they are overlapping (it can't classify them independently correctly)
https://wagenaartje.github.io/neataptic/articles/classifycolors/
It would be nice to have the option to define the color dictionary, e.g one could pass in a palette of color such as the Material Design palette, and those would be the only colors returned from the randomizer.
Hello,
I'm using www.chartjs.org to display some charts.
I would need to get some "related" colors, e.g. a light blue and a dark blue, to be used for hover and background colors, for example in a bar chart: http://www.chartjs.org/docs/#bar-chart
To do that, I use the alpha channel:
// define a green colour with alpha = 1
var green = 'rgba(172,216,86, 1)';
// define the same color but with alpha = 0.5
var greenHighlight = 'rgba(172,216,86, 0.5)';
Is there a way, using your library, to get an array of two colors, with the same rgb values but with different alpha (e.g. alpha = 1 and alpha = 0.5)?
Thanks!
This library is awesome for generative art, and it would be perfect if it had support for randomly generating transparency.
I know it is called random color, but it would be interesting if we had a way to just get a continuous stream of random colors in a way that doesn't change between different runs. Yes, I can just create a big array, but that is not the idea.
I would like to dedicate this project to the public domain and change the license on this repo from MIT to the more permissive CC0. If you are one of the 14 contributors, do you consent to this change in license? If so, please leave a comment on this issue saying 'yes' or 'lgtm' or however you typically express consent. If not, just comment 'no' and I'll close this issue.
Sorry for the bother.
I'd originally included some tests in my pull request, but removed them due to @davidmerfield's comment
I'd love to add some tests, but wanted to open up the discussion on what frameworks to use (etc., etc.), as @davidmerfield said, "I don't want to use Karma/Jasmine"
because it'd be pretty neat!
First of all thank you for this library! Secondly, I encountered a situation where I would like to generate colours sequentially however once a colour has been generated, I would like the next generated colours to exclude the already existing ones (given an array of some sort). Would you think this be possible?
I just realised that issue #58 is practically the same query.
Could 0.4.4
be published to the npm registry?
Hey David. An interesting thing about the way Bower and Component work is that they rely on git tags for recognizing versions. The bower.json
and component.json
have properties for versions, but they're not sufficient on their own. In order to release the version, a git tag must be created. You can create and push lightweight tags by doing the following:
git tag 0.1.0 && git push --tags
That will create a tag for version 0.1.0 at the current commit. Later on, when you have more commits, you can bump up the version number the next time you want to do a release.
git tag 0.1.1 && git push --tags
The most commonly used versioning scheme among JS projects is Semantic Versioning.
Currently, your README says that the script is 'dedicated to public domain', but it's MIT license. Which is it intended to be?
I find it really useful for scripts to have a link to their authors/repo in the source so that, when I am done speadily building a project, I can credit the people whose code helped make it possible. Could you add this to your source?
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.