
Flat UI Colors - bresc
http://flatuicolors.com/
======
davidw
You guys just aren't old enough to remember twm, the original flat design.

[http://upload.wikimedia.org/wikipedia/commons/6/67/Twm.PNG](http://upload.wikimedia.org/wikipedia/commons/6/67/Twm.PNG)

~~~
brute
It always bothered me, that the colors of twm are so ugly.

Here is a recolored screenshot using the UI colors cited above:
[http://oi60.tinypic.com/140yiqr.jpg](http://oi60.tinypic.com/140yiqr.jpg)

Now it only needs some font aliasing and it is fit for a revival.

~~~
afro88
I know you posted tongue in cheek, but that's genuinely not that bad with nice
colours

------
afandian
I find the current trendy 'flat' UI pastel-y colours, honestly, disgusting.
Design is a matter of taste, and there's no accounting for other peoples'
taste, but I am genuinely baffled about how anyone could like them.

Obviously _someone_ does.

I wonder whether this is because flat design does away with all the helpful
instinctive visual cues that were developed over the last decades (e.g.
shadows, faux-3d borders etc) and needs to find new colours because there's no
other way of expressing relationships?

Is it the case that designers have been forced to come up with 'more' colours
under duress because of this, and have to try out new colours? Or is it that
people genuinely like them? Or does 'like' not come into it? Or is there just
one very influential designer at e.g. Google who has a different aesthetic to
me?

 __EDIT __: I 'm commenting on the colours on the page linked to this
discussion. Not colours in general.

~~~
etimberg
I'm a programmer not a designer but here's my $.02. As a user I like the flat
UI concept not because of the flatness, but because of the colours. I'm tired
of looking at grey all day and these provide a welcome change.

~~~
interfacesketch
_" As a user I like the flat UI concept not because of the flatness, but
because of the colours"_

I did an unsolicited redesign of a wikipedia article page a few months ago
(mostly a tweak to the current layout). Although Wikipedia is a website rather
than an app, the site's pages are are quite stark and many pages feel bereft
of colour. In my (unsolicited) redesign I added colour to soften the
appearance of the page and to highlight elements. Are the colours superfluous?
Or do they make the page or site more pleasant to read? Opinions very welcome
:-)

[http://www.interfacesketch.com/wikipedia/](http://www.interfacesketch.com/wikipedia/)

~~~
AdenFlorian
Website seems to be having issues. Connection is timing out. Would like to see
what you did with it. I agree that wikipedia could use a redesign.

~~~
interfacesketch
Sorry you're having trouble with the site. I just tried visiting and it loads
ok at my end.

Here's a direct link to one of the designs (PNG image: the file is quite large
at 2.7mb)

[http://www.interfacesketch.com/wikipedia/wikipedia-
article-r...](http://www.interfacesketch.com/wikipedia/wikipedia-article-
redesign-01.png)

------
tomp
It looks like UI design is becoming like fashion; you need to completely
revamp your visual presentation every few years, unless you want to look
ancient. Personally, I much prefer OSX and iOS before it became flat - I
understand why Google jumped on the FlatUI bandwagon (to differentiate
themselves from Apple), but I really don't understand why Apple did too - do
this people _really_ think that there 5 year old's drawings are the height of
visual experience?

~~~
GFK_of_xmaspast
"It looks like UI design is becoming like fashion;"

How could it possibly be anything else?

~~~
DougWebb
It could, and should, be a science. Or at least pragmatic.

If you look at clothing design, the fashion side is mostly outlandish and
completely impractical. Eventually good ideas filter out of that and get into
everyday clothing manufacturing, which is what everyone can actually wear.

The problem with UI design is that UIs need to be used every day, like
ordinary clothing, but its becoming like clothing fashion: changing too often
and usually full of flashy but unusable cruft. This would be ok if it was
limited to a small number of fashionable websites, but instead everyone (but
most developers) want the flashy.

~~~
vidarh
_High fashion_ is mostly outlandish and completely impractical, because it is
about concepts and abstract ideas more than about wearability. High-end
fashion (not _high fashion_ ) on the other hand distils the concepts into
wearable products that the every-day brands emulate.

The gap from high-end fashion to everyday brands is not so big - take a look
at e.g. GQ and look around you to see what people actually wear, and you will
quickly start seeing the same patterns and cuts and colours a few months
offset (because the fashion magazines tends to report on the upcoming season),
just in cheaper imitations - for the most part. And you'll see them spreading
as they filter down the cost ladder.

And by the time "everyone" is wearing the cheap imitations, you'll see people
in the designer brands wearing different styles and the cycle starts again.

It's the same with UI's: There's a continuous cycle of trying to look modern,
refined and exclusive, and so it needs to be regularly reinvented, or it will
look old-fashioned, drab and cheap.

It's not about wanting "flashy" (mostly; there are certainly sub-cultures that
value flashy above following mainstream fashion). It's about wanting "modern"
and "high value".

