Press Ctrl+D (Windows) or Cmd+D (Mac) to bookmark this page.
🎨 HEX + RGB
Color Picker / HEX-RGB Converter
Pick a color, copy the HEX code, or convert RGB values back and forth instantly.
HEX #7C3AED
Tips
HEX is ideal for CSS and design tools.
RGB is useful for overlays, canvas and image editing.
Try the picker first, then copy the value into your design file.
When to use HEX vs RGB
HEX is the easiest format to paste into CSS, design systems, and brand style guides. It is short, clean, and the format most developers expect when they are working on web colors.
RGB is useful when you need to reason about channels separately, such as in overlays, canvas work, or image editing. If you are tuning opacity, gradients, or visual effects, RGB is often the more practical format.
How to pick a usable color
Start with the base brand color or a screenshot sample
Check the color on both light and dark backgrounds
Compare the value against your button, text, or card surface
Copy the result into your CSS or design file and test the contrast
A color that looks good in the picker can still fail in the layout. Always test the color where it will actually be used, especially for text and button states.
Practical workflow
Open the picker and choose the starting color.
Adjust the HEX or RGB fields until the shade feels right.
Copy the format that fits your workflow.
Paste it into CSS, a design file, or a product mockup.
Review the contrast against the background and text.
If the color is for a page element, test it at the exact size and font weight you plan to ship. Small text needs more contrast than a large decorative heading.
FAQ
Why does the same color look different on screen? Display brightness, surrounding colors, and contrast all change perception.
Should I store colors in HEX or RGB? Use the format that matches your codebase, but HEX is usually the default for web styles.
Can I use this for brand matching? Yes, especially if you need a quick match from an existing screenshot or visual asset.