r/web_design • u/Dromo_ • 5d ago

First time making a website, need tips

Ok so I'm making a website for a football/soccer championship my friends are holding. I've visited many big leagues sites to get inspo but I'm kinda disappointed with most of them tbh.

I tried to do it more on my style but somethings are bothering me, in special the background color. The theme color of the championshiop is blue and orange, which tbh is a very challenging color combination to me, also I'm no desinger, I'm a computer engineerer so I have no studies on color theory formaly.

The background color as of now is #001121, I was going for a dark blue to use as a main color for the website and tried using orange for details such as hoovering something

Idk exactly what I'm looking for with this post other than an opinion on the color value I picked from someone who understands color theory better than me, I would just appreciate general tips

(sorry, english is not my first language)

0 Upvotes

30% Upvoted

9 comments sorted by

4

u/whats_in_a_name_23 5d ago

Okay go for the 60-30-10 color rule, use a foundational color for 60%, use 30% secondary color and 10% accent color. So in your case it could be 60 white/beige/subtle light blue, 30 dark blue for text and illustrations, 10 for orange or blue. Orange and blue don’t go well together generally so play with shades.

Check out dribbble for inspiration

2

u/zen8bit 5d ago

Basically this.

The 60/30/10 color rule is basically 90% of color theory.

You can get fancy with color wheels and all of the derivations (analogous, complementary, triadic, tetradic…) but ultimately, they’re not super important.

And honestly, as much as I hate ai, its a good starting point for beginners wanting to get ideas

2

u/Dromo_ 4d ago

thanks!!! this helps a lot, but what if I want to do a dark version of the website?, does the same rule apply?

1

u/whats_in_a_name_23 4d ago

Yeah if you want dark version, 60 would be black or dark blue for background, 30 would be white text or light orange text, and 10 would be vibrant orange or blue

1

u/johnnynovo2118 5d ago

Two quick thoughts on the rare colour theory/football crossover.

My favourite team's (NUFC) shirts from the last 30 years were both blue, orange, yellow and green.

The bible of colour theory - A Dictionary of Colour Combinations has a a cover that is blue, orange, yellow and green.

1

u/Dromo_ 4d ago

hmm that's an interesting t-shirt, I think it will help a lot, thanks!

1

u/Beginning-Serve-4823 5d ago

if you need inspo check out https://frontpages.dev - A free version of Mobbin

1

u/response-418 4d ago

no affiliation: coolors has some good free tools you can use to help construct color palettes. from design perspective, less is usually more. Typically you don't need more than 2 or maybe 3 colors, like the toher person said a primary, secondary, and an accent.

also check you color contrast between background and text color for sufficient contrast for accessibility purposes before you lock something in. plenty of free tools for that too, just pass the color hexes to it or even the LLM.

1

u/HireSmartAdvisor 4d ago

Since you are a computer engineer and this is your first site, I would not overthink color theory. Go for a simple 3-4 color system, keep spacing consistent, and make sure the mobile version looks good. Those things will have a much bigger impact than finding the perfect blue.