I have been developing some basic sites for a while, but the colors i select are non-attractive. So does anyone knows how to get colors like professional site that is, all the type of attractive color combinations.
Thank You.
1 Like
Hi,
there are loads of colour pallette sites.
some give you pallettes, some give you colour wheels to help choose the matching colors.
HTH
Mark
4 Likes
these are a couple of great articles that I reference a lot when I’m trying to put together a color palette - once you get a grip on the basic ideas, it’s a lot easier to use the nice resources that @MARKJ78 referred you to
(I’d highly recommend reading through both of these - there’s some overlap in the content, but it really helps you understand what’s going on)
6 Likes
Thank You,
I read both the articles and second one “A Simple Web Developer’s Guide To Color” was really very helpful. The problem with the colors is that i am not able to decide which one to use for background and which to use as text. Is there any specific article for specifically font part. Once again thanks.
Here’s a site I like. They take scenery photographs and create a color palette based on that image.
2 Likes
hmmm, I don’t think I know of an article that specifically talks about choosing colors for the fonts
if I could give you a tip, I’d probably say that for now it would be good to stick with just black or dark gray text for lighter backgrounds, and white text on darker backgrounds. The most important thing with text is that you want it to show up, and doing this will work for that.
so you can just stay with black, dark gray, and white until you feel a bit more comfortable with making color palettes, and then branch out and experiment more as you get the hang of things
I have one other thing for you to look at - it isn’t an article, but it has a bunch of examples of good designs, and looking at a bunch can help you get what “good design” looks like kind of stuck in your head: http://www.awwwards.com/awards-of-the-day/
edit: (you’ll notice, if you look at the award-winners on that site, that a lot of them just stuck to black or white for their text - so that really is okay to do)
Yes i have visited this sites, the projects here are extremely awesome and thanks regarding colors. It will help a lot.
For font colouring guidence maybe you might be better off searching for typography articles tht talk about contrast. Maybe 
1 Like
Usually it’s best to go with the best contrast in terms of the colour pallette you’ve chosen.
Light background, one of the darker colors, or grey for text, Or the other way around, darker background with one of the lighter colours as text.
Then use the other colors for buttons and highlights and links etc.
Previously:
https://forum.freecodecamp.org/t/how-to-make-better-looking-projects/33017/2?u=jacksonbates
1 Like
I use an extension in Chrome called Colorzilla it’s like a dropper that you put on colors you want to select…It gives you the hexacodes I believe…pretty handy.
If you ask this question, I assume you’re somewhat like me who is not very good with art so I’m more focus on coding for functional; therefore, for web color, I simply search for web complimentary colors or web color abstracts.
Take these 2 of my sites for example, they’re not really a lot in coloring, but they’re not very displeasure for the eyes either. Since these two are in my school domain, use “student” for both username and password.
https://pratt.broward.edu/nguybp1/CTS1806C-521096/project/
https://pratt.broward.edu/nguybp1/CTS1851C-515424/
1 Like
Second one really looks awesome and thanks for the advice, now i think i am getting a grip upon colors through practice @nguybp1
1 Like
Thanks. Since they’re school assignments with duration of couple days for each so they might not all pretty since I have to do them fast and meet all requirements to receive full 100% points for each, especially 1 of my professor is very helpful by take off 10% if any line of code is not align properly, don’t talk about any missing requirement, it’s even more heavy subtraction… for example, here is the version similar to the first that’s mostly HTML/CSS, but all requirements for this one have to be JavaScript
https://pratt.broward.edu/nguybp1/CTS2852C-521100/
1 Like
Take a look at the video and instructions on the Material Design Color guide. https://material.google.com/style/color.html
They have some good advice and if you follow their directions, you almost can’t go wrong.
If you are playing with colors, open of the chrome dev tools, use selector arrow (top left) to pick what you want to color and then edit the color in the styles panel. You can even use a color dropper if you click on the color box. Once you are happy, you can copy that stuff out and put it in your css.
I’ve been playing with color this week on my portfolio site http://portfolio.hypersprite.com
If you click the magic wand in the bottom right, it will swap out different css files.
You can see that some look more pleasing to the eye than others.
I’ve always been completionist so this might be way more than one needs but there are hundreds of colour theory tutorials online. So what I have to offer, if you choose to delve down this rabbit hole, is keywords.
Value, hue, chroma. - these are the three dimensions of colour.
Greying the pallet - or “your pallet” helps highlight a focus colour and I see the concept used in page design.
Complementary and contrasting colours - some rules that make picking hues easy.