Beginner12 min readShare
Was this chapter helpful?
Share
Try these free tools
Understand how colors work in web development. Learn the formats, explore palettes, and communicate colors precisely to AI. Try our Palette Generator to create a palette in seconds.
#5046E5Format: #RRGGBB
6 characters (0-9, A-F). Each pair = Red, Green, Blue.
Most Commonrgb(80, 70, 229)Format: rgb(R, G, B)
Values 0-255. RGBA adds alpha (0-1) for transparency.
With Transparencyhsl(244, 75%, 59%)Format: hsl(H, S%, L%)
Hue (0-360), Saturation (0-100%), Lightness (0-100%). Most human-readable.
Human Readable#5046E5rgb(80, 70, 229)rgba(80, 70, 229, 1)hsl(244, 75%, 59%)Click any swatch to copy its hex value.
Smooth transitions between colors — popular for backgrounds, buttons, and hero sections.
Indigo → Pink
linear-gradient(135deg, #5046E5, #F472B6)Teal → Indigo
linear-gradient(135deg, #2DD4BF, #5046E5)Pink → Yellow
linear-gradient(135deg, #F472B6, #FBBF24)Green → Blue
linear-gradient(135deg, #10B981, #38BDF8)Orange → Indigo
linear-gradient(135deg, #FB923C, #5046E5)Hot Pink → Teal
linear-gradient(135deg, #EC4899, #2DD4BF)AI Tip: "Give the hero section a gradient background going from indigo (#5046E5) to pink (#F472B6) at a 135-degree angle."
Pick colors below and see them applied to a real UI component instantly.
This is a live preview. Change the colors above to see how they look together.
Main brand color. Buttons, links, key elements.
Complements primary. Highlights, visual interest.
Green — confirmations, positive indicators.
Yellow/amber — cautions, needs attention.
Red — errors, destructive actions.
Grays for text, borders, backgrounds.
Good contrast (4.5:1 minimum for normal text) is essential for readability.
White text on dark background is easy to read.
Dark text on light background — the classic approach.
Light gray on medium gray is harder to read.
Dark text on medium purple fails accessibility standards.
Gradients blend two or more colors together. There are three main types, each creating a different visual effect. Try our Gradient Generator to build your own.
Colors flow in a straight line — left to right, top to bottom, or at any angle you choose. Think of paint rolling across a wall in one direction.
Left → Right
linear-gradient(to right, #5046E5, #F472B6)Top → Bottom
linear-gradient(to bottom, #2DD4BF, #5046E5)Diagonal (135°)
linear-gradient(135deg, #FB923C, #EC4899)3 Colors
linear-gradient(90deg, #10B981, #38BDF8, #5046E5)Colors radiate outward from a center point, like ripples in a pond. Great for spotlight effects and glowing backgrounds.
Circle
radial-gradient(circle, #5046E5, #1A1A3E)Ellipse
radial-gradient(ellipse, #F472B6, #5046E5)From Corner
radial-gradient(circle at top left, #FBBF24, #FB923C, #EC4899)3 Color Stops
radial-gradient(circle, #2DD4BF 0%, #5046E5 50%, #1A1A3E 100%)Colors sweep around a center point like the hands of a clock. Perfect for pie charts, color wheels, and creative backgrounds.
Simple Sweep
conic-gradient(#5046E5, #F472B6, #5046E5)Rainbow
conic-gradient(from 90deg, #FBBF24, #FB923C, #EC4899, #5046E5, #FBBF24)Pie Chart
conic-gradient(#2DD4BF 0% 33%, #5046E5 33% 66%, #F472B6 66% 100%)Rotated Start
conic-gradient(from 45deg, #1A1A3E, #5046E5, #F472B6, #FBBF24, #1A1A3E)AI Tip: "Add a radial gradient background to the hero section that glows from teal in the center to dark navy at the edges."
Accessibility means everyone can use your site, including people with vision impairments. The key rule: text must be easy to read against its background. This is measured as a contrast ratio. See our Accessibility guide for the full picture.
WCAG (Web Content Accessibility Guidelines) is the international standard. Here are the minimum ratios:
4.5 : 1 minimum
Body text, labels, captions — anything under 18px (or under 14px bold).
3 : 1 minimum
Headings and large text — 18px or larger (or 14px bold and larger).
Dark text on white
Easy to read for everyone.
Light text on yellow
Nearly invisible. Never do this.
Blue on dark navy
Bright colors can work on dark backgrounds.
Gray on light gray
Looks modern but unreadable.
Free tool: Use WebAIM Contrast Checker to test any two colors. Just paste your hex codes and it tells you if they pass.
Dark mode flips your site to light text on dark backgrounds. It reduces eye strain at night, saves battery on OLED screens, and many users simply prefer it. For the full implementation walkthrough, see our dark mode guide. But you can't just invert your colors — it takes a bit more thought.
Don't use pure black
Use a dark gray like #1A1A2E or #121212 instead of #000000. Pure black feels harsh and creates too much contrast with white text.
Reduce color saturation
Bright, saturated colors that look great on white can feel neon and glaring on dark backgrounds. Tone them down slightly.
Increase text opacity slightly
Instead of pure white (#FFFFFF) for body text, use a slightly muted white like #E5E7EB. It's gentler on the eyes.
Keep sufficient contrast
Dark mode still needs to meet the 4.5:1 contrast ratio. Test your dark mode colors just like you'd test light mode.
Here's what happened while you were away.
Here's what happened while you were away.
AI Tip: "Add dark mode support to my site. Use CSS variables for all colors so I can switch between light and dark themes. Use #1A1A2E as the dark background, not pure black."
Colors trigger emotions and associations. Choosing the right colors for your project isn't just about looks — it's about how your site makes people feel.
Red
Urgency, passion, energy
Sales, alerts, food apps
Blue
Trust, calm, reliability
Finance, healthcare, tech
Green
Growth, success, nature
Eco brands, finance, health
Purple
Creativity, luxury, wisdom
Beauty, education, premium
Orange
Energy, warmth, friendliness
Fitness, kids, CTAs
Yellow
Optimism, attention, joy
Warnings, highlights, playful
Pink
Playful, feminine, modern
Fashion, dating, lifestyle
Black
Elegant, serious, powerful
Luxury, portfolio, editorial
AI Tip: "I'm building a meditation app. Suggest a calming color palette that feels peaceful and trustworthy. Explain why each color works for this type of app."
Copy-paste these prompts into your AI tool to apply what you just learned.
CREATE A COLOR PALETTE
"Create a color palette for my [type of app] using a [mood/vibe] feel. Include primary, secondary, accent, background, and text colors as CSS variables. Give me both light and dark mode versions."
ADD A CONSISTENT COLOR SYSTEM
"Add a consistent color system to my app. Use [primary color] as the brand color and generate complementary colors for backgrounds, borders, text, and hover states. Define them as CSS variables so I can change them in one place."
FIX COLOR CONTRAST
"Review my color choices for accessibility. Make sure all text has at least 4.5:1 contrast against its background. Suggest fixes for any colors that fail, keeping the same general vibe."