How do you choose your colour schemes for your applications and/or web designs?
Is it a gut instinct thing or can logic be applied here too? I have looked at some colour theory but my combinations seemed wrong.
I am looking at a monochrome webpage. Rather than pluck colours out of the air as usual I would like to see if there is a science behind this. Links and opinions welcome.
Kuler is a great utility for choosing color schemes that work in harmony.
I have someone else who lives and breathes color and design do it for me.
Most graphic designers make terrible programmers, and most programmers make terrible graphic designers. So I dodge the issue entirely.
To be totally honest, I usually rip off someone elses color scheme for my own personal stuff (for work stuff, hire a designer). I will grab the main color and complimentary color from a site I think looks nice, plug those into one of the hundreds of online color tools out there, and build out a pallet. Once I have the colors down, I will do a few subtle gradients in photoshop, and just sort of go from there.
Colourlovers: http://www.colourlovers.com/
Or just look around. Go around your town with a camera, take random pictures and pick colours. Good places are the fruit section of a market, park, etc.
Use the system defaults for applications. That's where the user sets THEIR preference, which you should honor.
It is a science and an art, and a big one. 61,000,000 results on google for "color design".
You might also be interested in:
http://en.wikipedia.org/wiki/Category:Graphic_design
http://en.wikipedia.org/wiki/Color_theory
Usually I'm told what to use.
If I'm not and have a logo or an image and use this Colors Palette Generator it lets you upload an image and then gives you a generated colour scheme.
If nether I borrow something from around the web.
I bought a designers/printers reference book that contains pre-defined sets of colours and tones. It includes the RGB values for the colours so I can put them directly into my apps.
The book contains sets such as "contemporary", "autumn", "winter", "cool modern".
Your public library should have a copy of the book Color Index which contains various color combinations which work harmoniously. Also, you could look into purchasing a Color Wheel from your local art supply store. It's not expensive, it lets you play with mono, complementary, triad and tetrad schemes. The Color Scheme Designer site is also very nice.
Another alternative is colorcombos.com, which can grab colors from any website. You can browse its library for different combinations or try to change them, then make yours.
Related
Having spent a bunch of time recently doing 2D work that involves pixel manipulation of bitmaps and blending/compositing, I've run up against the limits of my own understanding with respect to colorspaces, non-RGB color worlds, etc.
I'd like to go back to basics and learn how all this stuff actually works, so that I'm not shooting in the dark next time I need to think about how to set up a blend function, and I know how to play with color palettes, etc.
Any pointers for good places to start on the path? Online references good, actual books that are clearly written are better. (Not looking for something that's just piles of equations, but can follow mathy stuff if it's not too terse.)
Thanks!
I liked these tutorials:
http://www.student.kuleuven.be/~m0216922/CG/index.html
I'd like to implement an old film effect on pictures. Does anyone know a library or even the rare maths involved? I'd like it to cope with red shift for over-exposition and the rest. Even if you don't know the maths or a library, a pointer to any technical doc will be appreciated.
Clarification: I need to write these routines for a project of my own. I'd like to know what kind of processing has to be done and how. Doesn't matter the environment and system, I just need some hint on how process RGB data
You mention Magic Bullet from Red Giant Software in your comments. There's an impressive amount of image processing know-how behind the development of Magic Bullet. You'd probably have an easier time implementing a host interface for After Effects or Final Cut Pro plug-ins and using Magic Bullet.
If you want to see some source code in action, examine the open source projects that do image processing like GIMP, CinePaint, FreeFrame, etc.
You could try with as3 bitmapdata noise function http://livedocs.adobe.com/flash/9.0/ActionScriptLangRefV3/flash/display/BitmapData.html#noise%28%29
If you can find a plugin for Paint.Net, I'm sure you could just use that dll in your program. Is this the sort of thing you're looking for?
Rare maths?
Create several different transparent PNGs with scratch and dust marks on it. Take a pic, adjust the hue, saturation and brightness (algorithms for this aren't that complex) to fade out the pic, then overlay one to many of the scratchy PNGs. The more scratch/dust PNGs you have, the more random the effect you can create.
Not much math here IMHO.
Since the vast majority of monitors are 16-bit color or more, including mobile devices, does it make sense to even consider web-safe colors when choosing color schemes? Or is it something that ought to be relegated to history as a piece of trivia?
For those of you that don't know what web-safe colors are:
Another set of 216 color values is commonly considered to be the "web-safe" color palette, developed at a time when many computer
displays were only capable of
displaying 256 colors. A set of colors
was needed that could be shown without
dithering on 256-color displays; the
number 216 was chosen partly because
computer operating systems customarily
reserved sixteen to twenty colors for
their own use; it was also selected
because it allows exactly six shades
each of red, green, and blue (6 × 6 ×
6 = 216).
The list of colors is often presented
as if it has special properties that
render them immune to dithering. In
fact, on 256-color displays
applications can set a palette of any
selection of colors that they choose,
dithering the rest. These colors were
chosen specifically because they
matched the palettes selected by the
then leading browser applications. [Wikipedia]
For me web safe color palette is no longer primary concern. Optimize for the largest target audience.
According to w3schools site visitors:
In January 2009 1% of site visitors had 256 color displays, 95% of users had
24 or 32 bit.
[Update] In January 2015 0.5% had 256 colours, 0.5% had 24 bit and 99% had 32 bit
I found similar numbers from a business app site that I look after:
32-bit 79.01%
24-bit 15.64%
16-bit 5.27%
8-bit 0.08%
I don't think web safe colors are relevant any more. To me, a much bigger problem for smartphones are all the fixed-width 960-pixel wide web pages.
I think the most important thing when choosing a colour palette is keeping in mind colour-blindness. There are a few different types that I know of, but the main thing is making sure that you have enough contrast between colours.
For example green text on a red background might be easier for some to read, but very difficult or maybe impossible for others (5-10% of males!), especially if the values of the colours are close.
For those of us (like me) that didn't know exactly what web safe colors are, they were
developed at a time when many computer
displays were only capable of
displaying 256 colors. A set of colors
was needed that could be shown without
dithering on 256-color displays; the
number 216 was chosen partly because
computer operating systems customarily
reserved sixteen to twenty colors for
their own use; it was also selected
because it allows exactly six shades
each of red, green, and blue (6 × 6 ×
6 = 216).
The list of colors is often presented
as if it has special properties that
render them immune to dithering. In
fact, on 256-color displays
applications can set a palette of any
selection of colors that they choose,
dithering the rest. These colors were
chosen specifically because they
matched the palettes selected by the
then leading browser applications.
It's hard to imagine any of this applying to today's modern displays, since almost nobody runs their display in 256 colors anymore (unless perhaps they are playing an old version of Leisure Suit Larry).
It depends what you mean by web safe colours.
In terms of 16bit colour it's probably not worth worrying about. However Colours do not appear the same across devices. This can lead to all sorts of problems particularly if a designers gamma settings are different to your particular monitor set up.
So you still need to test your design across multiple set ups.
In my opinion, it's just history.
Yes, it's definitely a thing of the past. Place its importance right next to your marquee tags.
IMHO the point is really moot. Colors that aren't web safe are dithered anyway. It may not look the best in 256-color modes but as long as functional elements of the page/applications are not dependent on those colors it will not disturb the user experience that much.
Also most users surfing in 256-color modes will be aware of the fact colors will be dithered as I don't think that a lot of sites adhere to the web-safe colorschemes anymore.
According to research, even the web safe colors were not web safe. It was an interesting idea while it was relevant, thankfully that's over now.
Web safe colors are pretty much not a problem anymore unless you are dealing with consumers that will have legacy (think > 10 year old) video display equipment.
It's still important if your target very poor to developing nations, such as countries in here south asia. I personally have a full blown IPS monitor with Windows 10, so it's not a problem to me, but we are minorities, and majority of them have old hardware/computers/operating systems except mobiles phones, as it's cheap to buy a latest mobile phone, but computer hardware are expensive due to the taxes/ import cost etc.. compared to the salary of an average person.I personally witnessed many people still use old Windows XP, 98 PC with 256 colors on Pentium 4 processors. So if you target such audience, it's better to use web safe colors, but if you are doing a business it's not worth, as they are less likely to be your customers, but if you are doing an information site, a blog, an activist site that people can read and get informed without having to pay for something then always use fallback theme or something with web safe colors. since such people are mostly on windows xp/98, try to detect the OS, and if the user is from such operating systems, then use the fallback theme.
So remember that, most of people in this world are poor, and most of people still use old hardware and technologies. If you want to cover them all without working a lot hard on your current theme, then always use fallback themes. One for old mobiles, one for old desktop displays, one for modern displays and modern mobiles (responsive)
Some colors do not display on some mobile devices. (trying to make a list)
The title bars are supposed to be a blue fade from CSS:
background: linear-gradient(to bottom, #0099CC1, #0033CC) repeat-x scroll 0 0 #006DCC;
On many devices the background is not visible, and the header looks like white-on-white.
So, I'm just trying to explain the tip to determine browser-safe colors just by looking at its hex code
For a hex color #xxyyzz, the color is browser safe if
For pairs:
position 12 i.e xx values are same
position 34 i.e yy values are same
position 56 i.e zz values are same
Allowed values are
0
3
6
9
C
F
I especially hear it from those advocates of "business" notebooks manufactured by IBM/Lenovo, HP, Dell (maybe) that "business users do not need quality screens". They stick in the worst possible LCDs out there (even if with a high resolution) and dare to sell that crap. You can't even distinguish hue variations like light-yellow vs. light-grey.
I really miss it - do all of you agree color reproduction of a developer display is irrelevant, be it even a grayscale display it will do?
I understand most of developers work with text but... at times there is some design work to be done which is not doable on cheap LCDs.
And besides - wouldn't you enjoy fresh saturated colors even in a development environment? Bright cheerful icons on menus? Isn't it better to sit in a sunny office with green trees and flowers out of the window than in a garage with dark colors and weak artificial lighting?
P.S. Inspired by the topic about keyboards: Keyboard for programmers
The question about displays and developers really interests me since a very long time.
Even though I don't need a high quality screen, I appreciate the difference, and like esnoeijs said, an occasion will arise where I'll need to critique some graphic design work where the quality monitor will make a difference.
I think, "developer" is too broad to give a precise answer.
If you are a code-crafter of programs reading text emitting text, without the need to make some colors look nice, then yes, then you really can go with a monochrome screen. you need black as a background, white as the foreground and some reversing to highlight matching braces. In this particular case, I would value high resolutions far far more important than colors, since usually it is about seeing more code (and especially, more things about and around the current piece of code, like documentation, tests, a quick interpreter loop, some research paper, you name it).
If you are a developer just learning a language and if you have an editor with syntax highlighting, then color is a massive, massive usability leap. I would not want to miss the ability to display keywords in a bright pink, strings in a brigt cyan and similar things (all on a black background)
If you are a frontend-designer, then it is a completely different story. If you are a frontend designer, you will need a high quality display with good color display abilities. You do not need the best one possible, but your display should at least be able to display the colors your regular user will use, so you will not put in green, because you wanted blue and your users see yellow (or other nonsenses).
if you use tools that require the use of colors in order to encode information, color is crucial, because you might be unable to see the additional information.
...
So, I think, most programmers do not need some ridiculous color displaying abilities, even though, most of the time, a good solid color display is helpful, because they need to work on some frontend or because they want to learn some language.
HTH,
Tetha
Better quality color monitors can come in handy in a lot of ways. The first way that comes to mind is if you are using a code development tool that has the capability of highlighting keywords such as Zend does.
I once spent half a day trying to add zebra striping to a table in my company's webapp that already had it because both my screen and QA's screen were unable to display the different colors of the zebra stripes (they rendered as the same color). Likewise, I once had my boss ask me to change the color of part of an icon, and to me it made the icon look like a uniform blue, but on his much better monitor, you could clearly see both shades of blue and it looked really nice... it was hard to make that edit without being able to see what I was doing.
I guess the developers in my company end up doing some design work in addition to real dev. I do spend most of my time in the shell though, so aside from the constant flickering that gives me headaches (yes, it's an LCD), a low-qual monitor is OK.
I'm a developer but being in webdev land i've picked up enough design stuff to be critical about it, so i mostly try to get samsung screens with a good colour range.
With a good monitor, you can adjust it to your likings.
Personally, I have a $700-Fujitsu Siemens monitor bought in (afaik) 2000, and a $340-BenQ bought in 2005, and I prefer coding on the first monitor, as I don't have to crank up the brightness (reducing headaches) and can still see everything I want to see (subpixelhinted 6 point fonts, subtle variations in syntax highlightings etc.).
At least one author would disagree. He ranked color accuracy on four notebooks:
Lenovo ThinkPad W700
IBM/Lenovo ThinkPad T60
Dell Inspiron Mini 9
Apple late-2008 MacBook Pro 15 inch
I'm less picky about the actual monitor I have and more picky that I have two monitors that are exactly the same model and use the same video connector.
As a web developer, it can be frustrating to have colors that don't match because one of your monitors is VGA and the other is DVI.
Possibly the sort of "business user" who works on invoices all day does not need a very good display, but anyone who works on anything whose appearance counts, from software developers to business users who need to make Powerpoint presentations, does.
If you are a hardcore terminal+vim user like me, they color quality and fidelity are almost irrelevant, except for the quality of blue (which I use in some situations, like directory names) which tends to be too faint to be seen on my black background. Nothing that cannot be fixed with some tinkering though, but I am used to blue.
That said, I actually have a couple of things to say about the new screen on the macbook unibody. The glossy finish is a real pain. So annoying. And the color fidelity is very low. I spent an evening trying to understand why on a gradient from light green to white I had a pinkish stripe. Turns out that the pink is an artifact of the macbook screen. Another screen does not show the issue. On the plus side, the LED backlight is very powerful and nice, making the colors very vibrant.
This to say that color fidelity is fundamental if you use color-intensive stuff like eclipse (which communicates a lot also through different shades of colors), and of course for web frontend development. If you just need a terminal and a vim running, I don't think color fidelity makes a real difference, once you have a comfortable setup with low reflections, and a good contrast.
(note: it's been a few years since I've shopped for a monitor. this may be out of date)
I find it interesting that nobody has really defined "quality" yet, other than to say more vibrant colors. Generally, LCD panels fall into one of two tracks:
Good color/image reproduction (S-IPS panels and similar)
Good response time ( TN panels )
I consider SIPS and similar panels a must for development for one crucial reason: look angle. The image doesn't change colors or do other weird things as you angle to the screen changes. Very important for collaboration.
At the high end of this scale are monitors that are designed to perform will with color calibration. Most developers won't need anything this fancy.
TN panels are decent for gaming, movies, and other things featuring fast motion. They are optimized for pixel response time, and it's usually the main feature touted for these panels. Many cheaper panels are going to be of this variety.
In a monitor, I look for four things:
panel type (S-IPS or similar)
brightness (no more than 300cd/m2)
dot pitch (for good text, go with a small dot pitch: 0.27 is too big)
good contrast/ light leakage/ etc. (how black is black, and how uniform)
Although I love S-IPS panels, I must admit that any LCD monitor that can meet criteria 2-4 above would be a good choice, even if it's a cheaper TN panel.
It depends what you're doing.
If you're dealing processing images, yes, a good "quality" monitor is important.. but equally (or more) important to have it set-up correctly and calibrated.
If you're doing web-design, having a decent monitor is important, but again only if it's setup correctly (contrast/brightness/colour-balance).
If you're just "writing code", having a monitor your eyes like is important, the colour replication isn't important. A monochrome monitor might be stretching it, syntax-highlighting is nice, but even vim and it's 16 colours is "enough"
The term quality is also a bit "it depends" also.. CRT's have far better colour replication than TFT's, but I wouldn't recommend them (I always found reading text on them difficult, and they are hard to find, bulky and generally deprecated now).
For web-design, pretty much any monitor will be fine as long as it's not a 10 year old CRT with a broken red cathode-tube.. Again, as long as it's set-up correctly, most monitors are capable of displaying colour "good enough"
For "writing code", I think size/resolution/number-of-screens is more important than colour replication, as shown by most answers to any of these questions
Like any responsible developer, I'd like to make sure that the sites I produce are accessible to the widest possible audience, and that includes the significant fraction of the population with some form of colour blindness.
There are many websites which offer to filter a URL you feed it, either by rendering a picture or by filtering all content. However, both approaches seem to fail when rendering even moderately complex layouts, so I'd be interested in finding a client-side approach.
The ideal solution would be a system filter over the whole screen that can be used to test any program. The next best thing would be a browser plugin.
I came across Color Oracle and thought it might help. Here is the short description:
Color Oracle is a colorblindness simulator for Windows, Mac and Linux. It takes the guesswork out of designing for color blindness by showing you in real time what people with common color vision impairments will see.
Color Oracle is great, but another option is KMag, which is part of KDE in Linux. It's ostensibly a screen magnifier, but can simulate protanopia, deuteranopia, tritanopia and achromatopsia.
It differs from Color Oracle by requiring an additional window in which to display the re-coloured image, but an advantage is that one can modify the underlying image at the same time as previewing the simulation.
Here is a screenshot showing the original figure on the left, and the KMag window on the right, simulating protanopia.
Here's a link to a website that simulates various kinds of color blindness:
http://www.vischeck.com/
They let you check URL's and Screenshots with three kinds of different color blindness types (URL checking is a bit dated though. Image-check works better).
I'd encourage everyone to check their applications btw. Seeing your own app with others eyes may be an eye opener (pun intended).
I know this is a quite old question, but I've recently found an interesting solution to transparently simulate color blindness.
When working with Linux, you can simulate color blindness using the Color Filter plugin for Compiz. It comes with profiles for deuteranopia and protonopia und changes the colors of the whole screen in real-time.
It's very nice because it works transparently in all applications (even within Youtube-Videos), but it will only work where Compiz is available, e.g. only under Linux.
Here's an article that has some guidelines for optimizing UI for color blind users:
Particletree » Be Kind to the Color Blind
It contains a link to another article with the kind of tools you were asking for:
10 colour contrast checking tools to improve the accessibility of your design | 456 Berea Street
A great paper that explains a conversion that preserves color differences is:
Detail Preserving Reproduction of color images for Monochromats and Dichromats.(PDF)
I haven't implemented the filter, but I plan to when I have some more free time.
I found Colour Simulations easy to use on Windows 10. This software can apply a color-blind filter to a part of the screen or the whole screen. And what's great is it allows me to interact with my PC normally as if it doesn't exist in fullscreen mode. It runs quite slow in my 4K screen using an integrated graphics card, though.