Choosing Colors for the Web: HEX, RGB, and Contrast Basics

Every color on every screen you look at is, underneath, a code. #1E88FF, rgb(30, 136, 255) — these are two spellings of the same blue. If you touch anything web-adjacent — a blog theme, a presentation, a small business site — knowing how these codes work (and one crucial rule about contrast) will save you from both confusion and accidentally unreadable designs.

HEX and RGB, decoded

Screens mix every color from red, green, and blue light. RGB notation says the amounts directly: rgb(30, 136, 255) means a little red, a medium amount of green, maximum-ish blue — a bright azure. Each value runs 0–255.

HEX notation encodes the same three numbers in base-16: #1E88FF is 1E (30) red, 88 (136) green, FF (255) blue. That is the entire mystery of hex codes — three two-digit numbers wearing a compact costume. #000000 is black (no light), #FFFFFF is white (all light), and #FF0000 is pure red.

You never need to convert in your head: the Color Converter translates between HEX, RGB, and HSL instantly. HSL is the third notation worth knowing — hue, saturation, lightness — because it matches how humans think about color ("same blue, but lighter" is just a higher L).

Building a palette that hangs together

Random nice colors rarely look nice together. Coherent palettes share undertones and follow rough proportions. The classic starter recipe:

• One dominant color (~60% of the design) — usually something calm.
• One secondary color (~30%) — supports the dominant.
• One accent (~10%) — the attention-grabber for buttons and highlights.

The Palette Generator produces harmonious sets to start from — far better odds than picking three favorites and hoping. Steal proportions from sites you admire; the 60/30/10 skeleton is hiding in most of them.

Contrast: the rule that is not optional

Here is the part that separates decorative color choices from functional ones: text must contrast strongly with its background. Light gray text on white looks "clean" in a mockup and unreadable on a sunlit phone screen — and genuinely inaccessible to millions of people with low vision.

The web has a formal standard (WCAG): normal-size text should have a contrast ratio of at least 4.5:1 against its background; large headlines get by at 3:1. These are not aesthetic opinions — they are the difference between text everyone can read and text that excludes people.

The Contrast Checker takes any two colors and gives the ratio plus a pass/fail. Two seconds per combination. Check every text/background pair in a design — including the "subtle" footer text and the text on colored buttons, which are precisely where failures hide.

Practical color workflow

1. Start with one brand color you like.
2. Generate a palette around it with the Palette Generator.
3. Convert to whatever notation your tool needs with the Color Converter.
4. Run all text pairs through the Contrast Checker — fix anything under 4.5:1, usually by darkening the text or lightening the background.

The takeaway

Color codes are just RGB amounts in different costumes; palettes are proportion recipes; and contrast is the one hard rule in an otherwise taste-driven field. Learn to read the codes, borrow harmonies from a generator, and check contrast before anything ships. That modest toolkit puts you ahead of a remarkable share of the internet — including plenty of professional sites still shipping gray-on-gray.

Quick answers

What is the alpha in codes like #1E88FF80? An optional fourth pair controlling transparency — 80 means about 50% opaque. Handy for overlays; ignore it until you need see-through colors.

Why does my color look different on another monitor? Screens vary in calibration and color range. Codes are exact; displays are not. Check important colors on two or three devices before finalizing a brand palette.

Dark mode: do I just invert my colors? Never literally — pure inversions produce garish results. Keep hues, reduce saturation slightly, and re-check every contrast pair against the dark backgrounds; ratios that passed on white often fail on near-black.