------
sspiff
Kind of annoying every tile becomes a Flash object when you hover over it.
This makes it much harder for people without Flash to access (like me) to get
the color codes. Even the people with Flash can't see the color code until
they paste it somewhere.

~~~
jbrooksuk
It provides an interface to the clipboard.

~~~
toni
It can also simply show the hex or rgb numbers inside the box as text.
Selecting the text and pressing Ctrl+C should work flawlessly.

------
scottcanoni
What am I missing? Isn't this just a hardcoded set of 20 colors that doesn't
change? What if I don't like those particular 20 colors?

~~~
strickjb9
I believe they switch out daily.

~~~
rgbrenner
> I believe they switch out daily.

they don't. I've seen this page many times over the past year.. same colors
every time.

------
lpsz
What makes these colors "flat UI colors"? (Not trying to be snarky, actual
question from someone who spends much time in Sketch.) Is it just a palette of
somewhat matching colors or is there an underlying theme that I'm missing?

~~~
renekooi
It's the colours used in the Flat UI Bootstrap theme:
[http://designmodo.com/flat-free/](http://designmodo.com/flat-free/)

~~~
SmeelBe
You're right, and here
[http://designmodo.com/flat/](http://designmodo.com/flat/) are swatches with
many flat colors.

------
thisjepisje
So why does the colour change on mouseover? Which colour am I copying when I
click a rectangle while my mouse is hovering over it?

------
ahmetsulek
you should also check the flat ui terminal theme I've made
[https://dribbble.com/shots/1021755-Flat-UI-Terminal-
Theme?li...](https://dribbble.com/shots/1021755-Flat-UI-Terminal-
Theme?list=users&offset=10)

~~~
dawson
I've been using this for a couple of months now, great work and thank you!

------
codebeaker
Hasn't this been reposted often enough?
[https://hn.algolia.com/?q=flatuicolors.com#!/story/forever/0...](https://hn.algolia.com/?q=flatuicolors.com#!/story/forever/0/flatuicolors.com)

~~~
brianmichel
I was about to say, isn't this site a year or more old? It's been the same
colors for a while now.

------
jbrooksuk
I find that [http://flatuicolorpicker.com](http://flatuicolorpicker.com)
provides a better interface.

This site never seems to copy the colour code first time.

------
NicoJuicy
I knew i came accross this somewhere :
[http://codepen.io/noahblon/pen/EGbCs](http://codepen.io/noahblon/pen/EGbCs)

But who was first?

~~~
ahmetsulek
I was the first with [http://flatuicolors.com](http://flatuicolors.com)

~~~
SmeelBe
Designmodo was first [http://designmodo.com/flat-
free/](http://designmodo.com/flat-free/) Read the About page on Flat UI
Colors.

------
chetangole
Made with Flash! are you kidding me?

------
laex
Great colours. If you'd like to use them in OSX, you can use the palette that
I made.
[https://github.com/hemantasapkota/FlatUIColorPaletteXCode](https://github.com/hemantasapkota/FlatUIColorPaletteXCode)

------
normloman
5 must have colors for fall, plus 11 hot fashion trends.

Hey dummies: Flat design is a concept. It's not a fashion trend with specific
"in" colors.

Some time ago, a bunch of idiots got their hands on UI design, and are turning
into a fashion show.

------
oltmang
Reading the color names, I thought Nephritis (#27ae60) sounded like something
else…

[http://en.wikipedia.org/wiki/Nephritis](http://en.wikipedia.org/wiki/Nephritis)

------
calgoo
looks good, but the animated icon in the tab title is really annoying. My
brain is wired to connect movement in small tab icons as notification
indicators these days. Its catching my eye every few seconds while reading the
comments here.

------
odoodesign
Love it! I used it a lot.

------
vblord
This site is really easy to use. I like it. I just wish there were more
colors!

------
mro95
+1 but old.

------
drt
looking good!

