OpenCV's cv2.cvtColor(img, cv2.COLOR_BGR2HSV) returns HSV arrays where hue runs from 0 to 179, saturation from 0 to 255, and value from 0 to 255 — a compact integer scale that differs from the degrees-and-percentages convention used by most color pickers. The RGB to HSV Converter in your browser instead follows the Android Color reference (hue 0–360, saturation 0–1, value 0–1) and is independently verified against the R grDevices rgb2hsv convention for typical 0–255 sRGB input. That mismatch is the practical reason many beginners see "weird" outputs when they try to feed design-tool HSV values directly into OpenCV: the math is correct, but the destination range is compressed. For a single pixel or a test color, the calculator gives you a defensible HSV triplet in three steps, after which you scale the result for OpenCV. For full image arrays, you still want cv2.cvtColor, but you can pre-compute a single sample here to verify the conversion is what you expect before running the function on a frame.
Why OpenCV's HSV Range Differs from the Standard
OpenCV stores HSV inside 8-bit unsigned integers to keep image arrays compact. The library's hue axis therefore stops at 179 instead of the customary 359, because the original 0–360 degree range is divided by two and the upper bound is exclusive. Saturation and value are scaled to 0–255 instead of 0–1. This is a packaging choice, not a different color model: the underlying RGB→HSV math is the same piecewise formula that Android, CSS, and graphics libraries use. The browser-based RGB to HSV Converter applies that same formula and shows you the canonical result, then you map the output to OpenCV's smaller integer range before assigning it to a NumPy array.
If you read HSV tutorials online, you will see three ranges in common use:
- Design tools and CSS: hue 0–360 degrees, saturation and value 0–100%.
- Android Color and this calculator: hue 0–360 degrees, saturation and value 0–1.
- OpenCV: hue 0–179, saturation and value 0–255.
The conversion between the first two is a unit change (multiply or divide by 100). The conversion to OpenCV is a packing step: divide hue by 2 and multiply saturation and value by 255. Knowing which range the destination expects is the difference between a working pipeline and one that quietly maps red to garbage.
Hue Degree Positions on the Color Wheel
Hue is the component of HSV that most programmers first encounter, and the six primary and secondary positions are stable across every implementation. The Android Color reference treats the same six anchors as the canonical rotation, and the calculator below reports values on that same 0–360 circle. Use this table as a quick visual key whenever you see a hue angle and want to know what color it represents, or when you want to verify that a converted result is pointing at the direction you expect.
| Hue (degrees) | Color |
|---|---|
| 0 | Red |
| 60 | Yellow |
| 120 | Green |
| 180 | Cyan |
| 240 | Blue |
| 300 | Magenta |
In OpenCV's compressed range, the same six anchors divide by two: 0, 30, 60, 90, 120, and 150. If a converted OpenCV value reads 60, that is hue 120 degrees in standard terms: green. If a converted value reads 90, that is hue 180 degrees in standard terms: cyan. Keep the table handy when you decode pipeline output.
Convert a Single RGB Sample with the Browser Tool
For a quick test color, a pixel you sampled, or a palette value you want to sanity-check before calling OpenCV, the browser-based RGB to HSV Converter is the fastest path. The tool accepts three whole-number channels, performs the standard max-channel piecewise math, and returns hue in degrees plus saturation and value as percentages, alongside the source HEX and a live swatch that updates as you tweak any channel.
- Enter whole-number red, green, and blue channel values from 0 through 255.
- Select Convert to HSV and read hue in degrees plus saturation and value as percentages.
- Check whether the destination expects degrees and percentages, zero-to-one fractions, or a compact integer range before copying the values.
Only finite whole-number channels from 0 through 255 are accepted. Decimal inputs, empty fields, negative numbers, and values above 255 produce an explicit error rather than being silently rounded. That strict boundary prevents a typo from becoming a plausible but different color, which is especially useful when the source is an 8-bit RGB code you pulled from a color picker. Alpha is outside the scope because transparency does not change the RGB-to-HSV calculation for the underlying three channels.
If you need to reverse the conversion — for example, you have an HSV triplet from a script and want to compare it back to RGB — see the related guide on converting HSV to RGB in Roblox Studio, which uses the same anchored hue-positions table.
Convert RGB to HSV in OpenCV: Scale to the Library Range
Once you have a result from the browser tool, the next step is to compress it into OpenCV's integer range. The mapping is lossless for any hue that the tool produces, because dividing degrees by two always lands inside OpenCV's 0–179 range. The mathematical formula is identical to the R grDevices rgb2hsv reference, so the only thing you are doing is rescaling the output.
- Compute the RGB to HSV values in the browser tool using the three steps above and note the hue in degrees, saturation as a percentage, and value as a percentage.
- Convert hue to OpenCV's range with H_opencv = H_degrees / 2. For example, hue 120 degrees becomes 60.
- Convert saturation to OpenCV's range with S_opencv = S_percent × 255 / 100. Round to the nearest integer before assigning.
- Convert value to OpenCV's range with V_opencv = V_percent × 255 / 100. Round to the nearest integer before assigning.
- Assign the three values to a NumPy array of dtype uint8 if you are processing a single pixel, or to a 3-channel image array if you are populating a mask.
If you are working with a full image rather than a single sample, skip the browser step and call cv2.cvtColor(img, cv2.COLOR_BGR2HSV) directly. OpenCV expects BGR ordering by default, so swap the red and blue channels before the call: bgr = cv2.cvtColor(rgb, cv2.COLOR_RGB2BGR), then convert. The OpenCV documentation and the android.graphics.Color reference both describe the same underlying formula, so the result is consistent regardless of which tool produced the input.
Worked Example: RGB (255, 128, 0)
To illustrate the full path from a sample color to an OpenCV-ready HSV triplet, consider the sRGB color (255, 128, 0), which is a saturated orange.
First, normalize the channels by dividing by 255:
- R = 255 / 255 = 1.0000
- G = 128 / 255 ≈ 0.5020
- B = 0 / 255 = 0.0000
Next, find the maximum and the minimum:
- max = 1.0000 (R)
- min = 0.0000 (B)
- delta = max − min = 1.0000
Value is the maximum, so V = 1.0000, which the tool displays as 100.00%. Saturation is delta divided by max, so S = 1.0000 / 1.0000 = 1.0000, which the tool displays as 100.00%. Hue uses the red clause because R is the maximum channel:
H = 60 × ((G − B) / delta) = 60 × ((0.5020 − 0) / 1.0000) = 60 × 0.5020 = 30.12 degrees
Now map the result to OpenCV's integers:
- H_opencv = 30.12 / 2 ≈ 15
- S_opencv = 100 × 255 / 100 = 255
- V_opencv = 100 × 255 / 100 = 255
The final OpenCV array for the pixel becomes [15, 255, 255] in H, S, V order. If you had copied the degrees and percentages directly into OpenCV, hue 30 would be deep red and saturation 100 would be off the upper scale entirely — the classic symptom of forgetting the scale mismatch.
Choosing Between the Browser Tool and cv2.cvtColor
The browser tool and the OpenCV function are not interchangeable. They serve different stages of the same workflow and they trade off convenience for performance. Use the RGB to HSV Converter when you have a single color you want to convert, you need to verify a theory before writing code, you are teaching the RGB-to-HSV step, or you want a clean reference value to paste into a unit test. Calculations run locally in the browser, the inputs stay visible for quick tweaks, and the implementation is independently checked against the R grDevices rgb2hsv convention with golden cases that include the six primary and secondary wheel positions, black, and middle gray.
Use cv2.cvtColor(img, cv2.COLOR_BGR2HSV) whenever you are processing a whole image, applying a threshold mask, segmenting an object by color, or running anything inside a real-time loop. The function is vectorized and handles every pixel in a frame in a single call, which is the only practical choice for image-sized arrays. Treat the browser tool as a way to confirm a sample, not a replacement for the library call.
Keep two destination-specific caveats in mind. The tool does not read embedded image profiles and does not convert between wide-gamut color spaces, so if your source is a profile-tagged image, pull the sRGB triplet first and feed it to the calculator. The implementation also reports the conventional placeholder hue of 0 degrees whenever all three channels are equal, because the difference and saturation are zero and hue has no visual meaning in that achromatic case. If you see hue 0 returned for a gray sample, that is the documented convention, not a bug in the conversion.