mrmrs / colors

Smarter defaults for colors on the web.

MRMRS

Personal site.

colors's Issues

Define color variables in one place

The colors should be defined in the variables file then every other file should reference those. It would be much easier to update the colors if we were to do this.

Add swatch for Illustrator

Add my swatch for Inkscape/Gimp

Hey,

I made a swatch for Inkscape/Gimp in Gimp's gpl format. You can get it from my repository:

https://github.com/martinbetz/clrs-inkscape

Add swatch for photoshop

Variables not in css/colors.css

So when I @import "colors.css"; I don't get the variables in src/_variables.css. As a work around I can just @import "colors.css/src/colors.css";. I'm just not clear if this intended or not. Thanks.

Add CSS variables (custom properties)

Hey,
Instead of using classes, it will be better to use CSS variables, like so:

:root{
     var-bg-aqua:  #7FDBFF;
     var-bg-blue:  #0074D9;
}

Maybe it will be cool to add for progressive enhancement ?

Font stack on site

The font stack on the site (https://github.com/mrmrs/colors/blob/gh-pages/sass/_wut.scss) is currently just

body { font-family: avenir, 'avenir next'; }

Avenir isn't installed by default on Windows machine, maybe use add sans-serif (or Arial) to the end of the stack?

JS preset for React / React Native

Would be great if we could get preset for React / React Native projects.
In such projects pure Javascript definitions would be the best fit.

If you are open to PR, I could work on this.

Missing Gulp-autoprefixer dependency

Package.json is missing the gulp-autoprefixer dependency.

Shouldn't .bg-white & .white be the hex value?

I noticed that .bg-white has the background-color: white; & .white has the color: white; instead of #ffffff.

Why the double dashes?

Why are there double dashes in the border class names? Is there a significance to this?

Create swatch for Sketch

Black should be #000

Hello, the most remake colors are great, but you should not affect the default black's #000 color (like you let the white to be #fff), in some cases the user needs the full black to get some special effects, for example on projectors where full black results in no light.

black improvement

My suggestion: use #333333 instead #111111 for black color. Why? IMO #333 is better. #111 is much black.

Swatch for Affinity

There was no swatch available for download to use with Affinity software (none that I could find at least).
So here is one!

https://www.dropbox.com/s/mcgc1f3pgucx9yu/Clrs.cc.clr?dl=0

Repo has been removed from Google search results by bad DMCA takedown notice

FYI, this repo is URL number 403 on https://www.chillingeffects.org/notices/10275257
Context: https://news.ycombinator.com/item?id=8848544

Did you even use color theory bro?

Redesign header

Redesign the header.
Possibly cycle background color through various values.

Define color variables in one place

The colors should be defined in the variables file then every other file should reference those. It would be much easier to update the colors if we were to do this.

Show accessibility numbers on project page

Show accessibility scores of all possible color combinations using:

http://webaim.org/resources/contrastchecker/ to inform which colors should / shouldn't be combined.

Should be compared to the old defaults.

Where is the "site.css" file?

Distribute via Bower? Would be nice...

Add colors to CDN and provide link on project page

Make postcss default processor for main project

Convert build system to default to using postcss for development. Should be similar to how http://github.com/tachyons-css/tachyons-base works.

http://clrs.cc is wrong

The css used on http://clrs.cc is wrong - it has the black background class with a colour of 'black' not #111.

The text is also wrong - it shows the same hex value for the default colours teal and aqua (both are shown as #008080 which is Teal)

Add grunt and autoprefixer

Build tasks should probably move from rakefile to grunt.
Most useful build task would probably be autoprefixer:

https://github.com/nDmitry/grunt-autoprefixer

Double clicking a hex value selects too much

Double clicking a hex value (to select a "word") should select just the value itself, but instead selects both it and the following color's name:

Because basically all I do at clrs.cc is double click hex values for copy+pasting, this throws me a bit! It happens for me in Chrome (Windows and OS X), but not Firefox.

I can fix this locally by putting a space after the hex value (but still within the <code> tag), but I'm not sure this would be the proper fix.

alfred plugin

i made an alfred plugin to grab the hex codes for these. Is that something you'd be interested in having?

Update domain DNS

The Github page of the repo isn't working due a lack of update of the DNS settings.

Doc follows:
https://github.com/blog/1917-github-pages-legacy-ip-deprecation

Automate generation of a11y examples

Currently http://clrs.cc/a11y was one manually. The http://jxnblk.com/colorable module could be used here to automatically generate the page as referenced in this example http://jxnblk.com/writing/posts/color-palette-documentation-for-living-style-guides/

Add contributors to project page

More Color Gradients (Willing to help with the css)

I like how the colors.css works. I am working on more color gradients for you to be able to add to your repository. will upload once I finish.

Objectives

I'd like to help out and develop this because I think it is awesome, but I couldn't find a list of Todo's or any info on contributing. Do you think you could outline some things you would like to add so we can help out?

Create preset color combinations

I was looking at the CSS files and I was thinking about creating a CSS file that would have presets. This would just mean that there would be multiple preset classes where there would be one particular background color (such as navy, white, blue, red etc) then the font, border, strokes, fills colors would just be another color.

The combinations could be utilized from the colorable website provided in your website, let me know what you think!

PostCSS Plugin

Hello,

I think a great ideia for this repo would be to have a PostCSS plugin to go with it.

Basically it would look for instances of a color that matched one of the ones on colors and replace that with the hex code of the color here.

What do you think ?

I would love to work on this 👍

Break up colors into separate projects per pre/post-processor language

This project is pretty monolithic. It could be broken up into separate modules per pre/post-processor language.

Thank you

Thanks for sharing it, I love the colors you've chosen.

Adding colors

I want to add colors, specifically, light versions of already present ones, and some new colors. For this could you point me towards any other file that needs to be updated other than css/color.css , css/color.min.css and README.md.

3.0.0 doesn't appear to be available on npm

https://www.npmjs.com/package/colors.css

❯ npm i [email protected]
npm ERR! Darwin 15.3.0
npm ERR! argv "/usr/local/Cellar/node/5.3.0/bin/node" "/usr/local/bin/npm" "i" "[email protected]"
npm ERR! node v5.3.0
npm ERR! npm  v3.5.2

npm ERR! No compatible version found: [email protected]
npm ERR! Valid install targets:
npm ERR! 2.3.0, 2.2.0, 2.0.4, 2.0.3, 2.0.2, 2.0.1, 1.0.0

the more obscure color codes

i love love love this! i was wondering if you had thoughts, or references, about creating a nicer palate around the rest of the ~130 colors, e.g. khaki, lightgray, salmon. i'm working on a graphing library and would love for users to be able to drop human-readable color IDs with nicer colors :)

Maroon resembles dark purple

I was looking at your project and saw that the brown color you use - 85144b (HSV: 331°, 85%, 52%) - is mapped to a color that resembles much more to dark purple. Following the specification of maroon color in HSV (0°, 100%, 50%), I choose a new color that is more like the brown color of the specification and it is not as heavy.

The color in question is 731e11 (HSV: 8°, 85%, 45%) and it have a hue tending to yellow, while it maintains the saturation and value near the originally proposed by your project. I believe this color would fit better in the color pattern of maroon.

Any questions, I'm open to discussion.

Refusing to install colors.css as a dependency of itself

running npm install --save-dev colors.css
I'm getting this error: Refusing to install colors.css as a dependency of itself
my npm -v 3.3.12

atom package

Just wanted to let you know that I ❤️ this package and the colors in it. I use it all the time then prototyping or coding on my own projects with no designer.

But I wanted an even easier way to access these awesome colors so I made a package for my favorite text editor, Atom. I hope you like this Idea and are totally okay with it?

The package is located here: https://atom.io/packages/colors

Update on NPM

According to the repo, this is at 2.0.0, but in NPM it still shows up as 1.0.0.

i18n content for project page

It would be great to localize content for the project page so that a user can read the page in the language that they would prefer.

Missing LICENSE

It looks like headers indicate MIT (awesome!) but there seems to be no LICENSE file.

Thanks mrmrs!!

Put the colors "above the fold"

Since the first time I entered the web I'm using http://clrs.cc/ as a reference for nice colors for my projects. The only problem is, everytime I enter the first thing I see is "The old defaults" until I scroll. The first time I entered the web it was funny, but now these are becoming the identity of the web, which is not pleasant.

So, my proposal is, can you switch the positions of them? First the new defaults so anyone who wants to use them and enters in your web has them just under their fingertips and first time visitors still can get why that funny bit.

Note: this "feature" is probably a personal thing, but I don't think putting "the ugly" bits as the first thing visitors see improves the user experience in any web.

PS: really nice colors and I'm glad you made this, thank you (;

Additional color schemes/spaces

Now there are just HEX codes. It would be nice if the website would also provide the RGB and HSL values :)
Sometimes I just visit the page and copy a few color codes. And given that IE8 is beginning to fade away I prefer the HSL scheme/space.

"What is this?" is lacking details

I am curious if the colours were chosen arbitrarily or they had similar qualities or features as those found in the Solarized palette by @altercation?

A few colors need improvement

I love the idea behind this, but after looking at the project's site, I see a few things I would change.

1. Your red (#ff4136) looks more like the inside of a grapefruit than a true red. I'm not saying it should be #ff0000 at all, but it seems to have too much orange influence for a color merely called "red". Wikipedia even lists two colors on a page called "Shades of orange" (Tomato and Bittersweet) that are fairly close to your red.
2. Your maroon (#85144b) is quite a departure from true maroon -- more like a burgundy. This webpage defines the two colors in the same way I would.
3. If your black is not #000 (and I'm not saying it should be), then shouldn't your white similarly not be #fff? I probably wouldn't make it #eee, but I might do anything from #f8f8f8 to #fdfdfd.