Hi,
I’ll try to phrase this in a way that make sense (to me anyway).
Say I have a color with a hex value of #ffb600 (looks like “solid yellow”). I’m told I can use this color, but with a 70% tint (which I understand to be akin to "70% strength). Does that color value, at 70% have a corresponding hex value that can be derived?
Thanks.
Joe
I’m not sure I understand the question, but the hex value of FFB600 means Red 255 Green 182 Blue 0 (with each value ranging from 0 to 255). Pure yellow is more like 255 255 0 which in hex would be FFFF00.
If you want to apply a 70 percent tint to your RGB value of FFB600 you just multiply each color value by 0.7. This keeps the ratios between the colors the same resulting in a darker tint of the same basic color.
255 x 0.7 = 179 (B3 hex)
182 x 0.7 = 127 (7F hex)
0 x 0.7 = 0 (00 hex)
A 70 percent tint would therefore be B37F00.
Is that what you are asking for?
Looks more orange to me. Anyway, if I understand correctly, you are looking to change the saturation, e.g. increase the amount of white/gray added without changing the hue. RGB values don’t work great for this. I’d convert to a color space that allows this to happen easy like HSV color space (Hue, Saturation, and Value or lightness). Keep H constant and change one of the others. 255,182,0 is HSV 42,100,100. YMMV depending on display.
ETA: I did this in Paint.NET. That or Photoshop or GIMP can do this usually by expanding the color palette. If you need to convert many RGB numbers, it would be better to use conversion equations.
Thank you for the responses. This was very helpful to me
There are also online tools that let you visually mix and choose hex colors, and some have fractional tint options as well. The straight math process will work but something is tickling the back of my mind about color shifts using this method.
What I’d try is setting the color in a sophisticated tool like Photoshop, then pulling a tint and checking the resulting RGB mix against the calculated value. I suspect the biggest differences, visually and mathematically, will be in tints under 30% or so.
I’m glad this thread got started. I apologize for the hijack, but maybe it’s not a hijack at all. Anyway, I’ve long been very interested and curious about the concepts mentioned so far, and I’d like to learn more about them. I’ve tried Wikipedia, starting with the article Color space, and trying the various links it has, but it makes no sense to me at all. I understand how mixing red and yellow paint is different from mixing red and yellow light. I also get how the colors on my electric monitor will tend to be brighter than the colors from my inky printer. What I don’t get is how there can be a color in one “color space” that simply can’t exist in another - or maybe I just don’t understand what color spaces are all about.
Does anyone know of a “Color Spaces for Dummies” that I could read on the web somewhere?
advTHANKS!ance
The RGB and CMYK color spaces are completely arbitrarily defined - they each choose base color values that can be scaled from 0 to 100 percent to define a spot in the color space. (The Hexachrome system adds a dark orange and a green to CMYK and has a much wider color space for print, but it’s rarely used except in high-end printing.)
However, there are some spots in the real world color space that cannot be created by any combination of these arbitrary base colors. Imagine that you had only red and green; no amount of mixing them could produce blue or purple. It takes an infinite number of base colors, or something approximating a very large number of base colors, to form every shade within the real world color space.
The Lab (that’s L, a, b and not “lab”) color space uses infinitely variable color and density values instead of a fixed color base. It encompasses all colors that can be created using CMYK and RGB, and many more besides, and thus comes much closer to representing the span of real world colors. (I think it theoretically can represent any imaginable visible color, but I might be wrong on that.)
Tools like Photoshop work internally on the Lab color model and map the results to whatever model is being used by the display - CMYK for print and RGB for phosphor.
Does that make any sense?
I’m not sure I follow, but like here? sRGB (the triangle) is based on the ratios of 3 CRT guns. Decreasing e.g. blue (make it yellower) only decreases the beilt of the blue. Meanwhile sources of light better than a monitor can change the intensity at every wavelength. And there can be more contributing primaries than a given RGB. Also the guns may not be “strong” enough to reproduce a pure green or other color.
Maybe here? “modern color models” is probably the start of the relevant info.
Another thing is that these color spaces are usually 3D. In my first link, imagine that brighter colors are represented in an axis coming out towards you, and dimmer away from you. But the brighter/dimmer it gets, the gamut shown shrinks. At the brightest, the triangle or horseshoe is small and centers on the white point, as a pure R(255,0,0)/G(0,255,0)/B(0,0,255) can’t get that bright.
This totally blows my mind. I’ve always been taught, and always understood, that the the types of cone cells in our eyes are each sensitive to different wavelengths, so anything that can be seen must be seen as a combination of the three base colors. I certainly understand that different colorspaces can have different intervals (like one being able to show 69.3% of something and another can go to 69.28%), and I can also understand that my cones might be “calibrated” slightly differently than yours, but the idea that a given color might not appear in a colorspace at all is new to me. On the other hand, it easily explains how so many different approaches to the problem cropped up.
Thanks to all for the links, I’ll be reading them later.
This statement about rods/cones is essentially correct. When dealing with RGB vs CMYK, the point is there are different ways to generate those wavelengths depending on the medium.
What I do when I want to take a tint of a color -
If you’re going off of a photoshop-based comp to begin with, this always seemed the easiest to me 
Here’s another, simpler way to view it: the web-safe color spectrum of #00-00-00 through #FF-FF-FF is another arbitrary limitation of the color space to select color value steps. Even simple color tools can create many shades in between these rather coarse gradations. The bigger picture - RGB and CMYK over Lab, or Lab over ideal human vision - is a superset of that situation.
That’s what I meant above, broken into more (and useful) steps. What I often find in using this process, or the mathematical one, is that tints under about 30% are shifted significantly from what I expect - usually pinker or purplier, which would indicate that red is having a stronger proportional effect than the other components.
I don’t think the calculated values are a good way to get an accurate tint, but they might be good for a starting point with some manual tinkering to follow.
Depending on what you mean by “tint,” this is what you get in Photoshop if you take your color and bring its saturation down from 100% to 70%:
Currently, the color #ffb600 has an HSB (Hue, Saturation, Brightness) level of 43°, 100%, 100%.
If we take the saturation down to 70%, we get: #ffcc4d. It is the exact same hue (color) as the original, just more towards gray (or, in this case, white as our brightness is at 100%). So, basically, you’re looking at a scale in which you’re sliding from 255, 183, 0 to 255, 255, 255. I’m not 100% sure of the math, because color space math can get quite complex, but it looks like all Photoshop is doing here is moving the G and B channels proportionally closer to 255, depending on the saturation percentage.
Missed edit:
ETA: So, in this case, for each channel: 255-S(255-C), where S is saturation (expressed as a number from 0 to 1) and C is the original color channel RGB value. Testing out some other saturation values, it does seem it’s just this simple equation for Photoshop. Now that’s for moving a particular color, at full brightness (meaning one of the channels is #ff), closer to pure white.
Thanks! That sure does have an awful lot of info! But I’m having trouble with some really elementary concepts.
To my mind, if a set of colors are combinations of three primaries (and I do see that not everyone agrees with that, but bear with me please) then the simplest way to illustrate the color space is with a cube - one axis for each primary, going from none of each color to lots of each color. It looks somewhat like the picture here with the caption “side view of the six paint gamut”, except they show only the corners of the cube, and I envision a solid, from which any slice would show lots of shades and gradations.
Now, given that as a starting point, here’s what I can’t wrap my head around: Why is that cube in the tiny minority? Why is it that almost all of the diagrams I’ve seen are in circular or triangular shapes? A circle (or sphere) is a very cool way to show how one color can sort of fade into another color, but doesn’t it impose fundamental limits on mixing a third color into it? And why is it that so many “triangles” actually look like a cut-off parabola? What happened to the edges and corners? If someone would tell me that those are the limits of the human eye’s color perception, then I’d accept it, but I think something else is going on.
Does any of this make any sense?
Yes, indeed. In fact, many many years ago, I used MS Paint to create the sort of cube that I described above. It was only a set of squares (slices) on my monitor, but it was still a nice illustration of color mapping.
I do believe this, even though I have trouble understanding it. The reason I believe it is that I have very rarely seen a good bright orange from a computer screen. They all seem a little brownish. I suspect that when I do see a good orange color - like in a photo of the fruit - it is because it is not a pure color, but includes pixels of other colors to highlight whatever… I don’t really know what I’m talking about. Does anyone else know what I’m talking about?
I’m not 100% sure about that last part, either (although I think that’s correct), but I do know Lab can represent imaginary/theoretical colors, and even the PhotoRGB space runs into these imaginary areas of color, mostly towards the deep blues, but also a sliver of the greens.
There are more colors in heaven and earth, Horatio, than are dreamt of in your Photoshop.
Lab’s primary strength is that it makes it easy to compare colors in ways that RGB and HSV don’t accommodate. It is entirely possible to have colors that are visually similar yet have wildly varying RGB and HSL values, such that absolute or proportional range checks don’t consider them similar.
Use RGB if you want to push colors to silicon.
Use CMYK if you want to print.
Use HSV/HSL if you want to manipulate colors.
Use Lab if you want to compare colors.
That’s pretty much right, but, these days, especially since a lot of places go beyond four-color printing, all the labs I use ask for RGB files, not CMYK. Even my home printer (an Epson R2000) has a wider gamut than CMYK and wants RGB files for its look up tables.
Lab is also useful for color manipulation and there’s a few advanced tricks you can do to photographs in the Lab color space that can’t be done (or can’t be done as easily or as well) as in the RGB color space. Lab is especially neat in that your luminosity and color channels are completely separate.
