• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar
  • Skip to secondary sidebar

IRL Experience Design

  • Blog
  • My Work
  • About
  • Immersive Austin
  • Unique Austin
  • Weird Austin
  • More Austin
    • Austin Halloween Guide 2022

RGB, BGR, HSV For Newbies Who Can’t Get OpenCV Colors Working

September 29, 2020

I recently spent a few hours struggling over how to convert RGB to HSV ranges in openCV. Most of the google results I got from my searches assumed I already knew something about colorspaces. 

I did know some things. But there were “unknown unknowns”.

If you can get your openCV color range to work right, here’s all the stuff I wish I’d known.

RGB

Red Green Blue. Usually represented as (r,g,b) where the values are 0 to 255 depending on how much of each color you have. There is a hexidecimal equivalent as well (##FF0000 = (255,0,0), for example. 

The 255 limit is due to 8 bit processing. If you have a higher powered computer you can have even more range.

BGR

Whoa! What is this? WHY is this? It is what it looks like: RGB, reversed. That’s probably all you need to know. The explanation of why has to do with how things are stored in memory but for beginners like me, understanding the low level stuff isn’t important.

HSV

I knew HSV was Hue, Saturation and Value.  It also is sometimes called HSB, which is Hue Saturation, Brightness. It is NOT the same as HSL which is Hue Saturation Lightness.

Look at this cylinder and image the top outermost ring that I’ve lined in white. Those are the full color of spectrum. 

Source: Wikipedia

Now if you move from any point on the edget, toward the circle you are adding white and the shade gets lighter:

Source: Wikipedia

Similarly, if you go down, you are adding black and the color becomes darker:

Source: Wikipedia

So what kinds of values can you put into (H, S, V)? 

Typically it is (0-360, 0-100%, 0-100%) but don’t stop reading here because asterisk!

The first value is the value on the color wheel (the circle I drew) Zero is red, then it loops around 360 degrees (like a circle). So the red primary is at 0, the green primary is at 120, and the blue primary is at 240.

The second and third values are percentages of how much white and black you have… well sorta. That’s often how they’re described but maybe it’s best to think of it as values from 0-100. Because…

A big thing that hung me up was not realizing that depending on what application you are using, it might have a different scale for each value in HSV. This is often because it can’t fit that much into an 8 bit integer (0-255). OpenCV, for example, halves H to 179 but scales S and V up to the full 255.  Which means for openCV:

For H: Your red primary is still at 0, but green is at 60 now and blue is at 120.

For S: Your value is 255 for the full primary red color’s saturation.

For V: Your value is 255 for the full primary red color’s value

Ok! So now I hope you have an understanding of (how I understand) HSV, RGB, and BGR in openCV.

Suppose you have a RGB and you want to convert it to HSV for openCV?

You can now use something like this to do it. But remember most of these tools are going to assume a 360 HSV and you’ll have to scale it to whatever you are using.

What if you want to convert it in python/openCV?

  1. Remember it uses BGR
  2. Remember in openCV that HSV ranges are (0-179, 0-255, 0-255)
  3. Use something like recommended here.
  4. In case you don’t follow the link above, let me elaborate on it:

1:green = np.uint8([[[0,255,0 ]]])

2: hsv_green = cv2.cvtColor(green,cv2.COLOR_BGR2HSV)

3: print hsv_green

> [[[ 60 255 255]]]

So the first line is saying “take this 8-bit BGR color and store that into green.

The second line says call the function “cvtColor” (ie, convert color). 

“green” is the source (this could also be a file)

“cv2.COLOR_BGR2HSV is the conversion code (there are over 150 color-space conversion methods in openCV. This is just one of the codes)

What is printed to the screen is the HSV value. 

Side note (thanks Alan Watts): With the halving, you lose lots of color information, so if you need more definition, you can use cv2.RGB2HSV_FULL during color conversion and it’ll fit the range into 0-255 instead.

Share this:

  • Click to share on Twitter (Opens in new window)
  • Click to share on Facebook (Opens in new window)
  • Click to share on LinkedIn (Opens in new window)
  • Click to share on Reddit (Opens in new window)

Posted Under: Everything Else Tags: #Tech

Primary Sidebar

About Me

I make awesome experiences for people. Read More

NEW CONTENT 2+ TIMES A WEEK

  • IRL Experience Design
  • Amazing Experiences
  • Fun Weird Sh*t

See My Favorite Books

  • For IRL XD
  • For Learning
  • For Getting Things Done

@IRL_Experience_Design

instaglogo

RSS Feed

rss logo

Secondary Sidebar

VISIT MY BOUTIQUE IMMERSIVE EXPERIENCE

SEE MY AUSTIN EVENTS WALL CALENDAR

Austin Events 2023 wall calendar cover

Search My Blog

Generic selectors
Exact matches only
Search in title
Search in content
Post Type Selectors

Filter by Category

  • Experience Design (189)
  • Productivity (65)
  • Everything Else (105)

FILTER BY DATE

March 2023
M T W T F S S
 12345
6789101112
13141516171819
20212223242526
2728293031  
« Feb    

Read My Recent Posts

  • Possible Small But Important Changes That AI and Chatbots Will Bring: Making Us Better At Email.
  • Digging Into Online Stats to Identify Issues
  • Google Analytics Update
  • Eureka Room Update 3/14/2023
  • Eureka Room Updates 3/10/2023
  • Eureka Room Update 3/7/2023
  • “What a waste of time”
  • Meditation Benefits (Actual Concrete Examples)
  • Bookeo and Google Analytics Tracking (Take #2)
  • IRL Experience Designers Professional Group
  • Eureka Room is Hiring!
  • Eureka Room Update
  • Eureka Room Update 2/10/23
  • Brainstormingitis
  • 1000 Days of Meditation
  • Déformation professionnelle
  • Eureka Room Update 1/27/2023
  • Introversion and Extroversion
  • The Joy of Knowing Things Exist
  • Why I Prefer Books With Few Anecdotes

  • Contact
  • About