Hacker Newsnew | past | comments | ask | show | jobs | submitlogin
Flat UI Colors (flatuicolors.com)
145 points by bresc on Oct 21, 2014 | hide | past | favorite | 121 comments


You guys just aren't old enough to remember twm, the original flat design.

http://upload.wikimedia.org/wikipedia/commons/6/67/Twm.PNG


Here's AmigaOS 1.x:

http://www.gregdonner.org/workbench/wb_13.html

(2.x went bevelled, and none of us looked back)


Whoa! That brings back memories. Even more than the NeWS interface I brought up on one of our Suns recently, just for fun.


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

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


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


The Jabberwock, with eyes of flame...


“Remember”? I still use it.


I always preferred Windows 95's "flat design", even if it did have occasional bevels.


My memory (admittedly, ropey) of Windows 95 is that it was very, very 'unflat' - e.g. the start menu alone was a hefty, three-dimensional button.


Seriously. It's like scaling Mt. Everest to get to the program you want to launch: http://www.guidebookgallery.org/pics/gui/desktop/full/win95....


Windows 7 is worse. It is like find what you are looking for on Mt. Everest while looking through a tiny 6 inch by 3 inch view port.


You don't have to be older. twm is available on FreeBSD and I'm sure it can be installed on Linux.



I do not understand. The first screenshot has nothing to do with flat design for me. There are reliefs, shadings, etc.


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.


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.


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


I like that design a great deal, and at a glance I find it subjectively more readable. I'd have to A/B test it with real wiki content for a while to be sure.


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.


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


When I look at code in a text editor I prefer it to be colored. All white text on black puts me to sleep. It's also easier to see that this is not the same kind of thing as that.


I like colours too. I'm not talking about colours, I'm talking about these colours.


I do like these colors.


Design isn't about us liking those tastes or not. One part is about ergonomy of course, and the other is about looking up-to-date. Just watching the colors of a website/app, you could tell which year it was made and whether it's well maintained or not.

One could ask "Why do we define a fashion, given this fashion costs heaps to everyone in the industry and isn't necessarily nice or ergonomic". Remind that for every free land, humans will populate it, define rules and laws and regulations and fashions and richness, and whether it is good or not it can only go forward, with more laws, regulations, fashions and richness.

And taste only tells how close you are with society and how distinct you are from uniformity. http://xkcd.com/915/ So you must both stick to the trend and stay peculiar. The trend is defined by very few "haute couture" designers in the industry and we're only adapting it to our clients.


That's kind of my point. Do you like the colours (specifically these ones, or colours like them) because they're an alternative to grey or do you actually like them in and of themselves?


Some of them I like as colours, some I don't (bright teal for instance is just horrendous)


I don't think minimalism is going to be a trend. There are plenty of reasons why bevels, overuse of gradients, drop shadows and on and on turns users off. Though you might be used to something different flat design is easy on the eyes. Flat design is relatively consistent. There was never any consensus for example on how much drop shadow a button should have. Removing the shadow entirely eliminates one more point of inconsistency between experiences.

Older people are a great example of why consistency matters. Whenever I show my ageing mother a new website and it isn't incredibly clean + simple to look at it. Her brain shuts right off, she stares at it and waits for me to do something with it.

The first time she saw Android on her new Nexus she immediately was able to start tinkering with it. Flat design, limited colour and gradients, fewer distractions.

I don't understand the complaint about the colours being used on flat designs. Do you have your screen brightness turned all the way up? Turn it down you might notice how bland and grey a lot of older websites look - bevels don't save them.


The colors at flatuicolors.com are anything but easy on they eyes. Furthermore, in the flat designs I have seen you find out that a rectangle isn't a button when you click on it and nothing happens.


Well if you can't tell if something is a button or not, that is a poor design. If you design consistently, and treat all elements of the same type the same way, there would be no second guessing. It's not even hard to do, just requires a bit of planning.


So what is the accordance for a button in a flat design?


It's up to the designer. But as long as it's used consistently through the design and it's different enough from other elements, your users won't have any issues.

Either one of these would work: http://jsfiddle.net/5u2j549q/


Where's the affordance in those? They don't look any different to badges.


I was talking specifically about the choice of colours. Not necessarily even criticising the flat UI trend.


