Color Hex Generator
Generate random hex colors with instant RGB and HSL conversions. Create color palettes for your projects. Perfect for web designers and developers.
HEX
RGB
HSL
Name
Blue
Color Formats Explained
Hex, RGB, and HSL are three ways to represent colors in digital design. Hex codes use 6 characters (#RRGGBB). RGB mixes red, green, and blue light values (0-255). HSL describes color as hue, saturation, and lightness — often more intuitive for designers.
Frequently Asked Questions
What is a hex color?▾
Hex color is a 6-digit code representing RGB values. Format: #RRGGBB. Each pair (00-FF) is the decimal value for Red, Green, Blue. Example: #FF5733 = Red(255) Green(87) Blue(51). Used in HTML, CSS, and design software.
How do I convert RGB to hex?▾
Convert each RGB value (0-255) to hexadecimal (00-FF). Example: RGB(255, 87, 51) → R=FF, G=57, B=33 → #FF5733. This calculator shows instant conversions for any color you pick or generate.
What is HSL color format?▾
HSL stands for Hue, Saturation, Lightness. Hue (0-360°) is the color on the color wheel. Saturation (0-100%) is color intensity. Lightness (0-100%) is brightness. HSL is more intuitive for designers than RGB.
How do I create a color palette?▾
Generate a base color, then click "Generate Palette" to create variations at different lightness levels. This creates harmonious shades of the same hue. Alternatively, pick colors that share saturation/lightness for complementary schemes.
What are common color codes?▾
Popular hex colors: Black #000000, White #FFFFFF, Red #FF0000, Blue #0000FF, Green #008000, Yellow #FFFF00, Purple #800080, Orange #FFA500. Copy any hex code from this calculator for use in your projects.
How do I match colors?▾
Use color theory: complementary (opposite on wheel), analogous (adjacent), triadic (3 equally spaced). Or keep same hue with varying lightness (monochromatic). This tool generates monochromatic palettes automatically.
Can I use these colors in CSS?▾
Yes! All formats work in CSS: hex (#FF5733), rgb(rgb(255, 87, 51)), hsl(hsl(9, 100%, 60%)). Click any value to copy. Tailwind supports custom colors in config or arbitrary values like bg-[#FF5733].