What is the difference between RGB and HEX colour codes?

Both represent the same colours differently. RGB uses three decimal numbers (0–255) for Red, Green, Blue — e.g., rgb(255, 87, 51). HEX converts those same numbers to hexadecimal — e.g., #FF5733. They are interchangeable in web design.

What is HSL colour format?

HSL stands for Hue, Saturation, Lightness. It is an alternative way to represent colours that is more intuitive for humans — you adjust the hue (0–360°), saturation (0–100%), and lightness (0–100%) independently.

Back to Tools

Free Color Picker - Generate HEX, RGB, HSL Codes Online

Pick any colour and get its HEX, RGB, HSL codes. Build colour palettes and check contrast ratios. Free tool for designers and developers.

🎨 Advanced Color Picker

Extract colors, generate palettes, and explore color harmonies

🎨

Drop an image or click Upload

Supports JPG, PNG, GIF, WebP formats

• Extract dominant colors• Generate color harmonies• Export palettes

🎨 Advanced Color Picker•Extract • Analyze • Export

Formats: HEX, RGB, HSL•Color Harmony Generator

What is a Color Picker?

A colour picker is a tool that lets you select any colour visually — by clicking on a colour wheel, gradient, or entering a known colour code — and instantly get its equivalent codes in all standard formats: HEX (used in HTML/CSS), RGB (used in CSS and image editing), HSL (hue-saturation-lightness, used in modern CSS), and CMYK (used in print design). ToolsWallet's colour picker also generates complementary colour palettes and checks WCAG contrast ratios for accessibility.

Colour Formats Explained

HEX (#FF5733)

Six-digit hexadecimal code. Most widely used in web design, HTML, and CSS. Example: #1a73e8 (Google Blue).

RGB (255, 87, 51)

Three values 0–255 for Red, Green, Blue. Used in CSS, image editing software like Photoshop, Canva.

HSL (hsl(9°, 100%, 60%))

Hue (0–360°), Saturation (0–100%), Lightness (0–100%). Easier to adjust programmatically in CSS.

CMYK (0, 34, 60, 0)

Cyan, Magenta, Yellow, Key (Black) percentages. Used in print design, printing presses.

Why Use a Color Picker?

Web & App Designers

• Find exact HEX codes for brand colours
• Generate a consistent colour palette for UI design
• Check colour contrast ratios for WCAG accessibility
• Convert colours between formats for CSS/Tailwind

Graphic Designers & Developers

• Match digital colours to physical brand guidelines
• Convert RGB to CMYK for print material preparation
• Create colour harmonies (complementary, triadic, analogous)
• Pick colours from uploaded brand images

Frequently Asked Questions

What is a HEX colour code?

A HEX colour code is a 6-character code that represents a colour by combining values for red, green, and blue in hexadecimal (base-16) format. For example, #FF0000 is pure red, #0000FF is pure blue, and #FFFFFF is white.

What is the difference between RGB and CMYK?

RGB (Red, Green, Blue) is an additive colour model used for screens and digital displays. CMYK (Cyan, Magenta, Yellow, Black) is a subtractive colour model used for print. Digital designs should use RGB; print designs should use CMYK values.

What is WCAG colour contrast?

WCAG (Web Content Accessibility Guidelines) defines minimum contrast ratios between text and background colours for readability. Normal text requires a contrast ratio of at least 4.5:1 (AA standard). Our tool checks this automatically.

How do I get the colour code from an image or website?

Use your browser's developer tools (F12) to inspect any element and see its colour codes in CSS. For images, you can upload them to our tool and use the eyedropper to pick colours directly from the image.

What is the difference between HSL and HSV/HSB?

HSL (Lightness) and HSV/HSB (Value/Brightness) both use Hue and Saturation but handle the third dimension differently. HSL uses 50% lightness as the "pure colour" point. HSV uses 100% value for pure colour. Some software (Photoshop, Canva) uses HSV; CSS uses HSL.