Hex Colour - Formula To Make It Brigter

Is there a formula I can use to make a hex colour value brighter?

Solution 1:

You could convert to HSV (using a formula from wikipedia here) Then increase the Value, then convert back, with the formula from lower on the same page.

Solution 2:

The standard answer is to convert to a different color space that has brightness as one axis, then manipulate that value directly. I don't like that answer, because it doesn't tell you what you'll get when you exceed the color space gamut.

If by brighter you mean more intense, you can just multiply each R,G,B value by the same value, where that value is > 1. For example, to make it 20% brighter, multiply each value by 1.2.

If any of the resulting values are greater than 255, you've exceeded the limits of the RGB gamut. Probably the best thing to do in that case is to bring the color closer to white, so it's lighter but less saturated or intense. Let's take the example of a starting RGB of (50,192,240) that you want to make 20% brighter. The result is (60,230,288) - red and green are within bounds, but blue is too bright and has overflowed. Take the excess and distribute it to the other colors equally - 288-255 is 33, so add 16.5 to the red and green; rounding gives you a result of (77,247,255).

Solution 3:

If you are using VS Code, there is a quick hack. Just hover the mouse over the color hex and you will see a color selector popup.

Click on the top area to change color from hex notation to hsla, rgba, etc. Convert to the hsl/hsla notation as shown below.

Now change the lightness (the third parameter in the hsl / hsla function) as per your requirement. Once you are happy with the highness level hover over the color (now in hsl notation) and convert it back to hex by tapping on the header area of the color selector popup.

Note: please don't get confused with different colors used in the above 2 screenshots. Each screenshot corresponds to a different color in the same css file.

Solution 4:

Well seeing as colours are just 3 bytes of r/g/b what you can do is convert each byte to an int (0-255) and increase each byte by the same arbitrary number. Finish by converting each byte back to hex. Example:

Starting with colour: #224466

Converted to ints thats r = 34, g = 68 and b = 102

Increment by an arbitrary number (say 60) you get r = 94, g = 128 and b = 162

Convert back to hex gives you: #5E80A2

Note that the top limit is 255 (white) and bottom is 0 (black)

EDIT: As Mark points out theres a flaw with this. It can be fixed by an additional rule: If the initial value is at 0 then dont change it ;)