Is this a joke? So much pomp and circumstance for a list of 16 hex colors! A big-ass readme file with install instructions??? Fucking ruby gems??? And to top it all off, it breaks designs that use the original colors. Distant colors are now similar. Lime on Green would have been ugly but readable before; with these new values it would be totally illegible.
It isn't a joke. It's what i use personally as a designer and I thought I'd open source it. If you don't like the colors, they are pretty easy to change.
I like your new default colors and this project in general. So nice job with putting this out there.
But at the same time, I don't use your CSS file. I think the commenter above who's hating on this thinks some of it might be redundant. I guess it depends on your use-case and what kind of styling you do... I am by no means a CSS/web designing expert. For my projects personally, I just your use the HEX code of your new default colors whenever I need it. And I keep it bookmarked it for reference.
Yeah! I think judging by web traffic that is how most people use this project - which wasn't my intention at all - but I'm glad some people are finding it useful. I tried to make it as easy as possible to digest/use/install the colors however you want. Whether it's cutting and pasting from the web page - or installing through npm.
Neat project but I'd be careful showing the Twitter (and Github I suppose) logo with the various colors. This is prohibited by their logo guidelines - https://about.twitter.com/press/brand-assets
Hmm. I'm sure it's a calibration issue looking at the hex, but the red looks rather orange on some of my displays.
(Basically it looks red on my IPS panels, but very very orange on my TNs. The same panels - not from the same manufacturer - also make the actual orange look more like a goldenrod.)
Actually, what they call “red” is just a very orangey red.
Already, sRGB’s FF0000 is quite definitely on the orange side of neutral (I tend to call the sRGB primaries “orangish red”, “yellowish green”, and “purplish blue” for clarity when trying to explain technical aspects of color to non-experts).
So when they push toward an even oranger color, it starts getting silly to still keep calling it “red”.
Actually in general, the palette at clrs.cc (while it might have been carefully be internally harmonized) is not all that close to the labels that typical English speakers attach to those color words. For instance, what this palette calls “olive” is much closer to neutral green than what it calls “green” (and is entirely unrelated to the color people typically call “olive”).
Additionally, there’s such a dramatic variation in saturation (technically, “chroma”) between colors in this palette that I don’t think they work especially well together. Some of the colors are muted and others are crazy colorful. This is what happens when you only pick colors at the very edge of the sRGB gamut.
"Already, sRGB’s FF0000 is quite definitely on the orange side of neutral (I tend to call the sRGB primaries “orangish red”, “yellowish green”, and “purplish blue” for clarity when trying to explain technical aspects of color to non-experts)."
I did wonder about that, especially when desaturating "pure" blue produced a kind of lilac, and when I got a cyan (rather than green) after-image from "pure" red.
Thanks for confirming.
Out of interest, where would you say neutral red, green and blue fall in the sRGB space (or are they out of gamut)?
For any given hue, you can pick a range of colors. There are an infinite number of neutral red/green/blue/yellow colors within sRGB. However, for blue and green especially, these unfortunately happen to be less colorful than you might achieve with paint or see in nature.
(Note, the “hue” measure used in spaces like HSL/HSV is non-uniform, especially in the blue–purple range. So that explains part of the effect you see when you “desaturate” sRGB #0000FF. Your “desaturate” operation is also shifting the hue, if you define hue based on human perception.)
The lessons from scratchapixel.com were for me the most helpful, they really made all the stuff about colour-spaces "click" for the first time. Mainly this chapter, explaining about the tristimulus, CIExyz and how they transform into sRGB and what is up with that horseshoe shape:
Further, if you click around there's a few more chapters relevant to colours that put this theory into practice (in the context of raytracing and rendering):
Kinda unrelated story:
I ran into trouble using "true black" (A combo of CMYK) on a van wrap. In all the testing I did, it looked fine, but outdoors, it looked green. But photos of the wrap looked fine. (the camera has a uv filter?) Figured out that the cyan ink fluorescenced in daylight with that combo of ink and material at least. And converted it to just black ink for the next ones.
Is this why you see a lot of web pages that are some mid-shade grey background with another mid-shade grey text, resulting in extremely low contrast and increased difficulty in reading?
1) Provide a matrix of all 32 colors and a list of the 16 color terms. Ask people to pick the tile that best matches each color term.
2) Provide the matrix of colored icons/logos that uses the new palate, and the same matrix using the old palate. Ask people to pick the prettier matrix.
I don't think the new palate has any chance of winning the first contest. It might win the second. Perhaps that's the point.
I like the set, but I thought that the reasoning for the web safe colors was not that they were a "good" choice for web design, but that they were empirically likely to be rendered consistently across all types of display, even uncalibrated.
If by “web safe” colors you mean the 216-color grid of 00, 33, 66, 99, CC, FF along each of the RGB axes (this is the common definition of “web safe” colors), then this basically incorrect. Web safe colors vary dramatically between displays, just like any others.
The reason for “web safe” colors was that most color displays in the mid-1990s used a 256-color palette to render everything on screen, so any colors not in the palette would be dithered. Browsers had their palettes set to include the 216 “web safe” colors in addition to various operating system default colors. Web safe is basically irrelevant to anything since sometime in the mid-2000s.
Web safe colors render just as inconsistently across uncharacterized displays as any other colors. And when the displays are properly characterized (“calibrated” is the popular word for this, but not quite technically right), colors at the very corners of the gamut (like FF0000 or whatever) are actually much likelier to vary, if any of the displays’ gamuts doesn’t cover the entirety of the sRGB gamut.
Why so much hate? This looks nice. I'd put the old palette below the new palette. Seeing the old palette first, I immediately thought "those don't look new or very pretty".
Yeah I thought about putting the old colors below as I agree it's not nice to see first - maybe I'll try that out this weekend. Thanks for the suggestion.
So long as you know the colors in [0] are all just the hardcoded CSS "standard" colors, then great :) There are some "awesome" ones there (papayawhip, lightgoldenrodyellow) and the history of how they came to be (via X11) is pretty interesting too.
I do like these, however, I'd be very cautious about replacing such universal defaults as I am sure there are very specific reasons why these very shades where chosen.
I am quite certain hundreds of hours of testing went into picking these shaded given different monitors and devices available....in the 90's.
I am pretty sure the only reasoning behind the original colors was that they are mathematically nice. Like #FF0000 for red and #008080 for teal (with the exception of orange, which wasn't one of the original 16). The colors were not chosen for aesthetics, that is for sure.
In the 90's you could barely afford a 256-color capable graphic card, this is why a Web-Safe color palette exists[1]. There were no "hours testing", they just picked the colors that were used by the most popular browsers.
I don't think hundreds of hours of testing went into anything for the html spec back in the 90's.
Things were quite ad hoc in the early days!
That said, there were probably specific reasons why those colors were chosen, reasons that might not make so much sense today.
Oh I remember - it's to fit into the 256 colour palette of gifs and old school graphics adapters that can't store too many bits! If you wanted more colours, you had to swap out the pallette.
I don't think that applies today anymore, even on the most basic computers.
Nice set. The maroon is a bit too purplish for my taste, maroon is supposed to be dark red, not purple. There are already two other colors in the purple range there (purple and fuschia)... :)
All of the colors are much softer than the old pigments, gives the page a much more friendly and inviting feel. Most modern websites seem to use these similar colors.
