Color Picker
Pick a color and instantly get its HEX, RGB, and HSL values. Preview the color, copy any format, and adjust values directly in your browser.
Accepts #7C3AED, 7C3AED, #fff, or fff.
Each value between 0 and 255.
Hue 0–360, saturation and lightness 0–100.
Color formats
Text preview
Recent colors
All color calculations happen locally in your browser. No color data is uploaded to ToolLora servers.
About this color picker
This tool lets you pick, preview, and convert colors entirely in your browser. Choose a color with the picker, or type a HEX, RGB, or HSL value directly, and every format updates instantly — no upload, no account, no signup.
How to use the color picker
Click the color swatch to open your browser's native color picker, or type values directly into the HEX, RGB, or HSL fields. Any valid change to one format instantly updates the preview and the other two formats, so you can work in whichever one you're most comfortable with.
What is a HEX color?
HEX (hexadecimal) is a six-digit code like #7C3AED that represents a color's red, green, and blue components as pairs of hexadecimal digits. It's the most common way to specify colors in CSS, design tools, and image editors because it's short and easy to copy and paste.
What is RGB?
RGB describes a color as three numbers — red, green, and blue — each ranging from 0 to 255, such as rgb(124, 58, 237). It maps closely to how screens actually display color by mixing light from red, green, and blue sub-pixels.
What is HSL?
HSL describes a color by hue (its position on a 0–360° color wheel), saturation (how intense or muted it is, 0–100%), and lightness (how close to black or white it is, 0–100%). HSL is often easier to reason about when adjusting a color, since you can change lightness or saturation without affecting the hue.
HEX vs RGB vs HSL
These are three ways of describing the exact same color, not different colors. HEX is compact and easy to copy, RGB maps directly to how displays mix light, and HSL is often the most intuitive for making a color lighter, darker, or more muted. Use whichever format your project or design tool expects.
How to choose readable text colors
When placing text over a colored background, the goal is enough contrast that the text stays easy to read. This tool compares your selected color against both black and white text and suggests whichever gives better contrast, so you can quickly judge whether a color works well as a background for text.
How color conversion works
HEX and RGB describe exactly the same red, green, and blue values in different notations, so converting between them is a direct calculation. Converting to and from HSL involves standard formulas that find a color's hue, saturation, and lightness from its red, green, and blue components, or the reverse. All of this happens instantly and locally in your browser as you type.
Frequently asked questions
What is a color picker?
A color picker is a tool for choosing a color and getting its value in formats used by designers and developers, such as HEX, RGB, and HSL. This one runs entirely in your browser.
How do I find a HEX color code?
Click the color swatch to open your browser's picker and choose a color, or type a known HEX code into the HEX field. The HEX value updates instantly at the top of the tool.
Can I convert HEX to RGB?
Yes. Type or paste a HEX value into the HEX field and the equivalent RGB values appear immediately in the RGB fields and the RGB result row.
Can I convert RGB to HSL?
Yes. Enter red, green, and blue values in the RGB fields and the matching hue, saturation, and lightness values appear in the HSL fields and result row.
What is the difference between HEX and RGB?
They describe the exact same color using different notation — HEX as a six-digit code, RGB as three 0–255 numbers. Converting between them doesn't change the color at all.
What is HSL?
HSL stands for hue, saturation, and lightness — a way of describing color that's often more intuitive for adjustments, since you can change how light or muted a color is without changing its hue.
How do I copy a color value?
Click the small copy icon next to any format (HEX, RGB, HSL, or CSS variable) to copy just that value, or use "Copy All" to copy every format at once as plain text.
Does ToolLora upload my selected colors?
No. Every calculation happens locally in your browser. Nothing is sent to ToolLora's servers, and colors are not saved beyond your current page session.
Is this color picker free?
Yes — completely free, with no account and no limits on how often you use it.
How is color contrast calculated?
Using the WCAG relative luminance formula for each color, then comparing the lighter and darker luminance to produce a contrast ratio. The "best text color" suggestion picks whichever of black or white gives the higher ratio against your selected color.