18 ms·

Flat UI Colors

145 points by bresc 12y ago

codebeaker 12y ago
Hasn't this been reposted often enough? https://hn.algolia.com/?q=flatuicolors.com#!/story/forever/0/flatuicolors.com https://hn.algolia.com/?q=flatuicolors.com#!/story/forever/0...
- brianmichel 12y ago
  I was about to say, isn't this site a year or more old? It's been the same colors for a while now.
laex 12y ago
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
sspiff 12y ago
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 12y ago
  It provides an interface to the clipboard.
  - toni 12y ago
    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.
  - theallan 12y ago
    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-scripts-and-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.
- adregan 12y ago
  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 http://stackoverflow.com/a/17528590/2236561
ahmetsulek 12y ago
you should also check the flat ui terminal theme I've made https://dribbble.com/shots/1021755-Flat-UI-Terminal-Theme?list=users&offset=10 https://dribbble.com/shots/1021755-Flat-UI-Terminal-Theme?li...
- dawson 12y ago
  I've been using this for a couple of months now, great work and thank you!
jbrooksuk 12y ago
I find that http://flatuicolorpicker.com http://flatuicolorpicker.com provides a better interface. This site never seems to copy the colour code first time.
davidw 12y ago
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
- Semaphor 12y ago
  No need to be old, used blackbox on Linux for a while http://xwinman.org/screenshots/blackbox.jpg http://xwinman.org/screenshots/blackbox.jpg http://fc01.deviantart.net/fs70/i/2011/235/4/8/darko_blackbox_style_by_rajliv-d47e48o.png http://fc01.deviantart.net/fs70/i/2011/235/4/8/darko_blackbo...
  - louhike 12y ago
    I do not understand. The first screenshot has nothing to do with flat design for me. There are reliefs, shadings, etc.
- sdegutis 12y ago
  I always preferred Windows 95's "flat design", even if it did have occasional bevels.
  - oneeyedpigeon 12y ago
    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.
    - mikepurvis 12y ago
      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.png http://www.guidebookgallery.org/pics/gui/desktop/full/win95....
      - jmulho 12y ago
scottcanoni 12y ago
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 12y ago
  I believe they switch out daily.
  - rgbrenner 12y ago
    > I believe they switch out daily. they don't. I've seen this page many times over the past year.. same colors every time.
  - hackerboos 12y ago
    I used them on mockups over a year ago.
- bionsuba 12y ago
  Then don't use them?
lpsz 12y 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?
- renekooi 12y ago
  It's the colours used in the Flat UI Bootstrap theme: http://designmodo.com/flat-free/ http://designmodo.com/flat-free/
  - SmeelBe 12y ago
    You're right, and here http://designmodo.com/flat/ http://designmodo.com/flat/ are swatches with many flat colors.
tomp 12y ago
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?
- moron4hire 12y ago
  Yet the terminal never changes :)
- mmahemoff 12y ago
  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.
  - tomp 12y ago
    > 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).
- GFK_of_xmaspast 12y ago
  "It looks like UI design is becoming like fashion;" How could it possibly be anything else?
  - tomp 12y ago
    It could, you know, be useful. It could be developed according to the principle "form follows function", not the other way round.
vblord 12y ago
This site is really easy to use. I like it. I just wish there were more colors!
thisjepisje 12y ago
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?
drt 12y ago
looking good!
afandian 12y ago
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 12y ago
  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.
  - afandian 12y ago
    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?
    - etimberg 12y ago
      Some of them I like as colours, some I don't (bright teal for instance is just horrendous)
  - a3n 12y ago
    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.
mro95 12y ago
+1 but old.
NicoJuicy 12y ago
I knew i came accross this somewhere : http://codepen.io/noahblon/pen/EGbCs http://codepen.io/noahblon/pen/EGbCs But who was first?
- ahmetsulek 12y ago
  I was the first with http://flatuicolors.com http://flatuicolors.com
  - SmeelBe 12y ago
    Designmodo was first http://designmodo.com/flat-free/ http://designmodo.com/flat-free/ Read the About page on Flat UI Colors.
