HEX Color Generator

Generate random HEX colors, RGB values, HSL values, color swatches, website colors, UI colors, and design color codes.

Generate HEX Colors

Tip: HEX colors use six characters after #. Example: #1D4ED8. Use them in CSS for backgrounds, borders, buttons, and text colors.
Generated HEX colors will appear here.

How the HEX color generator works

Choose a color mode:
Generate random, light, dark, pastel, bold, warm, cool, or grayscale colors.

Choose how many:
Create one color or a longer list of color codes.

Copy the output:
Copy HEX only, HEX with RGB, HEX with HSL, CSS variables, or a JavaScript array.

Use in your design:
Paste the color codes into CSS, design tools, apps, graphics, or website layouts.

Why use a HEX color generator?

A HEX color generator helps you quickly create colors for websites, apps, buttons, cards, backgrounds, borders, logos, and mockups.

It is useful for CSS projects, UI design, landing pages, brand ideas, blog graphics, mobile apps, static HTML pages, and color testing.

Popular HEX color generator uses

Frequently asked questions

What is a HEX color?

A HEX color is a six-character color code used in web design, usually written with a # symbol, such as #1D4ED8.

Can I copy the generated HEX colors?

Yes. After generating colors, click the copy button to copy the selected output format.

Can I generate pastel or dark colors?

Yes. Choose pastel, dark, light, bold, warm, cool, or grayscale from the color mode dropdown.

Are the colors guaranteed accessible?

No. The tool gives basic contrast notes, but you should check final color contrast before publishing.