Color combos for a site containing multiple inputs/buttons
https://github.com/callum-laing/cdl-workout
As you can see, I'm very bad at trying to style my sites, mostly due to color combinations, and fonts, I think those 2 make a huge difference to the aesthetics of the sites, and I can never find combinations that work well together (have tried coolors.co and other various sites).
GitHub
GitHub - callum-laing/cdl-workout: Site to track my workouts and nu...
Site to track my workouts and nutrition using VueJS and Vite! - callum-laing/cdl-workout
4 Replies
Off black, white, brand color
Use popular Google font pairings: Google 'popular font pairings'
Use slightly rounded corners and box shadows
Formula if you want to make it easy
If you want to make it creative it'll take a long time and a lot of practice since design is a separate field. You need to crawl before you can walk
Off black, white and brand color, interesting… going off a few design sites there’s quite a lot using various blue or green or yellow shades combined and minimal black outside of the text.
I definitely need to start crawling into the design world, atleast even a small bit to get some more understanding here 😅
There’s a lot that goes into colour. Having studied art or design or some version of colour theory is helpful , any background in marketing and the psychology of colours is also helpful.
When all else fails , as Vince suggested stick to a dark shade of your primary (pure black is almost never used) so a dark neutral , a light neutral and your accent colour. If you need to expand the palette to have more options/ contrast for accessibility use a lighter shade of your dark neutral and a darker tint of your light neutral to make a palette of 5.
Neutral-900, neutral-700, accent, neutral 300, neutral-100.
For fonts if you haven’t found some pairings you like , as suggested go with tried and true google . You wouldn’t want more than 2 typefaces though , 3 max if you can really make a case for it but a display font and a base font with the different weights will be plenty .
Appreciate this, thanks!