How to pick colors, build a palette with CSS variables, and ship modern gradients in CSS and Tailwind — without a design degree.

As developers, we can build the entire app — auth, database, deploy — and then freeze the moment it's time to pick colors. "Is #3b82f6 the right blue? What goes with it?" Design isn't our main job, but a clean color system makes everything we build look 10× more professional.

This is the practical workflow I use to add good colors and gradients to a project fast, with code you can paste straight in.

Start with a palette, not a single color

The mistake is picking colors one at a time. Instead, grab a whole palette (4–5 colors that already work together) and wire it into CSS variables so the whole app references one source of truth.

:root { --color-bg: #0f172a; --color-surface: #1e293b; --color-primary: #3b82f6; --color-accent: #22d3ee; --color-text: #e2e8f0; }

.button { background: var(--color-primary); color: var(--color-text); } Now changing your whole theme is a five-line edit, and dark mode is just a second :root block.

Where do the palettes come from? You can hand-pick on the color wheel, but it's faster to browse curated ones. I've been building PaletteCSS for exactly this — every palette gives you copy-ready hex, CSS, and Tailwind values, and you can browse by color, e.g. blue palettes, or by theme like pastel or dark.

CSS gradients: the three types you actually use

Linear gradient

The workhorse. Direction + color stops:

.hero { background: linear-gradient(135deg, #6366f1 0%, #ec4899 100%); } 135deg goes top-left → bottom-right. Add more stops for richer blends:

background: linear-gradient(90deg, #f59e0b 0%, #ef4444 50%, #8b5cf6 100%);

Radial gradient

Great for spotlights and soft backgrounds:

.glow { background: radial-gradient(circle at 50% 30%, #22d3ee 0%, #0f172a 70%); }

Conic gradient

Perfect for pie-chart-style rings and modern accents:

.ring { background: conic-gradient(from 0deg, #6366f1, #22d3ee, #34d399, #6366f1); border-radius: 50%; }

If you don't want to fiddle with stops by hand, you can grab ready-made ones with the code already generated from PaletteCSS gradients and tweak from there.

The same gradients in Tailwind Tailwind has gradient utilities built in:

Gradient with Tailwind utilities

For something Tailwind's palette doesn't cover, drop to an arbitrary value:

Custom gradient, no config needed

4. Gradient text (the trick everyone asks about)

.gradient-text { background: linear-gradient(90deg, #e879a0, #a855f7, #22d3ee); -webkit-background-clip: text; background-clip: text; color: transparent; }

5. Two rules that keep it looking professional

Mind contrast (accessibility). Text on a gradient still needs a contrast ratio of at least 4.5:1 for body copy. Test the lightest part of your gradient against your text color, not just the average.

Stay in the same color family. Gradients look best when the colors are near each other on the wheel (analogous) or a deliberate complementary pair — not random. This is exactly why starting from a ready-made palette saves you: the colors are already chosen to harmonize.

Wrap-up

A solid color workflow as a developer is just three steps:

Pick a palette, not single colors.

Wire it into CSS variables (or Tailwind theme tokens).

Add gradients for depth — linear for most things, radial/conic for accents.

Do that and your side projects stop looking like unstyled localhost.

If you want a shortcut for steps 1 and 3, I built PaletteCSS — free, copy-paste palettes and CSS gradients with hex/CSS/Tailwind output. Would love feedback from fellow devs. 🎨

What's your go-to method for picking colors in a project? Drop it in the comments.