HSV to RGB Color Converter

Color Picker

hsv(120, 100%, 100%)

Color Shades

Color Combinations

About HSV and RGB Colors

HSV (Hue, Saturation, Value) and RGB (Red, Green, Blue) are two fundamental color models used in digital design and development.

HSV (Hue, Saturation, Value)

HSV (also called HSB) is a cylindrical color model that represents colors in a way that closely matches how humans perceive color. Hue represents the color type (0-360° on the color wheel), Saturation is the intensity of the color (0-100%), and Value represents brightness (0-100%). For example, pure green is (120°, 100%, 100%) in HSV. This model is widely used in graphic design applications and color pickers because it provides intuitive control over color brightness and vibrancy.

RGB (Red, Green, Blue)

RGB is an additive color model where red, green, and blue light are added together in various ways to reproduce a broad array of colors. Each component (R, G, B) has a value between 0 and 255. Pure green is (0, 255, 0) in RGB. This model is fundamental to digital displays and is the standard color model used in web design (CSS) and most digital image formats.

HSV to RGB Conversion Process

  1. Convert HSV values to the range 0-1 (divide hue by 360, saturation and value by 100)
  2. Calculate chroma: C = V × S
  3. Calculate hue sector: H' = H / 60°
  4. Calculate intermediate value: X = C × (1 - |(H' mod 2) - 1|)
  5. Calculate RGB values based on hue sector:
    • 0 ≤ H' < 1: (C, X, 0)
    • 1 ≤ H' < 2: (X, C, 0)
    • 2 ≤ H' < 3: (0, C, X)
    • 3 ≤ H' < 4: (0, X, C)
    • 4 ≤ H' < 5: (X, 0, C)
    • 5 ≤ H' < 6: (C, 0, X)
  6. Calculate matching value: m = V - C
  7. Add matching value to each component: (R, G, B) = (R + m, G + m, B + m)
  8. Multiply each component by 255 and round to nearest integer

Example #1

Convert pure green HSV (120°, 100%, 100%) to RGB:

HSV = (120°, 100%, 100%)

H' = 120/60 = 2

C = 1 × 1 = 1

X = 1 × (1 - |(2 mod 2) - 1|) = 0

RGB = (0, 1, 0) [from sector 2]

m = 1 - 1 = 0

RGB = (0 + 0, 1 + 0, 0 + 0) = (0, 1, 0)

RGB = (0 × 255, 1 × 255, 0 × 255) = (0, 255, 0)

Example #2

Convert dark blue HSV (240°, 100%, 50%) to RGB:

HSV = (240°, 100%, 50%)

H' = 240/60 = 4

C = 0.5 × 1 = 0.5

X = 0.5 × (1 - |(4 mod 2) - 1|) = 0

RGB = (0, 0, 0.5) [from sector 4]

m = 0.5 - 0.5 = 0

RGB = (0 + 0, 0 + 0, 0.5 + 0) = (0, 0, 0.5)

RGB = (0 × 255, 0 × 255, 0.5 × 255) ≈ (0, 0, 128)

Common HSV to RGB Examples

  • hsv(0, 0%, 100%) → (255, 255, 255) (white)
  • hsv(0, 0%, 0%) → (0, 0, 0) (black)
  • hsv(0, 100%, 100%) → (255, 0, 0) (red)
  • hsv(120, 100%, 100%) → (0, 255, 0) (green)
  • hsv(240, 100%, 100%) → (0, 0, 255) (blue)
  • hsv(60, 100%, 100%) → (255, 255, 0) (yellow)
  • hsv(180, 100%, 100%) → (0, 255, 255) (cyan)
  • hsv(300, 100%, 100%) → (255, 0, 255) (magenta)
  • hsv(0, 0%, 50%) → (128, 128, 128) (gray)

While HSV is more intuitive for color selection, RGB is the fundamental model used by digital displays. Converting between these models allows designers to work in the most appropriate space for their needs while ensuring accurate color reproduction across different media.

HSV to RGB FAQ

What's the difference between HSV and RGB?

HSV is a cylindrical color model that represents colors in terms of hue, saturation, and value (brightness), which is more intuitive for humans. RGB is an additive color model that represents colors as combinations of red, green, and blue light, which is how digital displays work. HSV is better for color selection, while RGB is fundamental to digital display technology.

When should I use RGB instead of HSV?

Use RGB when working with digital displays, web design (CSS), or any application that directly interfaces with display hardware. Use HSV when you need more intuitive control over color properties like hue and saturation, such as in color pickers or design tools.

Are all HSV colors perfectly convertible to RGB?

Yes, all HSV colors within the RGB gamut can be perfectly converted to RGB. However, some HSV colors (particularly very bright, saturated colors) may be outside the RGB gamut and will be clipped to the nearest representable RGB color.

Which color model is better for creating color variations?

HSV is generally better for creating systematic hue or saturation variations, while RGB is better for precise control over individual color channels. Many designers find HSV more intuitive for color selection, while RGB is essential for precise color specification in digital formats.