chetangole 12y ago
Made with Flash! are you kidding me?
deleted 12y ago
[deleted]
oltmang 12y ago
Reading the color names, I thought Nephritis (#27ae60) sounded like something else… http://en.wikipedia.org/wiki/Nephritis http://en.wikipedia.org/wiki/Nephritis
normloman 12y ago
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.
calgoo 12y ago
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 12y ago
Love it! I used it a lot.

145 points by bresc 12y ago

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

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

laex 12y ago

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

sspiff 12y ago

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 12y ago
It provides an interface to the clipboard.
- toni 12y ago
  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.
- theallan 12y ago
  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-scripts-and-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.
adregan 12y ago
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 http://stackoverflow.com/a/17528590/2236561

ahmetsulek 12y ago

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

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

jbrooksuk 12y ago

I find that http://flatuicolorpicker.com http://flatuicolorpicker.com provides a better interface. This site never seems to copy the colour code first time.

davidw 12y ago

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

Semaphor 12y ago
No need to be old, used blackbox on Linux for a while http://xwinman.org/screenshots/blackbox.jpg http://xwinman.org/screenshots/blackbox.jpg http://fc01.deviantart.net/fs70/i/2011/235/4/8/darko_blackbox_style_by_rajliv-d47e48o.png http://fc01.deviantart.net/fs70/i/2011/235/4/8/darko_blackbo...
- louhike 12y ago
  I do not understand. The first screenshot has nothing to do with flat design for me. There are reliefs, shadings, etc.
sdegutis 12y ago
I always preferred Windows 95's "flat design", even if it did have occasional bevels.
- oneeyedpigeon 12y ago
  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.
  - mikepurvis 12y ago
    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.png http://www.guidebookgallery.org/pics/gui/desktop/full/win95....
    - jmulho 12y ago

scottcanoni 12y ago

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 12y ago
I believe they switch out daily.
- rgbrenner 12y ago
  > I believe they switch out daily. they don't. I've seen this page many times over the past year.. same colors every time.
- hackerboos 12y ago
  I used them on mockups over a year ago.
bionsuba 12y ago
Then don't use them?

lpsz 12y 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?

renekooi 12y ago
It's the colours used in the Flat UI Bootstrap theme: http://designmodo.com/flat-free/ http://designmodo.com/flat-free/
- SmeelBe 12y ago
  You're right, and here http://designmodo.com/flat/ http://designmodo.com/flat/ are swatches with many flat colors.

tomp 12y ago

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?

moron4hire 12y ago
Yet the terminal never changes :)
mmahemoff 12y ago
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.
- tomp 12y ago
  > 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).
GFK_of_xmaspast 12y ago
"It looks like UI design is becoming like fashion;" How could it possibly be anything else?
- tomp 12y ago
  It could, you know, be useful. It could be developed according to the principle "form follows function", not the other way round.

vblord 12y ago

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

thisjepisje 12y ago

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?

drt 12y ago

looking good!

afandian 12y ago

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 12y ago
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.
- afandian 12y ago
  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?
  - etimberg 12y ago
    Some of them I like as colours, some I don't (bright teal for instance is just horrendous)
- a3n 12y ago
  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.

mro95 12y ago

+1 but old.

NicoJuicy 12y ago

I knew i came accross this somewhere : http://codepen.io/noahblon/pen/EGbCs http://codepen.io/noahblon/pen/EGbCs But who was first?

ahmetsulek 12y ago
I was the first with http://flatuicolors.com http://flatuicolors.com
- SmeelBe 12y ago
  Designmodo was first http://designmodo.com/flat-free/ http://designmodo.com/flat-free/ Read the About page on Flat UI Colors.

chetangole 12y ago

Made with Flash! are you kidding me?

deleted 12y ago

[deleted]

oltmang 12y ago

Reading the color names, I thought Nephritis (#27ae60) sounded like something else… http://en.wikipedia.org/wiki/Nephritis http://en.wikipedia.org/wiki/Nephritis

normloman 12y ago

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.

calgoo 12y ago

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 12y ago

Love it! I used it a lot.