A preview of all the colors in the README.md

[makepanic]

should fix #31

Let's see if github renders it correctly.
I'm not 100% sure if github works fine with the svg hosted on open-colors github.io domain.
See https://stackoverflow.com/questions/13808020/include-an-svg-hosted-on-github-in-markdown for information.

The layout isn't fixed, if anyone got a better representation idea, I can implement that. The current one is heavily inspired by the current open-color website.

The generated svg looks like this:

[lukasoppermann]

Hey @makepanic could you maybe also add the rgb values? It would make it easier to compare if using rgb values.

[makepanic]

You mean as rgb(rvalue, gvalue, bvalue)?
Should it display both hex and rgb colors?

[lukasoppermann]

@makepanic yes. I am not sure about both, but rgb is easier to understand and compare so many people use rgb to compare how closely related colors are. This is much more complicateds with hex values.

[makepanic]

@lukasoppermann like this?

[lukasoppermann]

@makepanic perfect! Thanks.

[lukasoppermann]

Actually if this is possible, it would be helpful to generate the same picture with a deuteranopia and protanopia filter as well. Some colors are pretty similar if one has this "impairment" so this would be good to know when designing. Otherwise contrast might be a problem.

[makepanic]

I've integrated https://www.npmjs.com/package/color-blind which provides many color blindness transformation methods.
Do you only want deuteranopia and protanopia or all, provided by the library?

Should the complete output be transformed? That is including printed rgb values.

Here's an example output using deuteranopia:

[lukasoppermann]

Hey @makepanic this is pretty nice. Including all might be a nice idea, however I think deuteranopia and protanopia are by far the most common.

Another idea for a visual would be to combine them in every row like this (just a mockup):

This would make it easier to see the color you want in all forms, however it might also make it a little confusion, I am not really sure. If so, the deuteranopia and protanopia should probably just be somewhere in a legend, where it explains that the first row isdeuteranopia and the second protanopia. Otherwise it would be quite a bit of repetition.

I think the color codes for the deuteranopia and protanopia colors are not needed, as you are not designing with those colors, but rather with the ones form the package.

[makepanic]

I'm not a designer, so maybe we should wait for input from others?
Alternatively, we could split color-blindness generation into a different issue/PR.

That'll allow us to finish the color grid generation first and iterate on it later.

cc: @Larpon @yeun suggestions?

[lukasoppermann]

@makepanic splitting it up into 2 PRs sounds good to me.

[Larpon]

Yup - this is cool stuff. Including it somewhere in the README.md would close #31 IMHO. I don't have any designer glasses either. I was just looking for something to showcase what the project was about :)

[yeun]

@makepanic Thanks, nice work! I really love this and also thanks @lukasoppermann for the idea. There's one thing I need to point out; The deuteranopia and protanopia is a bit different with Photoshop preview mode (which I checked). On the Photoshop, deuteranopia and protanopia looks like this:

• protanopia
  
• deuteranopia
  

I need to check why the both outputs are diffenent. Before then, would you please comment out color-blindness preview emition part in this PR?

[makepanic]

@yeun i rebased without the color blindness feature.
I still don't know for sure if github allows the svg linking, so we have to redeploy the website assets to see if it works.

The difference between PS and color-blind could be related to skratchdot/color-blind#1

[sairion]

@makepanic Seems good!