Well then it's just a matter of taste, I like the nintendo-esque bright colours. If there is a bright green button, a bright blue button and a bright red button I feel what those buttons do before I even read them.


On the internet, nobody knows you're a dog. With flat design, nobody knows you use MS Paint.


Hear, hear. Flat design is an awful trend. Removing functionality for simplicity - too many times 'flat design' has rendered applications almost unusable.


I really despise opening Google Maps nowadays on my phone. There have been so many updates that cripple it and make it worse. Really hope someone comes along and puts a good replacement out. Recently it won't even show results on the map easily.

My search results come up as cards with a tiny sliver of map, then I click on the map and they all disappear, sometimes if I scroll around desperately some will load eventually. But all I wanted in the first place was a full screen map with some icons, not one by one cards to click, also with tiny slivers in them.

Not even an isolated incident. I takes half a dozen clicks when getting directions now as well and several other tasks. I don't think the Google graphics designers are being forced to perform usability studies like they should be. If they were, they would realize some level of 3D actually helps users determine what is clickable or not.


Removing functionality is not "flat design" that's just bad design.


Couldn't agree more. It's just designers trying to justify their own salary.

I like interfaces that have nice 3D effects, especially on a window manager. I like high information density. I like being in control and having a customisable experience. Metro flies in the face of all of those.


As a designer who also writes code, this attitude really frustrates me. There are a lot of reasons that flat UI makes more sense for software, especially for responsive web.

Flat UI means less code and easier maintainability. It holds up better across a wide range of sizes. It makes it easier to have a style guide in code and create reusable modules. This allows the design team to focus on the bigger-picture user experience instead of perfecting button gradients.

High information density is great in many applications, especially interfaces supporting complex tasks for expert users. However, it takes a lot of work to design a great high-density interface. I feel like most of the high density interfaces I see are more of a case of the design or product teams not being able to make hard decisions about what's really important.

While some flat UIs certainly go too far in the other direction, I firmly believe that minimalism encourages good design by forcing a conversation about what information to prioritize. Especially for the mainstream consumer web, this is almost always better for everyone.

Finally, I don't appreciate this kind of attack on my profession. Good design is far closer to engineering than to taste. I don't think I'm hoodwinking people into hiring me.


Aesthetics are just as much a matter of taste as they are engineering. A lot of code frankly lends itself to such verbosity/elegance/simplicity/density/readability/(...) because of cultural:personal [preference, pedantry, experience, understanding, knowledge base].

Rather, I'm not so quick to have an opinion on aesthetics, because I think philosophically, beauty defines a balance between simplicity and engineering. Every part expresses itself perfectly.

There are ideals that work across the majority, and there are ideals that are appreciated by a niche audience. There is the Ideal, which is never achievable, and there is the expression of the Ideal, which always exists. Engineering or design, I don't see a difference. Different content, same concept.


Not to mention, FD UI is more performant than anything else.


Can you point me to some data on that?


Here's a pretty cool article from High Scalability on it: http://highscalability.com/blog/2014/9/29/instagram-improved....


Looks like they did a lot of other things at the same time (like not creating app-wide singletons up-front). It would have been nice to see numbers just for rendering.


So you're telling me what I like?

Nice one, apple.


> It's just designers trying to justify their own salary.

Seems a little unfair.


>> > It's just designers trying to justify their own salary.

>> Seems a little unfair.

Not when you've been using computers for 35 years and have seen it migrate from flat to nice to gratuitous and now back to flat.

The original bevels on buttons were a nice indicator that it was in fact a thing you could push. Lots of subtle cues were added in the late 90's and UI probably reached a high point. Then the graphics hardware got awesome and compositing with lots of effects became possible. These were used because they looked neat at first glance. Designers wanted to stand out and went crazy with bling. Then there was backlash, and now the trend is toward flat, simple, and frankly - in many cases - ugly UI. The pendulum is swinging too far back the other way IMHO. But not to worry, it will go back in time and we'll eventually have another high point. Probably better than the previous high since touch and swipe and all kinds of new things will be properly part of the picture.


You might be right about trends, but you didn't substantiate your lowball comment on salary whatsoever.


The “lowball” comment about salary was made by blueskin_, not phkahler.


