Color Tools Guide: Color Codes, Palettes, and Design

Color codes

HEX: #RRGGBB format. Most common in web design. E.g., #FF5733 (red-orange). 6-digit hex code, 16 million colors.

RGB: rgb(r,g,b) format. r,g,b values 0-255. E.g., rgb(255,87,51). Screens use RGB.

HSL: hsl(h,s,l) format. h (hue) 0-360°, s (saturation) 0-100%, l (lightness) 0-100%. E.g., hsl(14,100%,60%).

Conversion: HEX ↔ RGB ↔ HSL. Utilgo color converter converts instantly.

Creating color palettes

Monochromatic: Single hue, different lightness/saturation. Harmonious and clean.

Analogous: Adjacent colors on the color wheel (e.g., blue, blue-green, green). Natural and harmonious.

Complementary: Opposite colors on the color wheel (e.g., blue + orange). High contrast, eye-catching.

Triadic: 3 colors 120° apart on the color wheel. Vibrant and balanced.

Color contrast and accessibility

WCAG contrast ratios: At least 4.5:1 for normal text, 3:1 for large text.

High contrast: Dark text on light background. Critical for readability.

Color blindness: Red-green color blindness is most common. Do not use color alone to convey information.

Test tools: WebAIM Contrast Checker, Chrome DevTools Lighthouse.

Color selection tips

1. Start with brand colors. Base on logo and brand identity colors.

2. 60-30-10 rule: 60% dominant, 30% secondary, 10% accent.

3. Use a limited palette. 3-5 colors are sufficient.

4. Consider dark/light mode. Choose colors that look good in both.

5. Test. Check colors on different devices and screens.

Utilgo color tools

Utilgo offers color palette generator, color converter (HEX↔RGB↔HSL), and palette extractor (extract color palette from image) tools.