#c0ffee is the color | Hacker News Reader

#c0ffee is the color

c0ffee.surge.sh

783 pointspavel_lishin121 comments

I'm surprised no one yet has mentionned the famous stack overflow question: https://stackoverflow.com/questions/8318911/why-does-html-th....

TLDR; For legacy reasons, some words produce valid colors even if they don't respect the standard color formats. For example, "chucknorris" produces red.

Someone should make a list of all words and common phrases that result in a color different from #000000 and then go through them all and pick out the interesting ones.

By the way I didn't see any mention of max length. Is there a limitiation to the length of the color string?

Bonus question: What color would the complete works of Shakespeare be? Take all of his scene play manuscripts found on Project Gutenberg but excluding duplicates if any, sort them in the order they were originally published and concatenate into a single string.

The HTML5 color parsing algorithm is less complex than it seems. Mostly it boils down to "take any characters that aren't hex digits and replace them with zeroes, then truncate the resulting string in a consistent way to produce a 24-bit value".

Got to admit I was hoping it'd be a coffee-ish colour before I sorta parsed the colour in my head and realised it was mostly green.

With that said there are some pretty cool ones (e.g. 5afe57 = safest = a green) that do match up. Can't say I can think of many hugely practical uses for this, but it's kinda neat!

Hmm. I've always wanted to parse colours in my head.

How do you do that?

Hex colors are RRGGBB; if you look at C0FFEE, you can see that it's all-green, almost-all-blue, and significantly less red. So it's going to be a near-white color that's green/blue.

You would recognize how 00 through FF indicates more/less presence of each of rgb for every two characters, and combine from there. IE ff0000 would mean fully red no green no blue. It takes some practice to remember how the different combinations add up.

These CSS colors consist of 3 bytes in hex, the first gives the red value, second green and the last is blue.

So:

  #FF0000 = 0xFF, 0x00, 0x00, which is pure red
  #0000FF = 0x00, 0x00, 0xFF, which is pure blue
  #FF00FF = 0xFF, 0x00, 0xFF, which is red and blue mixed, so it's purple (violet)
  #FFFFFF = 0xFF, 0xFF, 0xFF, all colors combined is white

etc

#C0FFEE = 0xC0, 0xFF, 0xEE, so by 'parsing' it in your head yo can see is mostly green and blue, combined that's cyan.

Yes but you grew up typing hex codes into a home computer connected to a tape drive. You know what 8192 looks like in binary but everything beyond 65535 you struggle with because you didn't have the registers for that on your 6502A.

It probably irritates you to see images scaled to 1000 pixels rather than 1024. What about that jpeg cell that is not 8 pixels square? Think of the computational overhead and the need to go floating point just because someone does not think in bytes. It is too late to tell them now, these kids ain't spending winter typing in hex. Hex to them is like BCD is to you and who needs binary coded decimal these days when emoji's need to be mastered?

I don't mean you personally, just them folk that know their hex from learning to code that way. I think hex is important but it seems most front end developers would prefer not to know.

> I think <INSERT_THING_HERE> is important but it seems most front end developers would prefer not to know.

This is my experience. There are two types of people in this industry, people who want to make money quick and those who are technologists.

What would you guess is the ratio of each?

In my experience, I tend to think it's something like 30% technologists, 70% money makers. Unfortunately, barely anyone (including myself) wants to see themselves as the second group (for the record, I think I'm on the second group).

I disagree. Not wanting to learn hex does not make you less of a techie. One can only focus on so much, and tech is huge.

In Australia you learn about base-N numbers in primary school, I don't understand why you see that as a huge undertaking. Ultimately if you ever have to check the mode of a file on *nix, or interact with bitmasks in any way, you're going to run into numbers in different bases. Not to mention memory addresses when debugging.

I mean, it's not _mandatory_ but it's something you'll run into eventually (though since I do quite low level systems programming, I expect that I see hex a lot more often than web developers -- though CSS colours are also in hex).

File modes are typically written in octal, not hex.