Got it, thanks. The other guy did say: "Not when you've been using computers for 35 years and have seen it migrate from flat to nice to gratuitous and now back to flat."


No, it wasn't.


> [lack of] high information density

This is one of the biggest crimes of flat design. Let's throw away all the opportunities for high information density and replace them with flat blocks of color!


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?


I'm with you on this. iOS did go too far with all the skeumorphism that served no purpose (Podcast app being the biggest offender), but "flat design" throws the baby out with the bathwater in my opinion.

I'm already tired of guessing what is and isn't a button.


If only there was an operating system that would let you to choose from different themes for the desktop environment. /s


If only people realised that design is more than a theme.


If only people realise that Flat UI is more performant in mobile


It isn't performing for me in mobile. I am pushing a rectangle and nothing is happening.


Idea: someone should create a slightly snarky design site that tells you all the fonts, styles, and colors you should be using now to look 'modern'.

Bonus points if you mention the last time a particular trend surfaced.


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

How could it possibly be anything else?


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.


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


Fashion is a science, or at least it is governed by human behavior in their sense of time. "Freshness" provides a feeling of improvement over time, while "staleness", though more familiar and comfortable, provides a sense stagnation, that time is frozen. It is really no wonder why young people are interested in being "fashionable" (they want time to progress, they want change) while old people are often not so interested in it (they already have a lifetime of change to reflect on).

For many websites, sure, it is superfluous, but the psychological effects are massive; ignore it at your own peril.


It's pretty much the same with applications and websites. The "trendy" ones seem to have fancy interfaces that are useless (I'm thinking of this trend in web page design to have vertically scrolling pages where each page is a different color background and has about 3 words of actual content on).

Real applications pretty much ignore all that and look like they always have


I think that modern ui design is being approached more like package (graphic) design. That is: when your product is displaying on shelves with ten similar products you need to make it flashier and more colorful, yet similar to everything else in the same category. All cereal package design looks similar, yet, everyone tries to outflash everyone else.

For some reason, we designers are still designing with this mentality.


It could, you know, be useful. It could be developed according to the principle "form follows function", not the other way round.


Form follows function is incredibly undetermined. Multiple divergent designs can execute/allow the same functionality to the same degree.

This is especially true in software. Some additional constraints must be put on to narrow down on a single design. Maybe the constraint is developer familiarity, or developer laziness, or fashion, or whatever.

While there can clearly be 'too much' fashion, its not quite a given that current trends lie in that area, any more than previous trends have.


There are lots of books on evidence-driven UI design.

It depends whether you mean fashion in design principles driven by evidence or visual fashions like in clothing. I think both are inevitable to some degree.


This has been the case for the web since day 1. I can remember all sorts of trends that everyone followed, some of them examples of terrible UI. Anybody remember the super-tiny and/or monospace text phenomenon of the early 00s?


Yep... used to design anime sites with that all the time, font was 04b03. Size 10 with 2 pix border (black text, white border!)


It's because flat UI looks good on retina / 5k.


I don't necessarily agree with this. I think the reason why flat UI is having a moment is the same reason minimalism in general works. You get to remove anything things that are superfluous and focus on data/information. As awesome as spinning 3D globes and background rivets are, I prefer flat design when it comes to getting information.

I think it's best to try to get rid of unnecessary garbage in your UI, maybe that's the skeuomorphism, or maybe it's the amount buttons, images, content, etc. If done well, flat design is a usability win.


> It's because flat UI looks good on retina / 5k.

I can't tell if you're being serious. But if you are, could you explain why?

Otherwise, this is one of many reasons I don't like flat design. It doesn't take advantage of all those pixels. It's just a flat wash of color.


A few reasons. Things like gradients and other skeuomorphic components that are usually jpegs look horrible if you don't have fallbacks for retina. The screen is brighter and crisper, so those vector buttons look great. etc.

My girlfriend has, I think, an android 2.3 phone. Flat designs are HORRIBLE on it. However, they look crisp on a retina phone, so much that it actually look like the screen is made of physical (material) components.

As for people liking it or not? That's just a trend. We are going back to skeuomorphism in a few years, mark my word.


It doesn't "look good" because some weird combination of large screen and flatUI, rather its easy to render on the screen because it has the same flat color in large areas than some sort of shading.


