50 Beautiful HTML Color Palettes for Web Design Inspiration

Mastering HTML Colors: A Beginner’s Guide to Color Codes and Usage

What this guide covers

• Color models: Hex, RGB(A), HSL(A), and color names
• How to use colors in HTML/CSS: inline styles, internal stylesheets, external CSS files
• Converting between formats: examples and simple formulas
• Accessibility basics: contrast, WCAG levels, and quick checks
• Practical tips: palettes, variables, and tools

Color models (brief)

• Hex: six-digit hexadecimal, e.g., #1a73e8 (RRGGBB). Short form: #fff = #ffffff.
• RGB(A): rgb(26,115,232) or rgba(26,115,232,0.8) — values 0–255, alpha 0–1.
• HSL(A): hsl(216, 85%, 51%) or hsla(216,85%,51%,0.8) — hue (0–360°), saturation and lightness as percentages, alpha 0–1.
• Named colors: CSS supports standard names like red, rebeccapurple, transparent.

How to use in HTML/CSS

• Inline:
  Text

• Internal:

html
Copy CodeCopied
<style>
.btn { background: #1a73e8; color: #fff; }
</style>

• External CSS: keep styles in .css files and link with .

Converting basics

• Hex → RGB: split #RRGGBB into pairs and convert hex to decimal.
• RGB → Hex: convert each 0–255 value to two-digit hex and concatenate.
• RGB ↔ HSL: use standard formulas (in code or tools); HSL is often easier for creating tints/shades.

Accessibility (quick rules)

• Ensure text/background contrast meets WCAG:
  • AA: contrast ratio ≥ 4.5:1 for normal text, ≥ 3:1 for large text.
  • AAA: contrast ratio ≥ 7:1 for normal text.
• Use tools (contrast checkers) and prefer high-contrast palettes for readability.

Practical tips

• Use CSS variables for consistent palettes:

css
Copy CodeCopied
:root {
  –brand: #1a73e8;
  –bg: #ffffff;
}
.btn { background: var(–brand); color: var(–bg); }

• Create tints/shades by adjusting HSL lightness.
• Keep a limited palette (primary, secondary, accent, neutrals).
• Save palettes in tools like Figma, Coolors, or Adobe Color.

Quick starter examples

• Primary button: background: #1a73e8; color: #fff;
• Muted text: color: #6b7280; (use contrast-checked values)
• Hover state: filter: brightness(0.9); or adjust HSL lightness.