Sorry if its a newbie question but entering new territory and google hasn't been very helpful and would love a fresh description
Thank you
The way we represent colors is dependent on the system we try to use this color value. I do not know what language you're refering to in your question, but you can find #ffffff used in CSS, while integer form 0xffffff can be seen in different programming languages.
You may wonder why it is in HEX?
Just because it's easier to see the value of the color, as it's being presented in a way of 255 bytes for each color respectively. So, you can see that 0xff0000 is a pure red. Compare it to value of 16711680 - this is the same value but it does not tell you what color it is.
Every web/css developer can spot the pattern here*:
#ffffff, #cccccc, #aaaaaa, #999999, #666666, #333333, #000000
As it's just set colors from White to Black and some shades of gray in between.
Hope this helps!
*for CSS in particular, the above pattern should be written as:
#fff, #ccc, #aaa, #999, #666, #333, #000
Related
I've been trying to figure this out for 2 days now, so I hope somebody can help.
I need to load in svg files that have multiple values of gray within them and tint them with colors. So for example, say the svg file is an image of a rock and has 4 values of gray. I need to be able to display the rock as red and keep the differences between values in the different child shapes. In other words, I would like it to work just like PImage.tint().
I see there are tint() and setTint() methods to PShape but I can't seem to get them to work. I also though about recursing through the child shapes and reading each color individually and recoloring appropriately, but I couldn't even figure out how to read the color out in a way I understand.
Help, anyone?
If you have it as an <img> you can use the CSS filter property with hue-rotate https://developer.mozilla.org/en-US/docs/Web/CSS/filter-function/hue-rotate
Or you add the svg directly to the html and add classes to your elements. Then you could change the colors in your script.
If this is a flat colour then you could use the alpha value in RGB colour value. See 'color transparency' in the following link: https://processing.org/tutorials/color/
The fill value is fill(red, green, blue, transparency)
I hope this helps. If you want to share code and have a reason for using PImage I'd be happy to have a look.
I am new to CSS and programming in general so I am sorry if this is a beginner question but I couldn't find a proper solution myself.
If I have a certain color code (HEX), e.g. #028dca, how can I get matching colors for this ?
I found a number of tools online but I only saw solutions that give me different shades of the same color whereas I need different colors that match the above hue etc., especially red and green - and a few more colors would be nice to have.
One of several examples I tested is the following but again I couldn't find a proper red and green tone there, just different shades of blue and orange as the complementary color (and it looked similar with other tools I checked): https://color.adobe.com
Can someone help me with this ?
Many thanks in advance,
Mike
Don't know actually what you mean with "couldn't find a proper red and green tone". Given a particular color, it has complementary colors... it's math.
Here is the one that I use: http://croma.numixproject.org
Try using Coolors.co
You can fix on colors and then try different palettes.
The one with the color you posted would be like this - http://coolors.co/app/86615c-f1a699-028dca-79065a-02241a.
You can explore more by hitting the spacebar
I'm a student and recently I'm making a website in order to share the course with others
And I got a problem:
I'm trying to express the "Course Heat Degree" by color
(now all the color is bule in the following picture)
now I get a course_heat_num from the server but I have no idea how to use it cause I want the
"cool color"(like #cc00ff) represent small course_heat_num and "warm color"(like #ff0000) represent the big number
I don't know the function or the variation in the chang from the cool color to the warm color(BTW:not from #000000 to #FFFFFF)
Hope Someone can help!
You might want to look at HSL colours in the CSS3 Colour Module.
It allows you to express colours as Hue, Saturation, and Lightness instead of RGB values. In your example, blue would be hsl(0, 100%, 50%) but red would be hsl(249, 100%, 50%). You can vary between 0 and 249 for the hue parameter.
To get an idea of what the colours look like, try the HSL Color Picker.
You should check out the wiki, here are a number of ways for you to go.
Pick a technique, and calculate the proper color, it should be nice.
I'm customizing a color picker's default showing colors which will be used as background colors. I'm wondering if there is a collection of the colors that are particularly useful in practical web design. Like nobody(hopefully) would use #f00 as a 100%-width page's background color while #fff is a universally usable one, there's DO'S and DONT's when it comes to picking background colors. So what are the candidates in your opinion?
I know this could be subjective, but generally I believe there IS a solid set of them.
[edit] : I kinda have an idea to customize the color picker in a logic way, first pick a buch of hues, them for each hue, start from the possible lightest of saturation to the possible heaviest. A bit demenstration:
gray [ #eee, #ccc, #ddd, .... ]
green [ ... .... ... .... ]
blue ....
yellow
brown [
As for a realistic answer, #fff won the race, right? Sometimes you'll see shades of gray, #eee, #eaeaea, and an occ. #000.
If you want to mix things up, I'd recommend checking out http://kuler.adobe.com/ to get an idea for what's popular, but perhaps slightly different. It's fun to experiment with the palettes up there.
I don't think there is a universal standard for picking up colors for your site. It entirely depends on the nature of the site and the kind of users that visit the site.
For eg: it would be nice to give a greenish color for a site that's theme is nature.
Here is a nice site in which you can choose color combinations and get a preview of that in a single click.
Color Scheme Designer
Never choose a color that will distract the user from seeing the actual contents of the site.
If you allow users to select the color then it would be nice to show them a preview of the site with the colors they have chosen.
Contrast is what really matters when choosing background/foreground colours, so they're likely to be very light, or very dark
so you'll need light and dark variants. i'd probably opt for:
light red, orange, yellow, green, blue, indigo, violet
and dark as above
maybe the same for some earthy type tones, browns, greys, etc.
If you like colours like I do, you might visit ColourLovers. They've got some great ways of choosing colours, and colour schemes. The website trends section might be interesting to you.
I personally like schemes where the lighter colour is not pure white. Pure white can be sometimes harsh when reading lots of text.
Creativity is BREAKING the rules.
It is possible that a seemingly bad color combination, if used in right proportions, can actually look good, so there is no such thing as a bad color combination, it also matters on the shades, difference in colors.
Believe it or not, i own a site (www.salvin.in) where user can change the background color to many different choices and it still manages to look good *ahem in most of the cases.
There are a few things that i suggest you to look into:
Color wheel
Color harmonies
Triads and Tetras
Mono chromes (with contrasting shades)
Complimentaries
I find that #000 messes up my eyes. After looking at mainly #FFF pages/applications, then switch to #000, then when I go back to anything else, it take a while for my eyes to adjust. I vote "no" to #000.
I'm not sure how to ask this but here goes.
I draw a filled coloured rectangle on screen. The colour is in form of R,G,B
I then want to draw text on top of the rectangle, however the colour of the text has to be such that it provides the best contrast, meaning it's readable.
Example:
If I draw a black rectangle, the obvious colour for text would be white.
What I tried right now is this. I pass this function the colour of the rectangle and it returns an inverted colour that I then use for my text.
It works, but it's not the best way.
Any suggestions?
// eg. usage: Color textColor = GetInverseLuminance(rectColor);
private Color GetInverseLuminance(Color color)
{
int greyscale = (int)(255 - ((color.R * 0.30f) + (color.G * 0.59f) + (color.B * 0.11f)));
return Color.FromArgb(greyscale, greyscale, greyscale);
}
One simple approach that is guaranteed to give a significantly different color is to toggle the top bit of each component of the RGB triple.
Color inverse(Color c)
{
return new Color(c.R ^ 0x80, c.G ^ 0x80, c.B ^ 0x80);
}
If the original color was #1AF283, the "inverse" will be #9A7203.
The contrast will be significant. I make no guarantees about the aesthetics.
Update, 2009/4/3: I experimented with this and other schemes. Results at my blog.
The most readable color is going to be either white or black. The most 'soothing' color will be something that is not white nor black, it will be a color that lightly contrasts your background color. There is no way to programmatically do this because it is subjective. You will not find the most readable color for everyone because everyone sees things differently.
Some tips about color, particularly concerning foreground and background juxtaposition, such as with text.
The human eye is essentially a simple lens, and therefore can only effectively focus on one color at a time. The lenses used in most modern cameras work around this problem by using multiple lenses of different refractive indexes (chromatic lenses) so that all colors are in focus at one time, but the human eye is not that advanced.
For that reason, your users should only have to focus on one color at a time to read the text. This means that either the foreground is in color, or the background, but never both. This leads to a condition typically called vibration, in which the eye rapidly shifts focus between foreground and background colors, trying to resolve the shape, but it never resolves, the shape is never in focus, and it leads to eyestrain.
Your function won't work if you supply it with RGB(127,127,127), because it will return the exact same colour. (modifying your function to return either black or white would slightly improve things)
The best way to always have things readable is to have white text with black around it, or the other way around.
It's oftenly achieved by first drawing black text at (x-1,y-1),(x+1,y-1),(x+1,y-1),(x+1,x+1), and then white text at (x,y).
Alternatively, you could first draw a semi-transparent black block, and then non-transparent white text over it. That ensures that there will always be a certain amount of contrast between your background and your text.
why grey? either black or white would be best. white on dark colors, black on light colors. just see if luminance is above a threshold and pick one or the other
(you don't need the .net, c# or asp.net tags, by the way)
You need to study some color theory. A program called "Color Wheel Pro" is fun to play around with and will give you the general idea.
Essentially, you're looking for complimentary colors for a given color.
That said, I think you will find that while color theory helps, you still need a human eye to fine tune.