Calculate secondary color with similar distance of existing color pair - html

Libraries like Bootstrap often provide pre-defined color schemes, e.g. for buttons and alerts (i.e. success, info, warning and danger). In HTML they usually consist of a background-color and border-color, the latter usually having the same tone of color, but being slightly lighter or darker. Let's say we have a button with a light green background and a dark green border.
When customizing the color scheme, I often want to replace the primary color, but maintain the distance that the primary color and its secondary color have (e.g. highlight or outline). Assuming I want to turn the button red as primary color, how do I calculate the secondary color, so that it has the exact same distance, that the light green and dark green had?
For example, the existing button style is:
background-color: #343A40;
border-color: #243030;
Customizing the color scheme as follows:
background-color: #8D33AB;
border-color: ???;
Currently, I translate the HEX code to RGB format and then calculate the distance of red, green and blue channel individually. Then I apply the same distances to my new primary color (i.e. adding or substracting). Is there any easier way to substitute a color, maintaining the distance of the known color pair?

Related

Can you put AI layers seperately into code

I have an illustration in one main colour. As an example, orange. I use lighter and darker orange colours for contrast. I want to do the same with any colour via Css without recolouring the illustration in Illustrator. How can I get an AI file with the layers into the code so that I can then change only the main colour?

Instead of using a hex code for a color, make it transparent [AS3]

So lets say I have some code in as3, and it requires a given color (Current one is 0x701100 for example) but instead of giving it a hex color code, I want it to be transparent, aka no color, aka see through, you get what I mean.
This is basically the line of code that determines what color it is: super(0x701100, 0x8D1500); and well the 0x8D1500 represents some other things color, but all I want is the 0x701100 to be transparent/not show.
The color 0x701100 is already "transparent" in that it has no value for an alpha channel. It's the same as 0x00701100. A value such as 0xff701100 would represent a fully opaque color, and 0x80701100 would be about 50% transparent. Obviously, the problem is that your super() method does not support rendering transparency from the hex color.

Is it possible to change selection colour in file navigator?

Here's a screenshot:
I'd prefer for the selection to have a different colour - instead of the current blue colour.

Native/default colors for hovered title text and background

Natively in chrome/firefox, hovering over an element shows its title with a yellow background with black text.
Does anyone know the exact HEX or RGB colors for each?
thanks,
tim
Took a screen capture, opened it in photoshop, used the color picker to find the values.
In OSX/Chrome the tooltip yellow background is:
#ffffca
In OSX/Chrome the tooltip text is:
#000023
In OSX/FF the tooltip yellow background is:
#feffcd
in OSX/FF the tooltip text is:
#000
There are actually minor variations at some points in the Chrome bg, it's not a purely solid color. I'm not sure what would cause that anomaly. But the hex value I took was the most consistent, and any variations are negligible anyway.
Text is of course antialiased, and values were taken from what I perceived to be the darkest area of the text, which would correspond to its actual RGB/HEX value.
Hexidecimal color value for Windows tooltip background:
FFFFE1
Hexidecimal color value for Linux:
F6F6B9
RGB color value for Windows tooltip background:
(255,255,225)
RGB color value for Linux tooltip background:
(246,246,185)
From RGB space, you convert to Hunter-Lab space, use L condition(>0.5) to set the appropriate value,
http://dataanalysers.com/00ff00

Intuitive way of understanding hexadecimal html color codes?

