816 アクティブな恋人 [記録: 2,316オンタリオ5 2007年3月, 2009]
Lost PasswordRegister
私たちは英語を話すが、あなたのネイティブ言語の場合、色の愛を共有できるよう努力している。場合は、 までご連絡くださいこの言語のバージョンで何の問題も参照してください。

Click here to go back to the English version
  すべて  関連記事  ニュース  トレンド  インタビュー  人気

Demystifying RGB vs. HSV

〜によって evad インディアナ Articles, Guides, News
このページを印刷する Print this page
     

Most everyone who's worked in any media for screen would (and should) be aware of the importance of the RGB value system. While it is a concise system for describing colors, it is somewhat difficult for us to describe the nature of a color by amounts of each channel by eye. So rather than describing the additive blend of colors, we can describe a color with HSV which breaks color down into more simplistic characteristics. Let's look at each of these in detail:

RGB

Defined by listing how much red, green, and blue is contained in a single value. Being additive, the more of each color that is added, the brighter (and closer to white) it becomes.

While it's helpful to denote how much of each color exists, it is not a very friendly system to describe a hue shift, saturation, or value/brightness. Try looking at a color and try to arbitrarily dictate how much of each primary color composes it. Not so easy, right?

Enter HSV!

download.jpg

A color system that describes a hue shift, saturation, and value! Now that's a lot easier to describe color with. Want a color to be more turquoise? Scarlet? Plum? Just shift the hue slider until it hits the sweet spot. Need brightening without losing saturation? It does that too!

Natural Brightness

With colors having different natural brightnesses to each other, preserving luminosity when tinting with hue shifts poses a problem with contrast. When adjusting a saturation value in HSV, the value scale adjusts proportionately to maintain the same amount of brightness.

For example, as you can see in the diagram, Yellow has a higher natural brightness than purple which sits on the opposite end of the color spectrum (which is easily observed when looking at it in grey scale). What does this mean? It means that simply lightening or hue shifts destroy levels of saturation when controlling all channels. This is because the natural luminosity of red, green and blue at equal saturations differ significantly.

To compensate the desaturation, the value/brightness needs to be scaled in HSV to match. It is important to maintain a strong contrast in brightnesses, so attention to natural brightness is helpful in picking appealing color schemes and palettes. See this article on Müller's color brightness theory: http://www.colourlovers.com/blog/2007/09/02/the-muller-formula-or-predictable-color-preferences/

The Wrap Up

While amounts in HSV are not completely relevant for telling a display how much within each RGB channel is required, it creates a scale that describes useful properties of color. And at the end of the day, it's returned as RGB or hexadecimal; merely a different way to break down color components into locations within a given color gamut. The next time you are exploring your favorite image editor, make sure to check out the different color slider modes.

picker.png

Of course HSV doesn't scale to all digital color spaces, but in most cases you should be able to flip over from the RGB scale. Being able to apply traditional approaches in picking and applying color opens up a more fluid and natural work flow, which can assist the transition for traditional artists migrating into the digital realm. So, HSV or RGB as a color refining scale? Obviously HSV! Get into the habit of tweaking color with the HSV sliders, and you will be able to control those all too often fidgety selectors and pickers in a breeze!

Extension

If you are keen, give these resources a read for more information relating to color in computer graphics:

Colour distribution spaces in volumetric graphs

Colour Jack

Header image by Lisa Bettany

Thanks to the guest author of this post, animator Pasquale D'Silva.

13 2006年8月, 2008
Comments 4
del.icio.usnetscapenewsvinetechnoratifurl
    私たちの記事はいかがでしたか? E-mailによって私達のブログの供給をまたは毎日の更新のためのRSS得なさい。
Comments

提示 1 - 4 の 4 コメント

heykelley
heykelley 書いた:
13 08月, 2008
Nice article. Yay for colour theory lessons!
r e a l i t y

gaiagraph…
gaiagraphics 書いた:
13 08月, 2008
Great lesson and links, thank you!

jaimerada…
jaimeradar 書いた:
13 08月, 2008
excellent entry!!

J-man
J-man 書いた:
14 08月, 2008
Very informative. Thanks, I learned something today. :)


Add a Comment

       コメントを掲示するログオンされるでなければならない。


Trackbacks
背部1つのトラック今のところ...Hooray!

Demystifying RGB vs. HSV | The Pengas Blog
14 08月, 2008
[...] Color + Design Blog / Demystifying RGB vs. HSV by COLOURlovers. [...]
Most Loved Blog Posts
Feeds & Favorites


Contribute
Share the Love あなたが何か面白いものを共有したいとカラフルはありますか?
毎月60万人以上の愛好家?私たちは、ゲストとしてお持ちのが大好きです
著者は、私たちのことを書くことが何かしたいのですがあなたのヒントを記載したメールを送信してください。

あなたのアイデアやヒントをお寄せください
Blog Search & Archives
アーカイブをブラウズする
検索ブログ
Latest Palettes & Patterns
Recently Active Lovers
© 2009 Lord IV. 複製権所有 | プライバシーと利用規約