What my point was meant to be is that you deal with numbers in different bases all the time. Fixed.

I would be surprised if a frontend developer didn't understand hex coloring.

Doesn't this apply to all sorts of professions in every industry? It's not a particularly unique insight.

You don't even have to decode the actual number, just comparatively figure out which one 'looks bigger'. In more steps than necessary to be abundantly explicit:

Step 1: group into two characters each.

Step 2: know that hex is an extension of decimal that adds the digits A-F after 9. So just like 0<1, 9<A and A<B etc.

Step 3: find the biggest and smallest groups by comparing the first digits of each. If they match they're pretty close.

Step 3a (optional): guestimate the intensity of each color by thinking of the first digit on the scale from 0 is least intense to F is most intense. (5: somewhat less than half, D: pretty close to max, 1: almost none etc)

Step 4: use your knowledge of additive color mixing to guestimate the color.

You don't need to be able to map each digit to its' decimal equivalent first to get a general guess. If you're missing Step 4, then you can still figure out mostly-primary colors like #D53A1F. Step 1 should be trivial. Step 3 can be guestimated.

I'm sorry, but if you don't know how to read simple hex numbers for colours, and you're unwilling to learn, you probably shouldn't be in this game.

It's like when people complain that they failed to install desktop Linux in the last couple of years - sure in the 90s that was a very valid complaint, and early last decade it was tricksy too. But now? It says more about them.

TBH, in 90s I just pushed disk[ette] into the drive and booted into installer. Today I have to go through all the DVD-ISO-to-USB3-EFI hassle before it even boots. And then it still has no idea of how to install into that single partition that I created.

The fact that users cannot just install the OS and use it after 2+ decades says more about OS, not about users.

I mean people on here, who are supposed to be technically minded. I'm not really sure what hassle you're talking about, but I was very specific in talking about people who proudly claim to have failed, here.

My mother? Like most people, she might have trouble, but she probably doesn't even know what an OS is. A hacker news poster in 2017 should know better.

I think you're mistaking tech-minded with linux-experienced. I am definitely tech-minded (unix & c are main tags) and was linux-experienced. Solved any issue in minutes, hours or days. Now I can't make my soundcard work in Debian because: A). I don't know the stack anymore. Pulseaudio, alsa, setting managers, etc. B). I don't want to dive in there again to get more amazing brand new details about how sound meant to be played at modern days on my 11yo PC with AC97 chip.

I was like that too. Losers can't install, tune, [read hex colors,] etc. Then you realize that your time is finite, that your overall awareness has FOV parameter, that issues never end, they evolve. If you focus too much, you're solving local problems that should not be there in the first place, and these are not yours. So, things are wrong, not your FOV. Fix things, not yourself. Know hex for hardware, not for colors. That's what your parent's rant is about.

No, I'm not, and please read again, I was very specific.

If you can't install linux in 2017, you can't really consider yourself technically able.

I said nothing about getting every piece of hardware going. I said nothing about tuning anything, I said nothing about resolving issues or fixing things yourself.

If, between the big distros (and particularly ubuntu) you can't even get it installed in 2017, when linux in various forms is so widespread, and the installers are really not much more complex than the windows one, you have problems. I've watched linux installs go from hideously complex beasts invokving typing in monitor tolerances and manually selecting arcane package-sets to try and make anything work to something supremely easy. Are you really going to argue that installing Ubuntu on generic hardware is sooooo difficult we shouldn't expect someone who is supposedly into tech and a capable programmer to be able to click through an installer? Really? Because to me that's an expectation on a par with writing fizz-buzz,the lowest possible barrier to entry.

The parent rant is trying to say that kids today don't need hex, and that it's a fuddy-duddy old man skill reserved for those who grew up coding in assembly on 8-bit processors. As this very topic shows,I don't think that's the case.

I'll skip linux part because it goes nowhere without considering that specific case with someone on HN who failed. But doesn't your last sentence involve circular logic?

Well, I invite you to watch out for the linux comments next time such a topic comes up.