Is there an intuitive way, or a good mnemonic, for understanding the correspondence between colors and their hexadecimal values?
You just have to remember that the scale is 00 (no color effect) through FF (full color effect) and the three parts of the triplet are red, green and blue.
000000 is black (i.e., no color) and FFFFFF is white (mixing all three primary colors).
The hard bit is remembering the mixtures, which I use the following mnemonics for:
Really good yams: Red + Green = Yellow (potatoes are my favorite food).
Really bad prunes: Red + Blue = Purple (I really hate prunes).
Good/bad apples: Green + Blue = Aqua (I'm indifferent about apples).
Obviously, you may have to come up with your own mnemonics if you food tastes differ from mine. But I find that's the easiest way for me.
Then it's just a matter of varying the quantities to add a little more red or little less blue and so on. I generally only use values of 00, 40, 80, C0 and FF since that gives you a 125-color palette to choose from and I don't want an abundance of choices to slow me down.
You need to get your head around three distinct things here.
Reading and writing numbers in hexadecimal. This just takes practice and familiarizing yourself with it. Color codes range from 00 (zero) through FF (= 255), so spend a little time (using calc.exe in Scientific mode, maybe?) picking a number and trying to guess what it'll be in hex, and vice versa. Counting in decimal is probably second nature to you; counting in hex is the same concept, with different symbols and rules.
How to read an RGB colour code as three component values. RGB codes are either written as three digits (#FFF) or six (#FFFFFF). In the first case, each digit is a single colour component; red, green, then blue. 0 = empty, F = 'full' (maximum). The second is the same but the additional digit gives you a much wider range of tones because you have 256 possible intensities for each component instead of 16.
Knowing the RGB colour model. Your primary colours are red, green and blue. Your secondary colours are yellow (R+G), magenta (R+B) and cyan (G+B). Increasing all the values makes the colour lighter; decreasing them all makes it darker. Pure greyscales will have three equal components - e.g. #ddd, #222. Tint greys by nudging one of the colour values up a bit - #866 will give you a dark grey with a hint of red. This bit you just have to learn through experience. Play with it. Get a tool like Instant Eyedropper and use it to find the hex values of known colours.
Getting it exactly right is very, very hard, but it won't take more than a couple of days before you can say "right... I want orange, which is somewhere between red (#F00) and yellow (#FF0) on the colour wheel, so let's try splitting the difference and use #F90... hmm, bit dark, so let's nudge the G and B components up a bit... #FA2... got it!"
Just think of it as mixing paint.
There are the three components RR, GG, BB, (RRGGBB) which can be mixed with different strengths. Remember that 00 is lowest strength, and ff is highest.
For example, we know that 000000 will be low strength on all colors and will be black. Likewise, ffffff is highest on all three color components, and will be white.
You can add or remove color by making one part stronger or weaker. For example, start with black 000000, and add a little red as 330000, or add a little blue with 000033. Add both and see what happens 330033.
Add a LOT of red, with ff0000. Or add a medium amount of green for 006600.
If all three components are close to the same strength, they cancel each other out and you have grayscale, which will be light or dark depending on the strength of the colors. So 000000, 333333, 666666, 999999, and ffffff are black, dark greys, ligher grays, and white.
If you take a medium gray, and add a little blue, you end up with a bluish grey, like 888899. Red, green, and blue almost equal, so almost grey, but with a bit more blue. You can experiment with them a bit.
One really great tool for viewing color codes is this (small and free):
http://www.nattyware.com/pixie.html
Hope that helps!
I'm not sure what you mean, but I always remember that it is an RGB colour: The first two digits are for red, the second pair is for green and the las ones are for blue.
like this: #RRGGBB
And of course trying to remember that lower numbers give darker coulours.
If you are looking for some way to remember the colour code for orange, I'm afraid you are out of luck. I always need to look that one up...
Hexadecimal colours are of the form #RRGGBB where RR is red, GG is green and BB is blue. Since they're hexadecimal they range from 00-FF. It should be fairly easy from that to gauge roughly what kind of colour you're dealing with for example #FF12A3 is going to be fairly red.
Break the colour up into a triplet of values that represent red, green and blue. The higher the hex value in each segment then the more of that colour there is. So #000000 is black, #FF0000 is all red, #FF00FF is purple etc.
I think it's useful to get a good HTML color chart and keep it by your desk. I like the Visibone mouse pads and posters.
Remember:
1) The order of the hex-pairs are Red, Green and Blue. This is easy to remember since we aften talk about RGB-color, RGB screens and so on.
2) The numbers should interpreted as the amount of light in the color. So 00 is no light, while FF is maximum light in that color.
3) I all three colors are of the same level, they "cancel each other out", so we get a greyscale color. 00 is minimum light, så if all three colors are 00 we get no light - ie. black. If all three colors are max-light (#FFFFFF) we get white, Any number in between is grey.
Well, monitors use an 'RGB' colorscheme. The order of the colors in the hexadecimal number is RRGGBB. So just remembering the name of the colorscheme tells you what goes where. Then you can parse the #RRGGBB as three numbers RR, GG and BB.
The higher the number the brighter that particular component.
Then you just need to remember the additive color wheel from grade school. ;)
I manage to create colors intuitively now (with some trial and error, of course), having practiced them a lot. Playing/using color mixers (with red/green/blue sliders for example) helps in understanding relationships. Now, I know that FFFF00 is yellow, FF00FF is magenta, 00FFFF is cyan, plus of course primary colors, and all others colors are in between.