hsv-hsl-featured

Convert RGB Colour Values to HSV and HSL with PHP

The RGB model of visualising color can be problematic on the web because of the nature in which the values are mixed. Not unlike mixing paints from individual tins, we would have to alter all the quantity of all paints to achieve our desired result. For example, if we have an orange with RGB values of R217 G118 B33 and want to reduce its colourfulness by half to a less saturated orange, we would need to drag RGB sliders to decrease R by 31, increase G by 24, and increase B by 59; not a very effective model when using color pickers on the web.

#D97621 (R217 G118 B33) to #BA845C (R186 G132 B92)

The HSV model was developed in the mid-1970s based upon how colors are organized and conceptualized in human vision in terms of other color-making attributes, such as hue, lightness, and chroma. The model is based on the real-life mixing of black or white pigments to achieve lighter, darker, or less colorful colors. Mixing these pure colors with white produces tints (while reducing saturation) while mixing them with black producing shades. The model permits a single slider to alter color with another for saturation, and one for value (color scale). Most web-based color pickers are based off the model because a flat pallet will permit a user to simply drag their cursor over the screen. They’re not perfect: both HSV and HSI trade off perceptual relevance for computation speed.

The HSV and HSL Color Cylinder

The screenshot below shows the orange color noted above in Color Cop .

This article will provide you with the PHP code to convert between RGB and HSV/HSL and back again.

RGB to HSV

HSV to RGB

An array returns the RGB values with r, g and b as keys. You may optionally alter the string pattern that is returned by altering $format.

While the HSL model (“L” for lightness) is similar to HSV in terms of the conical or cylindrical model that it is based upon, the outward saturation (from the vertical middle axis) is very different. Wikipedia says it better than me: “Because HSL and HSV are simple transformations of device-dependent RGB models, the physical colors they define depend on the colors of the red, green, and blue primaries of the device or of the particular RGB space, and on the gamma correction used to represent the amounts of those primaries. Each unique RGB device therefore has unique HSL and HSV spaces to accompany it, and numerical HSL or HSV values describe a different color for each basis RGB space.”

We’re not sure of the original source of the HSI functions. They came to us years ago when a former partner in the business was developing web image software around 2007.

RGB to HSL

HSL to RGB

The RGB value can be returned as an array or formatted string.

Considerations

All the examples on this page have omitted the pre tags for formatting purposes. The download includes working code.

See also this article: “Convert Colours Between their Hexadecimal and RGB Values with PHP”.

Download the Code

Download all the code in a single file with working examples here .

Shortt URL for this post:

Leave a Reply

Your email address will not be published. Required fields are marked *