As written, my last sentence is indeed circular, and poorly phrased, yes :)

I was trying to say that this topic shows the skill useful, if not essential. What I said was that my opinion is clearly my opinion!

Though I can read and even compare hex numbers easily, I'm with you that it would be great to just represent colors in "rgba(75 100 93 80)", i.e. colorspace(percents) format anywhere and to not deal with cryptic strings.

Moreover, RGB isn't great at all. We need "10% lighter than deep purple", not #ec12e4. All the mind-calc is done in these terms anyway.

Also that it is bright and somewhat unsaturated, because its lowest component is 3/4 of full intensity.

I also plan to use 54FE57 somewhere. Have to do that.

Though with the numbers in the beginning it's not as readable as e.g. BADA55.

It's a little more readable if you change the 4 to an A, which doesn't significantly change the color: #5AFE57.

Yes indeed, and that's what's on the site. My bad typing that on mobile...

Still the 57 does not really directly translate to ST in my head at least.

Hmm. BADA55 didn't make it on to that site, strangely enough.

Color of Kerbals ;)

They parsed an English dictionary. You mean the dictionary didn't contain badass? gasp :)

there is also #F1A5C0 / FIASCO

Seems like a great gamer handle. It's leetspeak, a decent name to go by on the servers, and it's a color. One could maybe theme a site in tune with one's nickname that way.

Coffee beans before roasting are infact "Green"[0] and are referred as green coffee. The roasting process makes it brown.darker.

[0] https://en.wikipedia.org/wiki/Coffee_roasting#Roasts

That's a very good point! I can't say I've ever roasted my own coffee, so it's something I've not experienced in person. I hear you can buy green beans and roast them with a popcorn machine though, which sounds kinda fun to try.

It is very fun, and way tastier:

https://www.sweetmarias.com/category/green-coffee/others/sam...

http://legacy.sweetmarias.com/airpop/airpopmethod.php

To make this a bit more on-topic for HN: http://www.cigarasylum.com/vb/showthread.php?t=45932

The above describes creating a bread-machine "Coretto" roaster. (I still have no idea why it's named that). A heat gun (for paint drying) from Harbor Freight (~$15, it's almost always on sale) is used for the heat. The bread machine is torn apart so it permanently spins, and never turns on the heating element.

After using it manually a bit you'll get the bug too. Eventually you'll want to control it electronically. I still have to actually do it...

That's really cool, thanks for those links. You've given me something to look into for the next side project!

> Got to admit I was hoping it'd be a coffee-ish colour before I sorta parsed the colour in my head and realised it was mostly green.

#ACE71C is quite acetic, on the other hand.

> With that said there are some pretty cool ones (e.g. 5afe57 = safest = a green) that do match up.

Unfortunately 'secede' is blue rather than gray...

check www.sevacoffee.com - start with raw green beans and roast, grind & brew every cup to make the ultimate cup of coffee.

Oh neat:

#F0E71D

is the colour of asafoetida: https://www.google.co.uk/search?q=asafoetida&source=lnms&tbm...

And #C0C0A5 is cocoa.

For fitness studio folks who are into hex (of which there are obviously billions) #F17 (bright pink) would be popular too.

#B0BCA7 is also the color of a bobcat.

#CA7 is the color of one of my cats. (Well, she has a lot of colors, but I'm sure #CA7 is on her somewhere.)

I really liked bobcat, but did not enjoy #B1DE75

It's like onomatopoeia, but with colors instead of sounds.

#c0fefe, you wanted to say.

That looks like covfefe

that's the joke

came here with my covfefe joke, yours is better

Since #BADA55 keeps coming up:

http://bada55.io/

:+1: This site is better than the OP because it has a voting system

> #111135 -> LILIES

That's really stretching it.

