Color Picker
Pick a color and get values in multiple formats instantly.
Tips for Working with Colors
HEX vs RGB vs HSL
HEX is most common in web design (CSS, HTML). RGB is standard for digital screens. HSL is intuitive for adjusting hue, saturation, and lightness independently.
CMYK for Print
If your design will be printed, check the CMYK values. Screen colors (RGB) don't always match print output — CMYK gives you a closer preview of the printed result.
Accessibility & Contrast
Ensure text and background colors have enough contrast for readability. WCAG recommends a ratio of at least 4.5:1 for body text and 3:1 for large text.
Building a Palette
Use the HSL sliders to create harmonious color schemes. Keep the same hue and vary saturation and lightness, or shift the hue by 30° for analogous colors.
Common Use Cases
Pick brand colors, get CSS-ready HEX or RGB values, and ensure consistency across your designs.
Find the exact color from a reference, then convert to CMYK for print or RGB for screen.
Match company brand colors precisely for slides, reports, and marketing materials.
Create cohesive visual themes by picking and reusing exact colors across posts and stories.
Visualize wall paint or furniture colors before purchasing — compare HEX values with paint brand catalogs.
Understand how HEX, RGB, HSL, and CMYK relate to each other by experimenting with live conversions.
Frequently Asked Questions
What is the difference between HEX, RGB, and HSL?
HEX is a compact six-character code used in web development (e.g. #2563EB). RGB defines colors by their red, green, and blue components (0–255 each). HSL describes color by hue (0–360°), saturation (0–100%), and lightness (0–100%), making it easier to adjust colors intuitively.
When should I use CMYK instead of RGB?
Use CMYK for anything that will be printed — brochures, business cards, posters. RGB is for screens — websites, apps, videos. Colors can shift between the two, so always check the CMYK output before sending to print.
Can I type in a color code directly?
Yes. You can type or paste a HEX code in the HEX field, or enter specific RGB, HSL, or CMYK values. The picker and all other formats will update automatically.
What does the RGB (int) format mean?
RGB (int) is a single integer representation where the red, green, and blue values are packed into one number. It is used in some programming environments and color databases.
Is my data sent to a server?
No. All color calculations happen entirely in your browser. No data is transmitted to any server.
Can I save or download the color?
Yes. You can download the selected color as a PNG swatch image, or copy any color format (HEX, RGB, HSL, CMYK) to your clipboard with one click.