My company launched a new branding. I'm creating palettes to rework on numerous websites. One of the colors is named Mid blue (#686E9F) and an associated color is Mid Blue Tint as 70% Mid blue but no RGB/Hex values.
How to find out 70% mid blue (#686e9f)?
Reference:
In fact you can find it by using the opacity.
Your blue "tint" is the same as your #686e9f wich means this rgba representation rgba(104,110,159). And with 0.70 opacity on this you get back your color.
to test you can paste this rgba(104,110,159,0.7) on this website :
http://www.menucool.com/rgba-color-picker
So you could begin to translate the hex-number into RGB values
-> https://www.rgbtohex.net/hextorgb/
Then I presume you could multiply those values with 0.7, if I understand this 70% stuff correctly.
If I understood your question correctly and you were asking for a RGB representation:
rgb(104, 110, 159)
68 -> 104
6e -> 110
9f -> 159
The hex value is just a RGB value in hexadecimal. IF you were looking for something else, please specify a clear question.
Related
I have not been able to find much info on the RGBW color system, other than that the final W stands for 'white'. I thought you could form white perfectly well with just red, green and blue, so I do not understand the function of white here.
Searching StackOverflow, I've found this question about converting between RGB and RGBW. Both answers suggest this 'algorithm' for conversion:
// RGBW from RGB
R, G, B, W = R, G, B, min(R, G, B) // i.e. W=min(R,G,B)
// RGB from RGBW
R, G, B = R, G, B // throw away the W
This doesn't only look useless, it's also not true. My Android phone, running Cyanogenmod, has a light sensor that outputs RGBW (cat /sys/class/sensors/light_sensor/lux) and the white value is definitely not min(r,g,b). I've made a chart with the values:
(The X axis is time.)
The black line represents the white value (an actually white line would be rather difficult to see), the other colors are accurate (i.e. red line is the measured red value, etc.). From sight, I cannot determine any relation between white and the other colors, so it probably serves a function. I just cannot understand which.
It's this sensor: http://www.capellamicro.com.tw/EN/product_c.php?id=68&mode=16
And here is the source code that controls the sensor: https://github.com/mozilla-b2g/kernel-android-galaxy-s2-ics/blob/master/drivers/sensor/cm36651.c#L605-L630
That is all I've been able to figure out, but nothing contains info on what this white value represents.
That exactly it – you can't form white perfectly using only RGB LEDs. This is because the RGB colorspace is a small, pale fraction of the CIE-1931 XYZ space, and it’s distorted: incrementing an RGB values’ “R” by 1 is not at all qualitatively the same as incrementing its “G” value or “B” value, for example.
Just do a side by side comparison and the difference will be very, very clear. You can google “True white RGB led” and you'll learn a lot more; a good introduction is here: http://www.ledsmagazine.com/articles/print/volume-10/issue-6/features/understand-rgb-led-mixing-ratios-to-realize-optimal-color-in-signs-and-displays-magazine.html
With 8 bit color depth there are 256 colors. With 24 bit color depth there are 16,777,216 colors. Is there a direct mapping between every color in the 8 bit space to a color in the 24 bit space? I would think the answer to this question is yes, but the comments to this answer suggest the mapping is only an approximation.
What I would like to do is create a palette of 8 bit colors in the 24 bit color space by specifying a 24 bit RGB value. I figured I could do this using this (obviously broken) logic:
3 bits for red == 8 unique values of red, 0-7
3 bits for green == 8 unique values of green, 0-7
2 bits for blue == 4 unique values of blue, 0-3
255/8 = 32 for red and green increment value
255/4 = 64 for blue increment value
{
"Red": [0,31,63,95,127,159,191,223,255],
"Green": [0,31,63,95,127,159,191,223,255],
"Blue": [0,63,127,191, 255]
}
So with 9 values of red, 9 values of green, and 5 values of blue I get 405 colors which is wrong. I know I need 8 values of red and green and 4 values of blue so I just adjusted things a bit:
255/87 = 36.57142857142857 for red and green increment value
255/43 = 85 for blue increment value
So this works for blue, but now my red and green increment value is not a whole number.
Once I got the mapping figured out I was going to loop through it like this:
for(r in rgbData.get("Red")) {
for(g in rgbData.get("Green")) {
for(b in rgbData.get("Blue")) {
colors.add("rgb ${r} ${g} ${b}")
}
}
}
This may be a totally incorrect approach to do what I want, just wanted to show I have tried something :)
UPDATE:
I tried the approach #Marc B suggested but it doesn't seem right. For instance, there is no white in the map I generated (which is 255, 255, 255 using 24 bit RGB). Using his approach this makes sense to me because the highest RGB value is 224, 224, 192 as can be seen:
full red == 111
111 >> 5 == 11100000
full green == 111
111 >> 5 == 11100000
full blue == 11
11 >> 6 == 11000000
11100000 11100000 11000000 == 224, 224, 192
224, 224, 192 != white
Here is the map generated using his approach:
{
"Red": [0,32,64,96,128,160,196,224],
"Green": [0,32,64,96,128,160,196,224],
"Blue": [0,64,128,192]
}
And the palette it generates:
UPDATE 2:
After doing some more research I have realized that when "X colors" (X being some number like 256, 16,777,216, etc.) are referred to that those colors can be just about anything. There is not a predefined set of 256 colors that are "the" 256 colors, though there are (as several have already mentioned) predefined sets of 256 colors that are "the" 256 colors for a specific implementation. I was also able to find a GIMP .gpl palette file on my organizations wiki that specified the 256 colors I am concerned with, so I can just copy the values out of there.
The practical answer is probably yes. Having said that, it's really a hardware dependant thing. #Marc B is close to correct (probably close enough for most people) but the real answer is it depends, it depends on the hardware, and it wont be exact from (hardware)implementation to implementation, but it will likely be exact enough for most people.
The way to convert is to multiply each channel by the highest level you want output and divide by the highest level of input.
{
"Red": [0,36,72,109,145,182,218,255],
"Green": [0,36,72,109,145,182,218,255],
"Blue": [0,85,170,255]
}
With this method you don't need to devote an even number of bits to each channel, you can use an arbitrary number of levels for each. You can get a more even distribution, but you don't get to use all 256 colors. One common arrangement is 6/7/6 for 252 colors:
{
"Red": [0,51,102,153,204,255],
"Green": [0,42,85,127,170,212,255],
"Blue": [0,51,102,153,204,255]
}
I know this answer is probably a bit late, but it might be useful for others. If someone knows what the algorithm outlined below is called, please let me know in a comment.
I'm currently working with different display hardware and I've run into the problem of converting a channel with m bits to one with n bits, where m < n; for example: convert a 5 bit channel to an 8 bits channel. White (b11111) should map to white (b11111111) and black should map to black.
To map, for example, 5-bits b10111 to 8 bits, I pad the missing bits with the MSBs from the original data:
b10111
^^^--- we need these three MSB again later, as 8-5 = 3 missing bits
shift left 3 bits:
b10111000
and pad with MSBs:
b10111101
^^^--- the MSBs
That maps quite well (you might want to apply rounding for values that are not all 1s) and round-trips (you can convert less than 8 bits to 8 bits, convert back and the result is the same as the original value).
If the narrower channel is less than 4 bits wide (like 3), the whole value will repeat completely:
b101 -> b10110110
I'm trying to calculate the satMod (saturation modulation) for something like the following:
<a:srgbClr val="58CAFF">
<a:satMod="300000"/>
</a:srgbClr>
Section 20.1.2.3.27 of the EMCA-376 spec says of the <satMod> element: "This element specifies the input color with its saturation modulated by the given percentage. A 50% saturation modulate reduces the saturation by half. A 200% saturation modulate doubles the saturation."
The problem I'm having is that many colors are already saturated enough that increasing the saturation by 300% (the 300000 in there corresponds to 300%) puts it way out of the 0-100% range. I have been simply capping the saturation at 100% but my results are pretty different from what Excel does.
It seems there is some special magic happening here in cases where the saturation should overflow. Anyone know what Office/Excel does in this case?
I found essentially the same question here: http://social.msdn.microsoft.com/Forums/en-US/oxmlsdk/thread/040e0a1f-dbfe-4ce5-826b-38b4b6f6d3f7
The answer indicated that the srgb color should be converted to linear rgb first and then to hsl before the saturation is modified. For me that hasn't solved the problem.
That was me that asked that original question. I have since figured it out. With ever single color transformations (satMod, redMod, lumMod, etc.), you have to clamp the value to within sRGB 0,0,0 or 255,255,255 (or 1.0,1.0,1.0). Meaning if your satMod modifies your color by 300% and the result is a color value above 255, clamp it to 255 (or 1.0). With that resulting color, you can then apply other color transforms if they are in your color srgbClr or other color spaces.
This is what I do in an example like yours.
Convert color to HSL space (these kinds of RGB->HSL routines are common on Bing/Google in a look up).
Send in that color and the satMod to a routine like this:
Public Sub modulateHSL(ByVal c As HSL, ByVal val As System.Double)
Select Case c
Case HSL.Hue
Hue = Hue * val
If Hue = 0.0 Then
If val >= 1.0 Then
Hue = val - Fix(val)
End If
Else
Hue = Hue - Fix(Hue)
End If
Case HSL.Saturation
Saturation = Saturation * val
Case HSL.Luminance
Luminance = Luminance * val
End Select
HSL_To_sRGB(Hue, Saturation, Luminance)
Clamp_sARGB()
End Sub
At the end of this routine, you'll notice two calls 1) HSL_To_sRGB(Hue, Saturation, Luminance) and 2) Clamp_sARGB(). The first one converts back to sRGB space and the second one clamps the RGB values, like this:
Public Sub Clamp_sARGB()
If Red <= 0.0 Then Red = 0.0 Else If Red >= 1.0 Then Red = 1.0
If Green <= 0.0 Then Green = 0.0 Else If Green >= 1.0 Then Green = 1.0
If Blue <= 0.0 Then Blue = 0.0 Else If Blue >= 1.0 Then Blue = 1.0
If Alpha <= 0.0 Then Alpha = 0.0 Else If Alpha >= 1.0 Then Alpha = 1.0
sRGB_To_HSL(Red, Green, Blue)
End Sub
Note there is no need to use Linear RGB in the case where you're only modifying the saturation. I maintain both RBG and HSL spaces in class level fields (RGB in 0-1 space), so that's why you see sRGB_To_HSL(Red, Green, Blue) at the end of that routine.
Now this is for DrawingML as it appears in PowerPoint. Excel may be different (there is a long drawn out thread here that deals with charts that may also have your answer). Keep in mind that modifying saturation can also modify luminance depending on how you coded your routine. If that's the case, you'll want to use the original luminance when converting back from HSL to RGB.
If none of this is working for you, can you put an example XLSX on a
DropBox point somewhere with what is going on, what you're expecting, etc.?
Yes, I AM trying to re-invent the wheel. :-) . I am doing my own image compression, (testing some ideas for transmitting parts of images over tcp). Anyway... I am trying to step through 24 bit rgb color, get a complete linear range, and (step through) that range at x intervals.
I am trying to get the average 99 colors over the complete spectrum. (24bit / 99) = 167488.6363636364 , so at 16K interval I want to pic a color for my 99 color palette.
I am having trouble understanding how RGB really works... It seems the is NO linear range..., or is there...?
I am currently doing the following:
var_interval = (255 * 255 * 255) / 99
For r = 0 To 255
For g = 0 To 255
For b = 0 To 255
If var_counter = var_interval Then
objWriter.Write(r & "," & g & "," & b)
End If
var_counter += 1
Next
Next
Next
I am getting my colors, but this step does not generate "scaling" colors if you will.
Any ideas?
There certainly is a way to iterate through the color spectrum, but whether you go this approach is your own choice :). You can make use of the HSL color space (Hue, saturation, and lightness) instead of RGB (red, green, blue). The hue represents which color (ranging from 0 to 360), the saturation is how much of that color your want (0 to 100), and the lightness is how bright you want it.
So, to answer your question, you can take 360/99 as your sampling rate from the hue, choose a consistent value and intensity that you'd want and then convert that to RGB space to display it. For the conversion see:
http://web2.clarkson.edu/class/image_process/RGB_to_HSI.pdf
and for information on HSL color space see:
http://en.wikipedia.org/wiki/HSL_and_HSV
Basically, I have a context where I can't programatically tint an image, though I can change it's alpha value. With some experimentation, I've found that I can layer a red, blue, and green version of the image, with specific alpha values, to produce a wide range of colors. However, I am wondering if it's possible to achieve a true RGB representation through this method? If so, what is the formula for converting an RGB value into different alpha values for the red, blue, and green layers.
The basic "equation" of alpha combination is:
alpha * (R1,G1,B1) + (1-alpha) * (R2,G2,B2)
When you have three layers with alpha you are actually combining 4 layers (the 4th one is black) so the final color is:
alpha1 * (R1,G1,B1) + (1-alpha1) * (
alpha2 * (R2,G2,B2) + (1-alpha2) * (
alpha3 * (R3,G3,B3) + (1-alpha2) * (0,0,0) ) )
Provided you have the same image on each layer and layer1 is the red channel (G1=B1=0) and layer2 is green and layer3 is blue you get:
(alpha1 * R, (1-alpha1)*alpha2 * G, (1-alpha1)*(1-alpha2)*alpha3 * B)
For a white pixel you can do any possible color. For a black pixel you cannot do anything but black. For any other pixel, you are restricted by the values of R, G and B.
Say you wanted to achieve (Rd, Gd, Bd) at a pixel where the current color is (R, G, B) then you would have to choose:
alpha1 = Rd/R
alpha2 = Gd/(G*(1-alpha1))
alpha3 = Bd/(B*(1-alpha1)*(1-alpha2))
The problem is that alpha can typically only be between 0 and 1. So, for example, if Rd > R there is nothing you can do.
You can do better if you can control the blending function (for example, in Photoshop).
I don't think that's possible, if I understand you correctly.
If, for a certain pixel, your image's red value is, say, 0.5, you can combine that with an alpha in the (typical) range [0,1] to form any value up to and including 0.5, but you can't go above, to get e.g. 0.6 or so as the output value.
If you're looking to create 3 layers that blended together add up to the original image, it's quite possible. Here's a link to a Python script that calls functions in Paint Shop Pro to do the hard parts.
http://pixelnook.home.comcast.net/~pixelnook/SplitToRGB.htm
If you need more detail than that, leave a comment and I'll try to fill it in later.