Not really, Apple introduced transparent/translucent windows, it doesn't really simplify the rendering. BTW, Microsoft already made this mistake with Vista, and AFAIK regrets it (also, Windows look terrible on Remote Desktop because of that).


Yeah, because we've all had 5K displays for, like, for-EVER now...


This is nothing new. As long as there have been GUIs, platforms have issued style guides to developers and expected them to emulate the look-and-feel of the platform's own OS and flagship apps. Remember "lickable" OSX?

Flat itself is a design fad like any other, and the reality is the app's appearance and adherence to trends is a real signal of quality to most users.


> As long as there have been GUIs, platforms have issued style guides to developers and expected them to emulate the look-and-feel of the platform's own OS and flagship apps.

There's a difference between having a platform-specific GUI/style-guide (which I support), and changing it every few years for no apparent reason (I understand e.g. the change from Apple OS 9 to OS X - they were simply catching up with the hardware improvements - but OS X to OS Y(osemite) seems quite arbitrary).


> UI design is becoming like fashion

I think it's always been fashionable to have a modern UI. Just look at windows (the concept). I think the trends are just moving faster nowadays, as the tools to related to developing UIs become more accessible.


With the new higher dpi displays, they now follow modern print design conventions instead of some pseudo 3d look, which does not look all that good when viewed at high resolution.


It's because skeuomorphism worked when you had screens of a consistent size. Ie, iPhone 4s and below. Because skeuomorphism is so bitmap heavy it doesn't scale to different screen sizes.

Imo flat design came largely from responsive web design. It's just easier to build nice looking ui which adapts to any screen size when it's flat. This of course was why it suited android, because they have hundreds of diff screen sizes to cater for...


I have to agree - I predict that in 3 years, metro will look very dated and design will be focusing on actual information density and nice effects again. It's just sad we have to sit through this wave of crap before that happens.


I don't know, I think a lot of the design trends right now are being driven by touch interfaces. When the mode of interaction is the ridiculously inaccurate finger, you HAVE to have giant swathes of empty space, otherwise nobody is able to actually hit what they want.


Exactly. Soon enough, people will stop trying to force the same UI on every device, and mouse interfaces will get better again.


Agreed. Design seems to go through phases.

http://gbatemp.net/attachments/windows8-fail-jpg.2755/


Honestly I too felt that current OSx redesign is pointless though I like Google material design...kind of strange taste I have.


Yet the terminal never changes :)


I think it comes from trying to make screens appear like paper prints - some people love the feel of reading books/magazines and skeumorphic design elements feel disturbing to them.


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.


I've become partial to the "trello style" clipboard solution where on hover, a hidden input's text is selected and all you need to do it command-c and you've selected the text.

It's a pretty good intermediary until — one mythic day — we can access the clipboard via js.

EDIT. Link to relevant stack overflow answer describing the flow: http://stackoverflow.com/a/17528590/2236561


It provides an interface to the clipboard.


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.


The sooner the Clipboard API is implemented across all browsers the better (specifically the newer synthetic events): http://www.w3.org/TR/clipboard-apis/#integration-with-other-... ! That will go a long way to eliminating the final use I have for Flash.


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?


Then don't use them?


I believe they switch out daily.


> I believe they switch out daily.

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


I used them on mockups over a year ago.


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?


It's the colours used in the Flat UI Bootstrap theme: http://designmodo.com/flat-free/


You're right, and here http://designmodo.com/flat/ are swatches with many flat colors.


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?


you should also check the flat ui terminal theme I've made https://dribbble.com/shots/1021755-Flat-UI-Terminal-Theme?li...


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



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


I find that http://flatuicolorpicker.com provides a better interface.

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


I knew i came accross this somewhere : http://codepen.io/noahblon/pen/EGbCs

But who was first?


I was the first with http://flatuicolors.com


Designmodo was first http://designmodo.com/flat-free/ Read the About page on Flat UI Colors.


Made with Flash! are you kidding me?


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


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.


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

http://en.wikipedia.org/wiki/Nephritis


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.


Love it! I used it a lot.


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


+1 but old.


looking good!




Guidelines | FAQ | Lists | API | Security | Legal | Apply to YC | Contact

Search: