
Custom Colors of HN - coconutrandom
https://news.ycombinator.com/topcolors
======
dfc
Changing the topcolor is more than a simple matter of aesthetics; the topcolor
also serves as a signal for whether I am logged in.

I have to say that _dfcdfc_ is a nice topcolor. But don't take my word for it,
here is another HNer happy with the tranquil bar along the top:

    
    
      > thanks for  the recommendation on your  profile page to use  dfcdfc as
      > the topcolor; I stumbled  onto it over a year ago  and have been using
      > it ever since. [^1]
    

[^1]:
[https://news.ycombinator.com/item?id=5891431](https://news.ycombinator.com/item?id=5891431)

~~~
WildUtah
Changed mine to #dfcdfc and now my life is so much better, I don't know how I
ever lived without it. Maybe this could be a new startup.

+1

~~~
Trufa
I though you were kidding.

------
kyro
For those with enough karma, I'm curious to see what custom logos you've
chosen to replace the Y. And for users who've been here for more than 8600*
days, how frequently do you use the direct messaging feature?

*Edit: 2500 days. Read the wrong stat on my profile. So much for pulling a quick one...

~~~
sharkweek
My favorite one is for those people who get enough karma to have pg's phone
number in the top right corner of the header - pretty cool

~~~
DanBC
I'm surprised there isn't a rumour about a secret HN board accessible by
invitation only.

~~~
justinpombrio
I think you just started one.

~~~
Villodre
I'll propagate it.

------
dmnd
Paste this snippet into your dev console, then mouseover the colours to get a
preview.

    
    
      Array.prototype.forEach.call($$("td[bgcolor]"), function(td) {
          td.parentNode.addEventListener('mouseenter', function() {
              $("td[bgcolor]").setAttribute("bgcolor", td.parentNode.children[1].getAttribute("bgcolor")); 
          });
      });

~~~
hamxiaoz
What does the $$ mean?

~~~
thedufer
Looking at it in the console, it looks like $ returns a single DOM element and
$$ returns a NodeList (array-like object) of DOM elements. Not sure what
library that is.

~~~
reubenmorais
No library, at least in Firefox it's defined by devtools and only works in the
console (provided the page doesn't have it's own $ and $$ globals).

[0] [http://dxr.mozilla.org/mozilla-
central/source/toolkit/devtoo...](http://dxr.mozilla.org/mozilla-
central/source/toolkit/devtools/server/actors/webconsole.js#1016)

[1] [http://dxr.mozilla.org/mozilla-
central/source/toolkit/devtoo...](http://dxr.mozilla.org/mozilla-
central/source/toolkit/devtools/webconsole/utils.js#1407)

Edit: It works in the WebKit devtools too:

[0]
[https://mxr.mozilla.org/chromium/source/src/third_party/WebK...](https://mxr.mozilla.org/chromium/source/src/third_party/WebKit/Source/core/inspector/InjectedScriptSource.js#1315)

------
habosa
I use #bada55, I saw it in a comment on HN and thought it was funny. Pretty
ugly, but I use HNES on my laptop anyway which negates my topcolor.

Also plug for HNES while we're talking about Hacker News aesthetics, it makes
HN way better (collapsible comments, inline reply, new stylesheet) and is open
source. I've contributed and the repo owner (etcet) is very welcoming.

~~~
colinprince
coincidentally, HNES makes /topcolors invisble : (

~~~
etcet
Issue opened:
[https://github.com/etcet/HNES/issues/52](https://github.com/etcet/HNES/issues/52)
:)

------
ginko
Here's a quick and dirty script for parsing the site and rendering the colors
in an RGB scatter plot.

[https://gist.github.com/ginkgo/9656285](https://gist.github.com/ginkgo/9656285)

edit:

There's a couple of interesting things to see here:

* There's a clearly visible diagonal axis of the shades of grey.

* There's a cluster of colors around the default orange value.

* The "pink corner" of the color cube is very sparsely populated compared to the other ones.

~~~
mapleoin
I guess the clearly visible diagonal axis is because people just type the same
distance for all the axes when they choose gray. So they would go like: dcdcdc
or acacac etc.

------
markbao
I wish this included the number of users that use each color, to see if anyone
else uses the (harmonious) #f1e9d9.

[http://cl.ly/image/040u3a1R342q](http://cl.ly/image/040u3a1R342q)

~~~
kyro
What extension are you using?

~~~
markbao
This stylesheet, with tweaks: [http://userstyles.org/styles/16041/hacker-news-
readability](http://userstyles.org/styles/16041/hacker-news-readability)

------
51Cards
I'd like to see a count, or percentage, beside each of popularity.

~~~
davey301
I'd like to see this too!

------
coconutrandom
What's the karma threshold to choose a color?

~~~
8_hours_ago
250 according to this:

[http://ycombinator.com/newsnews.html#12jan08](http://ycombinator.com/newsnews.html#12jan08)

~~~
Fizzadar
Currently sitting @ 249!

~~~
Killswitch
Probably already had an upvote in the 2 hours since you posted this, but if
not, I upvoted you anyway. :)

~~~
Fizzadar
Loads! Thank you everyone - enjoying a nice purple-topped HN :)

------
TazeTSchnitzel
So I wasn't the only one to use #f6f6ef so the bar would dissolve into the
background! :)

~~~
spicyj
Yep, my choice as well!

------
acangiano
I'm surprised to see that I'm not the only one using the, rather arbitrary,
#ccffaa.

~~~
GuiA
Or, are you? There are no counts with the colors; it could well be that every
color past the top 5/10 are used by a single person.

(#7fff00 reporting in- there's nothing arbitrary for me about it though)

~~~
mcpherrinm
Yep: My color #a4157a disappears from the list when I changed it. It's a
1337-ified "Arista", the name of the company I work for which I happen to
think looks nice.

It appears about 1/4 of the way down the list, so I assume most of said list
is unique entries then.

------
sachinag
Ha! My topcolor is pretty much the only thing left of my startup. It's also
weirdly surprisingly close to my current employer's corporate color.

------
bostonpete
Would be nice to see a count of how many people chose each color. I assume the
vast majority of those colors are all equal (i.e. used by a single person).

~~~
nostromo
I'm 99% sure this follows a power law distribution.

------
peterjmag
#000000 is surprisingly high up there.

Lookin' good: [http://i.imgur.com/oMBwQma.png](http://i.imgur.com/oMBwQma.png)

~~~
user24
Yeah, I use #222222 to block out my karma score.

------
sixQuarks
If you get 1 million karma, PG will do your laundry once per week

------
minikomi
Here they are arranged by hue / saturation:
[http://jsfiddle.net/LtnS3/1/embedded/result/](http://jsfiddle.net/LtnS3/1/embedded/result/)

~~~
twelvechairs
Thanks for this. Very interesting!

When you consider that the dominant hue shown against is orange (the logo) it
makes sense that the vast majority of choices are either complementary (blues)
or supplementary (oranges). The fact that there are lots of greens and few
purples is interesting however.

------
codezero
For some fun, grep your local dictionary for qualified colors :) cat words
|grep -i "^[a-f]\\{6\\}$"

or use 4 and add be, or ed etc...

I went with beefed, and it looks like that page is updated in real time.

------
jffry
Why settle for a single color when you can have the HN topbar in literally
every color of the rainbow?

    
    
      @-webkit-keyframes hue { 
          100% { -webkit-filter:hue-rotate(360deg); }  
      }
      body > center > table > tbody > tr:first-child > td,
      body > center > table > tbody > tr:last-child > td {
          -webkit-filter: hue-rotate(0deg);
          -webkit-animation: hue 20s linear infinite;
      }

------
user24
Quick and dirty 3d visualisation:
[http://solidred.co.uk/topcolors/](http://solidred.co.uk/topcolors/)

------
chrismorgan
I like #123456 and #abcdef as colours; #123456 doesn't work here (black on
#123456 is difficult to read) but #abcdef works well.

------
user24
I use #222222 so that I can't see my karma score. That way I don't play HN
like a points scoring game.

------
drblast
Allow me to plug #ddeeff. I think it very nicely complements the orange Y and
the gray background, and it's easy to remember.

I'm mildly colorblind, however, so take my recommendation with a large grain
of salt. But if you're also colorblind you're just going to love #ddeeff to
death.

------
ihuman
Does anyone know if it is possible to change the color of the 'Y' logo gif by
using custom CSS or Javascript? I'm wondering if it is possible to make an
extension that automatically changes the color of the logo to match the color
of the top boar.

~~~
Raphmedia
It would be. You could use something like Greasemonkey or Stylish.

As for automatically using the color of the bar... Simply have the icon with
either a background color, or a black with the opacity at around 5%.

------
FiloSottile
Feeling banal with my white bar now

~~~
elwell
The problem with #ffffff topcolor is active top nav links are invisible.

------
marinhero
I can't change my color on HN :( I didn't even know that this existed!

------
imkevinxu
I've been using a forked version of this Chrome extension. Looks really nice

[https://github.com/imkevinxu/hacker-news-
plus](https://github.com/imkevinxu/hacker-news-plus)

------
kafkaesque
Oh! When I saw Top Colour I thought it was referring to the order of the list
as the most used colours first, in descending order.

Haha. I just realised it means the colour of the top bar the logo is on.

------
chm
I never noticed I had topcolor enabled. Is there a list that details what gets
enabled when? I'm at 566 points and I've just recently been granted downvote
access.

------
rdl
I wonder if the gray people use (I use aaaaaa) says something about individual
monitor choices. I'd probably go lighter if I used a windows machine more.

------
Raphmedia
Personally, I like to use #50b1db. It clashes a bit, but it's a nice blue and
I like it next to the orange of the logo.

I should write a custom CSS for HN...

~~~
girvo
I have an extension in my GitHub for Safari 7 that is custom CSS (with one
rule currently) and JavaScript :)

------
markwakeford
lol @ me hunting around the profile page for the last 5 minutes trying to work
out if its a hidden menu or something.

~~~
rschmitty
Well that beats me trying to click on a color in that list... I'm like: "What
an odd UI to select a color and this crap is broke anyways, nothing changes!"

------
agumonkey
What is .. oh per-profile topcolor option. Never took the time to use that.

------
pazimzadeh
Using the the background-color #f6f6f9 works well.

~~~
pazimzadeh
Er I meant #f3f5eb

------
ChuckMcM
Is there a list organized by colorspace?

------
pbhjpbhj
Uniquely using #99AAFF at present.

------
sgold515
55b6f2 looks like beauty :)

------
amaks
Oh, they have #0b00b5

------
izzydata
Might as well just let people put in their own hex value.

~~~
andrewflnr
Correct. That's why you can in fact, input your own hex value which is where
these come from.

~~~
izzydata
Lovely, pretty misleading article for people who don't have this functionality
unlocked.

------
kbar13
#00dd00 4lyfe

------
zerny
bbbbbb works best for me :)