There's one colour standing out, where the hex doesn't match the word: Rebeccapurple (#663399) was named in memory of Eric Meyer's daughter.

https://meyerweb.com/eric/thoughts/2014/06/19/rebeccapurple/

SAFEST is a decent green and ACIDIC is a decent red -- probably going to use these instead of #f00 and #0f0 next time I need success/failure color codes for some hastily-made web thing.

flatuicolors.com is in my bookmark bar for good, quick colours.

It's missing Badass: #b4da55. Lovely green colour :)

Or just simply #bada55

Genuinely, seriously I never noticed this.

aaaand THAT's why we do code reviews!

Which is the colour of all Kerbals in Kerbal Space Program, funnily enough :)

This is great, but I'm not a fan of the "7 looks like a T"... my brain can't make that work. I request an "Ice T" mode that does this:

    Array.from(document.querySelectorAll(".wrap > div"))
      .filter(n => n.getAttribute("name").includes("t"))
      .forEach(n => n.parentNode.removeChild(n));

You could just press "strict" like the instructions says.

7->T is definitely the most oblique of the four numbers. I'd say that 0 as O is completely unobjectionable, and 1 as I mostly so. It's a lot easier for me to read #c0ffee than #7a57e5.

He makes a direct reference to leetspeak [0] which has leet/1337 even in the name. As someone who grew up alongside gaming, the T/7 connection is acceptable without issues.

[0] https://en.wikipedia.org/wiki/Leet

Also, go get from T to 7 is a few degrees of rotation.

#B00B00 is the color of blood.

HN feature request: three character hex code support for topcolor.

Bonus points: named color support for valid CSS colors, such as dodgerblue.

It's supported and it appears in your HN profile once you have a certain karma. The field is called "topcolor".

No, no shorthand values or semantic values are currently permitted. Only six digit hex codes are accepted.

Ah I see. I've never heard of a 3 character hex code and I mentally translated it to "3 hex code".

Isn't it just easier to memorize HTML color names? https://en.wikipedia.org/wiki/Web_colors#HTML_color_names

