Color Tools
How to Pick Colors for a Website
Picking the wrong colors is one of the easiest ways to make a site look unprofessional. But color selection doesn't require a design degree — it requires a simple system. Here's the one that actually works.
Start with three roles, not three colors
Before picking a single hex code, define three roles: background, accent, and text. Every color decision flows from these. Your background is what the page sits on. Your accent is what draws the eye — buttons, links, active states. Your text colors are what you read.
Most websites that look cluttered are using five or six colors without a system. Most websites that look clean are using three with discipline.
Picking a background color
#0f0f0fNear-black — easier on eyes than pure black#111111Slightly lifted dark background#ffffffPure white — clean, high contrast#f8f8f8Off-white — softer than pure whiteAvoid pure #000000 as a background. It creates extreme contrast that strains eyes during long reading sessions. Even a slight lift to #0f0f0f makes a noticeable difference.
Picking an accent color
Your accent color is what buttons, links, and interactive elements use. It should stand out against your background without being harsh. Blue is the safest choice because it reads as "clickable" — the web has trained users to associate blue with links for 30 years.
Whatever color you pick, test it at button size. A color that looks great as a large swatch can disappear at 14px. Saturated midtones — not too pale, not too dark — survive at small sizes best.
The 60-30-10 rule
Borrowed from interior design, this proportion rule works equally well on screens:
The dominant color — page background, large panels
Cards, sidebars, input fields, modal backgrounds
Buttons, links, active states, highlights
Contrast: the rule you can't skip
WCAG AA accessibility standards require a contrast ratio of at least 4.5:1 between text and background. If you skip this, your site is hard to read for anyone with reduced vision — and harder to read for everyone in bright light or on cheap screens.
White text (#ffffff) on a dark background of #0f0f0f passes easily. Dark grey text on a light grey background often fails. When in doubt, go darker or lighter — don't rely on the color picker alone.
Find your exact color code
Pick visually with the canvas. Copy HEX, RGB, or HSL. Free, no sign-up.
Color Picker →Frequently asked questions
How many colors should a website use?
Three is usually the right number: one background color, one accent color (for buttons and links), and one or two text colors (primary and secondary). More than that and the page starts to feel visually noisy. Most professional websites — including Apple, Stripe, and Linear — use this structure.
What is a good background color for a website?
For dark sites: #0f0f0f or #111111 are softer than pure black and easier on the eyes. For light sites: #ffffff or #f8f8f8 work well. Avoid pure #000000 as a background — the contrast against white text is so high it causes eye strain over long reading sessions.
What is the 60-30-10 rule in web design?
The 60-30-10 rule is a color proportion guideline. 60% of the page should be your dominant (background) color, 30% a secondary color (cards, sidebars, panels), and 10% your accent color (buttons, links, highlights). It's borrowed from interior design but applies directly to web layouts.
How do I check if my text color has enough contrast?
WCAG AA requires a contrast ratio of at least 4.5:1 between text and background for normal text, and 3:1 for large text (18px+ or 14px+ bold). You can use a contrast checker to verify this. Common safe combinations: white text on dark blue (#1c60f6), black text on light gray (#f8f8f8).
Should I use HEX or RGB colors in CSS?
HEX is the standard for most CSS color values — it's compact and universally supported. Use RGB (or specifically rgba()) when you need transparency: rgba(28, 96, 246, 0.5) gives you the same blue at 50% opacity. Use HSL when you need to programmatically generate color variations, like hover states or color scales.
How do I pick an accent color for a website?
Pick a hue that reflects the brand's personality — blue for trust, green for growth, red for urgency. Then find a specific shade that has enough contrast against your background. Test it on a button and a link to make sure it reads clearly at small sizes. Saturated midtones (not too light, not too dark) work best.