TE
TechEcho
Home24h TopNewestBestAskShowJobs
GitHubTwitter
Home

TechEcho

A tech news platform built with Next.js, providing global tech news and discussions.

GitHubTwitter

Home

HomeNewestBestAskShowJobs

Resources

HackerNews APIOriginal HackerNewsNext.js

© 2025 TechEcho. All rights reserved.

Basic colour theory for programmers

109 pointsby actraubover 10 years ago

8 comments

gtaylorover 10 years ago
I took a very heavy emphasis on color math while at school, figured I&#x27;d dump a few more useful resources on the pile:<p>* John the May guy - <a href="http://johnthemathguy.blogspot.com/" rel="nofollow">http:&#x2F;&#x2F;johnthemathguy.blogspot.com&#x2F;</a> - Breaks down advanced color math&#x2F;science concepts in very plain English. Complete with helpful charts and graphs. He&#x27;s very approachable if you have questions. If you are in the print&#x2F;GC industry, you&#x27;ll probably run into him at trade shows.<p>* Bruce Lindbloom - <a href="http://www.brucelindbloom.com/" rel="nofollow">http:&#x2F;&#x2F;www.brucelindbloom.com&#x2F;</a> - Look past the tacky website and into the &quot;Math&quot; and &quot;Calc&quot; sub-sections. Tons of great theory, formulas, and calculators. Make sure you doublecheck the formulas against other sources, I did run into a small discrepancy or two (that I can&#x27;t recall). I&#x27;ve also been able to get responses from him through email, which is nice.<p>* EasyRGB - <a href="http://www.easyrgb.com/index.php?X=MATH" rel="nofollow">http:&#x2F;&#x2F;www.easyrgb.com&#x2F;index.php?X=MATH</a> - More transform&#x2F;delta E functions. Some of these are kind of crude, so I tend to look at Bruce Lindbloom or CIE directly when possible, but EasyRGB can sometimes fill in some gaps.<p>* python-colormath - <a href="http://python-colormath.readthedocs.org/" rel="nofollow">http:&#x2F;&#x2F;python-colormath.readthedocs.org&#x2F;</a> - And of course, I can&#x27;t resist shamelessly plugging my Python color math module.<p>Color math is funky stuff, and at times very hard to get help with. There aren&#x27;t many easily-reached people out there that have a deep understanding of it. But if you keep hammering your head against it, you&#x27;ll learn through osmosis over time.<p>If this is something that interests you enough, RIT and I think Cal Poly both have color science degrees and certificates. Imaging companies eat these graduates up in a hurry.
评论 #8575712 未加载
zefeiover 10 years ago
This is an old article, and so wrong and vague in so many aspects of digital colors. It contains not much more than simple device-dependent RGB&#x2F;HSV colors.<p>To use colors correctly (not many programmers can do this, in fact Chrome&#x2F;Firefox&#x2F;Safari don&#x27;t show the same color for same RGB value on my machine), programmer needs to consider color profiles, gamma correction, white point etc. The sad truth is that RGB is mostly misunderstood from intuition, and most graphic libraries don&#x27;t deal with device-dependencies at all. Luckily, most engineers don&#x27;t have to deal with colors outside sRGB.<p>The absolute best place to read about digital colors (or image processing in general) is efg&#x27;s references: <a href="http://www.efg2.com/Lab/Library/Color/Science.htm" rel="nofollow">http:&#x2F;&#x2F;www.efg2.com&#x2F;Lab&#x2F;Library&#x2F;Color&#x2F;Science.htm</a>. It contains overwhelmingly large amount of info, but they are good info and quite essential for professional work.
评论 #8577010 未加载
drcodeover 10 years ago
Some other points programmers should be familiar with (not an expert here, everyone feel free to correct me)<p>1. In typical situations, 256 shades of brightness of a single color hue are the most we can distinguish and will form a smooth gradient without banding. If you&#x27;re dealing with Green and related colors in the RGB spectrum (i.e. yellows and blue-greens, and near-white colors) it can go a bit higher, to 512 shades- This is why many compression algorithms compress reds and blues more than greens, because it&#x27;s less noticeable.<p>2. Many artists will use opposite colors on the color wheel to darken colors- So to make a darker yellow, they&#x27;ll mix in purple paint (or use purple dithering, depending on the medium.) How this relates to color theory from a psychological standpoint is unclear, but using this approach in UI design (for instance, adding purple detail to the shadow of a yellow object in an icon) often gives clean, elegant results.<p>3. Sometimes, when designing something, you say to yourself, &quot;I want a red here that is just as bright as the blue over there&quot;. However, the psychological basis as to when colors of different hues appear to have the same brightness is a very complex problem- You can&#x27;t just add R+G+B intensities and think that will tell you that two different colors have the same brightness, perceptually. Your best bet is to just &quot;eyeball&quot; colors in this case, unless you have the time to go down some very deep rabbit holes.<p>4. If you are designing for paper printing, expect all colors in an RGB image to look much, much darker and less vibrant than on a monitor. Going from RGB-&gt;CMYK and getting perfect results is another really hard problem out of reach for most programmers (I actually think there&#x27;s low hanging fruit for people to write libraries that help optimize this conversion- Everything I&#x27;ve personally seen that is designed for a layman, such as Photoshop&#x27;s conversion process, seems to be sub-par at helping laymen do this well.)<p>5. There are exotic color spaces like the TSL color space that most programmers are completely unfamiliar with and are designed for better modelling of human perception of color. We programmers should probably be using these color spaces a lot more.<p>6. A good rule for UI design is to only use two colors at most (besides gray tones) on the screen at a single time and maybe one extra color in a very limited way. If you don&#x27;t do this, you&#x27;ll end with an &quot;angry fruit salad&quot; interface (<a href="http://www.urbandictionary.com/define.php?term=angry%20fruit%20salad" rel="nofollow">http:&#x2F;&#x2F;www.urbandictionary.com&#x2F;define.php?term=angry%20fruit...</a>) Microsoft Metro and some of the new &quot;flat UI&quot; stuff is a major deviation from this rule, for better or worse.<p>7. When in doubt, leave the background of a website white. You should have a very, very good reason before using a black or dark green&#x2F;blue&#x2F;brown background on a website. (or so most UI designers will tell you, though of course you&#x27;re free to ignore their advice.)
评论 #8574994 未加载
评论 #8575149 未加载
评论 #8575124 未加载
评论 #8577312 未加载
评论 #8575279 未加载
hcarvalhoalvesover 10 years ago
About colour temperature:<p>Subjectively (or maybe culturally?), red tones are warm and blue tones are cool.<p>There&#x27;s another definition of &quot;colour temperature&quot; (derived from a physical property, rated in Kelvin), in which blue-ish tones are <i>warmer</i> than red, white being the hottest. This is based on the light emission of very hot bodies (you can tell the temperature by the color it glows).<p>This second definition of &quot;colour temperature&quot; might be counter-intuitive but is used to rate light sources and in photography, so you have to know the context the term is used.
评论 #8575478 未加载
bitLover 10 years ago
Adding one important fact - computing color distance between two colors in order to identify similar colors doesn&#x27;t work well in any color model (often matching colors with reduced vibrance). What you need to do is to define overlapping color regions (e.g. this is yellowish, that is greenish etc.) and treat this information as more important than the computed distance for similarity matching.
评论 #8577003 未加载
mcintyre1994over 10 years ago
Something some might not know of is the great colour scheme designers available on the Web, I quite like colour scheme designer 3 [0] - hit triad, click around and then click the colour list tab for complementary colours for all three.<p>[0] <a href="http://colorschemedesigner.com/csd-3.5/" rel="nofollow">http:&#x2F;&#x2F;colorschemedesigner.com&#x2F;csd-3.5&#x2F;</a>
carlsednaouiover 10 years ago
Neat!<p>On a related note, I recently helped write a &quot;Color Theory Basics&quot; guide for Thinkful (my current employer). Some of you might enjoy this: <a href="http://www.thinkful.com/learn/color-theory-basics/" rel="nofollow">http:&#x2F;&#x2F;www.thinkful.com&#x2F;learn&#x2F;color-theory-basics&#x2F;</a><p>This guide is more applicable towards branding and marketing.
AnimalMuppetover 10 years ago
&gt; This is the traditional “adding” of colours together to produce new colours. (Said of RGB.)<p>But it&#x27;s only &quot;traditional&quot; in computer graphics. Paint is subtractive, and so is printing. If your color background is one of these more traditional fields, then additive is most definitely <i>not</i> traditional.
评论 #8575168 未加载