I am new to CSS & learning. Currently I am playing with fonts colors. I got stuck when I wanted to find the right font color for the following background. Please suggest me some colors which might look good on this. I have tried colors like Red, Blue, White, Black & several few. But I wasn't satisfied & it was not pleasing. Tell me how to select colors. Random trial & error ? Is there any tool available, which takes my image & gives me some color ? Is there any tool available, where I can upload my image & try the colors, quickly ?
If you have Adobe Photoshop, just open the image in that and use the eye dropper tool on the image to select a color. That's terrible image quality though so you might struggle to find one that looks nice anyway.
https://kuler.adobe.com/create/color-wheel/ This site should help. Have you taken Color Theory in school or for fun yet?
Before we even TALK colors and color contrasts, I have to inform you that your entire CONCEPT is flawed. That image is NOT suitable to have text over it in the first place! There are too many colors of too many different contrasts for any single color to be legible over it. Ever notice you don't see a lot of images like that one online with text plastered over them? When you do it's illegible trash? There's a reason for that. That image is what I commonly refer to as "Not viable for web deployment" in terms of use as a background behind content. As to choosing colors, it's all about contrast between background and foreground. The rule of thumb is a 50% luminance (brightness) difference between foreground and background as minimum, and 70% or more being ideal. Ever notice that pure red (#FF0000) on pure blue (#0000FF) or vice versa is near impossible to read? That's because pure blue is only 11.4% intensity/luminance/brightness, while pure red is only 29.9% -- a difference of only 18.5%, well below our 50% minimum. See section 1.3 of my "what's wrong with your website" series of articles for more on the topic of color choices. http://techtalkin.com/Thread-So-what-s-wrong-with-your-website-PART-1 With all those different colors in that image, it makes even choosing a single color such a royal pain, and the color contrasts being all over the place flat out means one color isn't going to cut it. Look around the web -- how often do you see images more complex than a simple gradient behind text? There's a REASON for that!
Oh, word of warning -- the 'luminance' used in most paint programs like Photoshop or the Gimp is COMPLETELY USELESS in terms of testing color contrasts as they use the reflective formula (print) instead of the emissive formula (screen), giving entirely different results. As you'll hear a lot the more you do websites, "The web is not print". Also, technologies like font-smoothing can often muddy/darken the thin parts of your font glyphs, meaning you don't actually get the color you declare on all parts of the font. Smaller fonts, and fonts with really thin glyphs (like a number of fancy webfonts) are much more prone to these types of issues -- which is why even white text on black in certain fonts ("Text me one" on google webfonts for example) can end up illegible at small sizes. You often have to screencap and see what you are REALLY getting for colors at smaller sizes and adjust accordingly. Which is something I really should add to that section of my article.
IF you call #FFF on #999 to be legible -- which of course being less than 128 is not for a significant part of the population; it's why opacity/semi-transparency is BAD accessibility, much less the inability to focus on it. to reach the minimum you'd REALLY need to darken up that box a hell of a lot more. Not that using an image with opacity indicates actually caring about accessibility... though you MIGHT be able to sneak by with a bit of text-shadow helping out, I'd just skip the image that to be frank really has no business behind text in the first place.
The Opacity is just too low in this example. No big deal, I just wanted to show him another option. I've never seen a website with this type of image but I've seen anti-drug pamphlets like this and Opacity was the answer.