Images

Hi I am showing the color as a hex value in php. Is it possible to change the hue of the color by subtracting the number from the hexadecimal value? What I want to do is display a bright web-safe color, but if selected, I want to dull or lighten the color. I know that I can just use two shades of color, but I could have a hundred potential colors.

to be clear # 66cc00 is bright green, and # 99ffcc is very pale green. What do I subtract to get the second color? is there any formula because i can get it.

Thanks for any help

Greetings

+4
source share
6 answers

Hexadecimal colors consist of six hexadecimal digits. The first two digits indicate red, the second green, and the last two blue. Within hues, 00 is the lack of color, and FF is the highest value for the color. Thus, # FF0000 will be bright red, without green or blue, and # 00CCFF will be very blue and slightly green, without red.

The color examples you give actually have a different composition of red, green, and blue. # 66CC00 is mostly green with red, and # 99FFCC is mostly green with blue and red.

You must break your colors down into your red, green, and blue components before converting them to decimal, averaging two, and then converting back:

# 66 CC 00 β†’ 102 204 0

# 99 FF CC β†’ 153 255 204

Average between two: 128 230 102 : # 80E666

After finding the intermediate color, you can approach the nearest web safe color: # 99FF66

The converter between hexadecimal and decimal for this can be found here .

Here is a PHP script that does what you need. Here is a JavaScript script based on the method described above (associated hex with decimal conversion in JS ):

color1 = "#66CC00"; color2 = "#99FFCC"; r1 = parseInt(color1.substring(1,3), 16); g1 = parseInt(color1.substring(3,5), 16); b1 = parseInt(color1.substring(5,7), 16); r2 = parseInt(color2.substring(1,3), 16); g2 = parseInt(color2.substring(3,5), 16); b2 = parseInt(color2.substring(5,7), 16); r3 = (Math.round((r1 + r2)/2)).toString(16); g3 = (Math.round((g1 + g2)/2)).toString(16); b3 = (Math.round((b1 + b2)/2)).toString(16); color3 = "#" + r3 + g3 + b3; 
+5
source

To explain this further:

Take #FFFFFF , completely white.

In fact, it consists of 3 separate color values ​​Red Green and Blue.

FF (255, full red), FF (255, full green), FF (255, full blue)

If you need full red color, you should use #FF0000 (255, 0, 0) instead

The color values ​​go from 0 to 255, and you combine the color values ​​to get the final color.

+2
source

It really helps to understand what is happening with the colors, but if you are just interested in color shading, here , I found on php.net. I haven’t tried (yet) hard, I hope this meets your needs.

+1
source

This is called a hexadecimal base:

1 2 3 4 5 6 7 8 9 ABCDEF

"E" in hexadecimal (16) base; "14" in decimal (10) base

66cc00 (16) == 6736896 (10)

99ffcc (16) == 10092492 (10)

0
source

Web colors are indicated by their red, green, and blue values. Each component has a value from 00 (0) to FF (255). The larger the component, the brighter this component will be. If all three components are the same, you get shades of gray from black ( #000000 ) to white ( #ffffff ).

So in your first example there is red and a lot of green. In second place are more colors, which makes the whole color lighter. Green remains the main component, although that is why it has a pale color.

To change one color to another, you need to change the values ​​of each component, but it is not always as simple as subtracting one value from another.

What are you trying to achieve to move from your first to your second color?

0
source

Flowers in RGB. To influence the saturation and meaning of a color without affecting the hue, you must convert the HSV to the color space.

RGB for HSV in PHP

Once you have HSV, change the V component to make the color darker or lighter, and change the S component to make the color more or less saturated or pale. After setting S and V, convert back to RGB. To ensure the security of websites, combine each RGB channel up to a multiple of 51 or 0x33.

0
source

Source: https://habr.com/ru/post/1307891/


All Articles