{Carrer web log} ←
About the 80 million dollars Blue (#0044cc)
Thursday, March 18, 2010 { 7 Comments }
Yesterday I find out about $80 million blue via Luke Wroblewski tweet . Naturally I got curies and watched Paul Ray video about the Bing redesign . Definitely interesting video and covers topics that I’m very fond of like Golden triangle and the reading process.But the most important part is blue of the links that brings Microsoft revenue of 80 million dollars.
From Paul Ray slides: (#0044cc) This blue is worth at least $80 million dollars.
I was little Wow, right now I’m working on my search engine and I know how difficult and important that decision. I’m also interested in color theory. So I was super curious about the holy grail of blue and how can affect our design decision in the future. So I opened Photoshop and Excel and run some tests.
And I was very surprised of my findings.
Before you go on with further reading do you want to take Red or Blue Pill :-)
First a little intro in colors and color theory. Like you know RGB is (Red, Green, Blue) and every color on our monitor is made by mixing this colors. The values of each color can go from 0 to 255. So in other words:
Red is mix of (Red:255, Green :0, Blue:0) or #ff0000
Green is mix of (Red:0, Green :255, Blue:0) or #00ff00
Blue is mix of (Red:0, Green :0, Blue:255) or #0000ff
This are pure colors.
And this is Bing Blue:
(Red:0, Green :68, Blue:204) or #0044cc
So mix of 68 Green and 204 Blue(1:3 proportion) = 80$ million dollars blue.
Cool 204/68 = 3 so this proportion makes perfect mathematical sense.
But something was troubling me with this number. In color theory the thing doesn’t work like that.
In order something to be complete red + green + blue should be 255.
But in this case we have (0 Red + 68 green +204blue = 272) And 272 <> 255.
I even made Excel experiment
So the right blue will be (0Red + 51green + 204 blue = 255) or #0033cc
So I tried to insert this new number directly in Bing with Firebug and I was surprised to find out there was no trace of #0044cc but the number for the links was #0033cc.
I was little flattered that I came out with this number all by myself.
But the question was Why someone on Mix presentation will present false number!!?
Than all suddenly all came clear to me! It is a mind puzzle!
I will explain everything in a sec.We have 204blue and 51green which is #0033cc the color used on Bing site for links.
204:51 = 4:1 = 80% :20% or 80%blue with 20% green.
This is 80/20 rule also know as Pareto principle is one of the basic rules in many areas and one of the key principles in design.
It is not 80 million of dollars but 80% of blue used #0033cc.
Is the 80 million just pure accident ? I know one turtle who will say There are no accidents ha,ha :).Anyway to get serious no matter what blue you will choose you will fail if you don’t balance the rest of the page. Is not just the blue but everything around who says that design is easy. The color theory is very challenging and powerful thing ,you can easy transmit a message to our subconscious mind. My compliments to Bing and Microsoft that finally started to invents seriously in design .
P.S
Here is my $618 million dollar blue (#00619e)
It is made by using the Golden Proportion (0Red : 97 Green : 158 Blue) or 38.2 percent Green and 61.8 percent Blue.Cheers!
7 Responses to “About the 80 million dollars Blue (#0044cc)”
- // // 3/18/2010
-
// Vladimir
// 3/18/2010
@Anonymous: Ha,ha No just constant lack of sleep. I know that for many of you this article looks like resolving some "conspiracy theory". But actually lately I'm obsessed with the golden proportion also with profound study of color theory and color mixing etc. I'm also working on my personal search engine so I'm familiar with the problem of finding the perfect blue. And maybe the most important part I'm curios about things ;)
- // Unknown // 3/18/2010
-
// Vladimir
// 3/19/2010
@Glamdring: Maybe the word "complete" is not the right one. I should probably dedicate one post about this issue. Red Green Blue when there are in pure state they have the value of 255.So we have from 0 to 255 or how much white or black the color contains. You probably played with gray like #333333 or #999999 so somewhere in the middle you have #555555.
or (85,85,85) = 255. I know is no easy task to understand it, I'm still struggling with this issue truing to understand more about colors and how we elaborate colors. So I will probably write more in detail in the future. - // // 3/19/2010
- // Vladimir // 3/19/2010
-
// Eric Swanson
// 2/07/2014
Or, perhaps they were simply practical in their approach balancing the business of color theory with the constraints of reality: "44" blue was really the research choice, but they just implemented it with "33" from the 216 colors from the web safe color palette (combinations of 00, 33, 66, 99, CC, FF).
<< Home
About Me <<<
Name: Vladimir Carrer
vladocar [at] gmail.com
Location: Verona, Italy
I'm a web designer, developer, teacher, speaker, generally web addicted ...
My projects <<<
- AI Prompt Directory
- Hand Drawn Icons
- Font Design Inspiration
- Font Pairings
- Free SVG Cut File
- Upcoming NFT projects
- Discord Tutorials
- Free Sublimation Designs
- Tech Feed
- MySQL Lite Administrator
- Quark Mini PHP CMS
- Formy - CSS Form Framework
- Emastic - CSS Framework
- Malo - CSS Library
- The Golden Grid
- 1 line CSS Grid Framework
- Two Lines CSS Framework
- Child Selector System - CSS Framework
- Better Web Readability Project
- Azbuka - CSS Typographical Base Rendering Library
- ClipR - bookmarklet for better reading
- CSS3 Action Framework
- CSS Mini Reset
- HTML5 Mini Template
- CSS Mobile Reset
- picoCSS - JavaScript Framework
- HTML Lorem Ipsum Crash Test
- Object Auto Documentation - JavaScript
- o - JS Library for Object Manipulation
- Foxy - CSS Framework
- Tumblr Free Theme - Better Readability Project
- Box - CSS Framework
- SMART CSS GRID
- nanoJS - Minimal JS DOM Library
- Flexy CSS Framework
- Katana is CSS Layout System made with Flexbox
- Micro CSS Reset
- 60 Grid System
- Simple CSS Button
- ramd.js JavaScript library for making web applications.
- Minimal Notes web app build with Vue.js
- Scribble Font for Prototyping & Wireframing
- Flex One - 1 CSS Class System
- Floaty - CSS Float Based Layout System
- Infinity CSS Grid
- CLI Convert websites into readable PDFs
- keywords-extract - CLI tool, extract keywords from any web page.
- screenshoteer - Make website screenshots and mobile emulations from the command line.
- Basic.css - Classless CSS Starter File
§§Previous Posts <<<
- Opera 10.50 for one week - Summary
- Initiative - Opera 10.50 for one week
- Quark – mini php CMS
- The Golden Grid PSD Template
- WikiReader – bookmarklet for Wikipedia reading
- CSS Shorthand Clockwise Rule
- Calendar 2010
- Bookmarklet for Google Dictionary
- To Do List (A4 Paper – Grid Design)
- Azbuka - CSS Typographical Base Rendering Library
Other Profiles <<<
Content is licensed under a Creative Commons Public Domain License