vmarquet 9 years ago

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.

  • eriknstr 9 years ago

    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.

    • ubernostrum 9 years ago

      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".

lol768 9 years ago

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!

  • nsomaru 9 years ago

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

    How do you do that?

    • JoshTriplett 9 years ago

      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.

    • dyarosla 9 years ago

      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.

    • LeonM 9 years ago

      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.

      • Theodores 9 years ago

        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.

        • WrtCdEvrydy 9 years ago

          > 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.

          • ovao 9 years ago

            What would you guess is the ratio of each?

            • WrtCdEvrydy 9 years ago

              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).

          • devdad 9 years ago

            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.

            • cyphar 9 years ago

              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).

              • osandov 9 years ago

                File modes are typically written in octal, not hex.

                • cyphar 9 years ago

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

          • wolco 9 years ago

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

          • madeofpalk 9 years ago

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

        • infogulch 9 years ago

          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.

        • Nursie 9 years ago

          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.

          • wruza 9 years ago

            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.

            • Nursie 9 years ago

              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.

              • wruza 9 years ago

                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.

                • Nursie 9 years ago

                  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.

                  • wruza 9 years ago

                    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?

                    • Nursie 9 years ago

                      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!

        • wruza 9 years ago

          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.

      • wruza 9 years ago

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

  • asmosoinio 9 years ago

    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.

    • JoshTriplett 9 years ago

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

      • asmosoinio 9 years ago

        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.

    • Twirrim 9 years ago

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

      • Aardwolf 9 years ago

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

  • kngl 9 years ago

    there is also #F1A5C0 / FIASCO

    • cestith 9 years ago

      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.

  • myth_buster 9 years ago

    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

    • lol768 9 years ago

      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.

  • zakk 9 years ago

    > 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.

  • vacri 9 years ago

    > 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...

  • deepakb358 9 years ago

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

nailer 9 years ago

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.

  • alikoneko 9 years ago

    #B0BCA7 is also the color of a bobcat.

    • madcaptenor 9 years ago

      #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.)

    • ch4s3 9 years ago

      I really liked bobcat, but did not enjoy #B1DE75

  • hinkley 9 years ago

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

atemerev 9 years ago

#c0fefe, you wanted to say.

  • victormustar 9 years ago

    came here with my covfefe joke, yours is better

oxguy3 9 years ago

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.

  • madeofpalk 9 years ago

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

turkeywelder 9 years ago

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

  • K2L8M11N2 9 years ago

    Or just simply #bada55

    • turkeywelder 9 years ago

      Genuinely, seriously I never noticed this.

      aaaand THAT's why we do code reviews!

    • yunruse 9 years ago

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

mrspeaker 9 years ago

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));
  • wingerlang 9 years ago

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

    • 3JPLW 9 years ago

      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.

      • wingerlang 9 years ago

        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.

madcaptenor 9 years ago

#B00B00 is the color of blood.

pavement 9 years ago

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

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

  • chrisbennet 9 years ago

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

    • pavement 9 years ago

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

      • chrisbennet 9 years ago

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

jaclaz 9 years ago

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/ ).

Etheryte 9 years ago

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

  • TrickyRick 9 years ago

    Christian Moms Against #dab

boozelclark 9 years ago

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

JoshTriplett 9 years ago

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).

  • vegardx 9 years ago

    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.

    • JoshTriplett 9 years ago

      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.)

      • wruza 9 years ago

        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?

merraksh 9 years ago

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

  • JoshTriplett 9 years ago

    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").

    • merraksh 9 years ago

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

ajacksified 9 years ago

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.

waynecochran 9 years ago

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

oever 9 years ago
    aspell -d en dump master | aspell -l en expand|grep -e 

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

19eightyfour 9 years ago

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

jellyd0ts 9 years ago

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.

zem 9 years ago

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

piyush_soni 9 years ago

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

vegbrasil 9 years ago

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

  • pacaro 9 years ago

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

narrowtux 9 years ago

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

ubertaco 9 years ago

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

Scirra_Tom 9 years ago

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

ynniv 9 years ago

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

  • cwisecarver 9 years ago

    Mine is #BADA55; which is very nearby.

pklausler 9 years ago

#efface makes a nice background color.

meehow 9 years ago

#B00B1E is missing

kyledrake 9 years ago

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.

  • germanier 9 years ago

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

    • kyledrake 9 years ago

      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.

      • jacobwg 9 years ago

        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.

        • kyledrake 9 years ago

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

    • sr2 9 years ago

      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

      • LeifCarrotson 9 years ago

        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.

        • kyledrake 9 years ago

          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.

        • sr2 9 years ago

          Oh okay thanks for clarifying.

zyxzevn 9 years ago

What is your favorite color, IDIOTS?

  • zyxzevn 9 years ago

    Not much people understand my humor I believe..