Click to generate
HEX --
RGB --
HSL --

Space bar for a new color

Color Palette Generator

How to Use

1
Generate a color. Click the color swatch, click Generate, or press Space. The HEX, RGB, and HSL values update instantly.
2
Copy any format. Click Copy next to HEX, RGB, or HSL to copy that specific format to your clipboard.
3
Generate a palette. Select a palette mode and click Generate to create 5 harmonious colors. The contrast checker shows WCAG accessibility ratings automatically.

Frequently Asked Questions

What is a HEX color code?

A HEX color code is a 6-character hexadecimal string representing RGB components. #FF5733 breaks down as FF=255 (red), 57=87 (green), 33=51 (blue). HEX codes are the standard format for web colors in CSS and most design tools.

How do I convert HEX to RGB?

Split the 6-character HEX code into three 2-character pairs and convert each from base 16 to base 10. This generator shows HEX, RGB, and HSL simultaneously, so no manual conversion is needed.

What are complementary colors?

Complementary colors are directly opposite each other on the color wheel. They create maximum contrast and visual energy. In HSL terms, complementary colors differ by 180 degrees in hue while keeping the same saturation and lightness.

What is a good color contrast ratio?

WCAG AA requires at least 4.5:1 for body text and 3:1 for large text (18pt+). WCAG AAA (enhanced) requires 7:1. Black on white gives 21:1, the maximum possible. Use this checker to verify your color choices meet accessibility standards before shipping.

How do I generate a color palette for design?

Complementary: two colors at 180 degrees - high contrast, bold. Analogous: colors adjacent on the wheel - harmonious, calm. Triadic: three evenly spaced colors - balanced, vibrant. Pastel: desaturated, light versions - soft, modern. Dark: deep, rich versions - dramatic, premium.