The idea is nice, but (as a suggestion) I would add a drop down to "strict" where you can tick whether to include 0 (zero) and 1 (one) as respectively O and I, which is what everyone would likely read as well as - maybe - 5=S while the 1 as L (as in 1337) and the 7=T are far less intuitive. To give anyone freedom of choice maybe adding a "selectively strict" button with ticks for each leet letter would be ideal (as an example I cannot read the 2 as R as it is used on http://bada55.io/ ).

The yellow fiesta is similar to the yellow tone of the dishes

https://en.m.wikipedia.org/wiki/Fiesta_(dinnerware)

It makes me both happy and uncomfortable that #dab and #dabbed are valid colors.

Christian Moms Against #dab

I always paint my computer chassis' front panel in drab #facade.

ha! I'm using it for most of the placeholder images http://placehold.it/300/facade/ffffff&text=hello:-%7D

I wonder if they intentionally left out FAECE5? A brownish color

Nice.

One oddity: for some reason, the site's CSS makes text selection highlights invisible. If you select text, the selection looks identical to unselected text, though copy/paste still works.

Also, the color boxes appear to be editable text areas: if you click on one, you can backspace or Ctrl-U and the text of the color vanishes, until you hover/unhover it again and the text gets reset (because of the 1337/LEET translation going on with hover/unhover).

They seem to have intentionally done this, by setting ::selection to transparent. I don't understand why some people think this is a good ideal, for colorblind people this is a real nuisance.

For anyone who wants to select and copy text, this is a nuisance as well. (I wanted to quote something from the page in a comment here, for instance.)

I'm periodically looking for browser extension that disables disabling of selection, but still no luck.

What really annoys is that browsers still select page text as it lays in HTML, ignoring CSS that places it differently. Also the entire fact that selection spans really different blocks, so you have to aim precisely to start and end it at appropriate places.

The main purpose of browser is to manage hypertext. How could that be implemented wrong?

There's "tic", "toe", but not "tac". I guess we need a "even less strict" option.

That likely has less to do with strictness of number/letter substitutions and more to do with "tac" not appearing in the dictionary (unlike "tic" and "toe").

Apologies; I was unclear about what I wanted to be "less strict" (i.e. the dictionary, in this case).

Nice - I built something similar a few years ago, mostly to mess around with CSS columns (http://thejacklawson.com/csswords/). I only used a regex over the system dictionary, so it doesn't include a lot of what it probably could.

You should allow for an alpha-channel then you have two more letters and can do the Java Class file magic number #CAFEBABE.

    aspell -d en dump master | aspell -l en expand|grep -e

'^[abcdefABCDEFlLoOsStT]\{6\}$'

This is brilliant. I am going to be using these colors exclusively from now on in all my designs.

Very cool! I found #c0ffee myself a while ago and it made me quite happy to immediately know which color the title meant.

I didn't think of the other possibilities(like #bada55), but instead opted to shorten it to 3 letter codes. The one I like most is #b00, a nice red.

needs a medium-strict mode with a-f, 1 as I and 0 as O only. those two digits seem a lot less of a stretch than the rest of the leet spectrum

Love the Roy Ayers!

Yeah! The soundtrack (Coffy is the Color) is awesome: https://www.youtube.com/watch?v=5ycOq6NwT_0

Now that I know it, I'm going to be forever sad that #c0ffee color is not the same as the color of coffee :(

Maybe this could be open source? I wish to generate HEX colors using my non-english language.

Implementing this to run on an arbitrary dictionary would be a cute interview question

I found it easier to view after I added `border: 10px solid #111;` to the `.flexer` class

Seems appropriate that #D15C05 (DISCOS) is an ugly, 70s orange-brown.

5AFE57 = safest is cool.

The only time purple testes are not a cause for concern perhaps

My topbar color is #badfoo, which is a somewhat sickly green.

Mine is #BADA55; which is very nearby.

My fav is #baebae

#efface makes a nice background color.

> ctrl + f

> BADA55

> not found

> closes tab

Why did you even open the tab? It says English Dictionary...

http://www.dictionary.com/browse/badass?s=t

#B00B1E is missing

This isn't related to the post content (which was great), but I noticed that HN lists the domain as "surge.sh", which doesn't make a lot of sense because surge.sh is just the web hosting service this site is on.

With the web, the convention right now is to treat the subdomain as a different security origin (with the exception of www). So the link should show c0ffee.surge.sh, not surge.sh.

If this is a manual setting, it probably also needs to be set for neocities.org. I noticed that wordpress.com domains were being subdomained properly.

It really shouldn't be manual, it should just always show the correct origin domain.

There is the Public Suffix List but it doesn't seem to contain those domains. Does HN use that list? https://publicsuffix.org

I was warned to not use it by it's maintainers because it would make the root of our domain potentially unusable. If I understand it correctly, it's designed for things like domain roots (.com), not domains with subdomains.

It is useful for some security protections in such a hosted subdomain scenario which is why herokuapp.com, herokussl.com, github.io, gitlab.io, etc are on the list, but yes, you would not be able to use your primary domain there, you'd need a dedicated domain for your customers and their subdomains.

Namely, having your hosting domain on the public suffix list means that browsers will not allow setting cookies on the suffix (similar to how you cannot set a cookie for ".com"), which prevents rogue websites on the same root domain from stealing sensitive cookie values from other subdomains.

At any rate, wordpress.com is not on the public suffix list either, so that doesn't appear to be the issue here.

Surge is not notable enough to be on that list. I think it only applies to institutions, museums, and things like that. Judging from this anyways: https://publicsuffix.org/list/public_suffix_list.dat

You didn't read through far enough (or, more likely, you didn't ctrl-F well enough). After the "ICANN DOMAINS" section is the "PRIVATE DOMAINS" section. It contains entries like:

- s3.amazonaws.com

- blogspot.com

- githubusercontent.com

but there are many other sites in the list which are less notable.

Indeed, it doesn't really have anything to do with notability. You'll notice none of those root domains you just provided have sites attempting to use cookies on them.

Oh okay thanks for clarifying.

What is your favorite color, IDIOTS?

Not much people understand my humor I believe..

Reply on news.ycombinator.com