By DevToolKit
How to Choose Website Colors
Build a readable palette with Color Converter — translate HEX, RGB, and HSL, check foreground and background contrast, and review the displayed ratio and AA labels.
Start with one brand hue
Pick a primary color for links, primary buttons, and focus rings. Add one accent sparingly — too many saturated hues compete for attention on small business sites.
Neutrals carry the layout
Backgrounds, cards, and borders usually live in white, off-white, or gray scales. Neutrals let photography and icons breathe.
Use the built-in contrast checker
Color Converter includes a foreground and background contrast checker. It displays a contrast ratio plus pass/fail labels for AA normal text and AA large text.
Use it as a quick pair check: the labels use 4.5:1 for normal text and 3:1 for large text. It does not replace a complete accessibility audit, AAA testing, or accessibility certification.
Never place small type directly on busy photos without a solid overlay.
Use Color Converter (In-browser)
Design files use HEX while CSS may need HSL for theme variables. Color Converter translates formats without guesswork when handoff between Figma and code.
Palette checklist
Primary and accent chosen; neutrals defined; body text readable on all backgrounds; button labels readable on button fills; colors documented in HEX and HSL for developers.