What the results show

HEX — the six-digit hexadecimal code (e.g. #4F46E5) used in CSS, design tools, and most style guides. Two digits each for red, green, and blue.
RGB — the same color as three 0–255 channels, e.g. rgb(79, 70, 229). Handy for CSS, canvas, and code that works in decimal.
HSL — hue, saturation, and lightness, e.g. hsl(245, 76%, 59%). The most intuitive model for tweaking a color: spin the hue, or nudge lightness for a tint or shade.

How it works

Pick a color from the swatch or type any 3- or 6-digit hex code. A 3-digit shorthand such as #abc is expanded to its full form (#aabbcc) before conversion. The hex is split into its red, green, and blue bytes to get the RGB values.

The HSL values come from normalizing each channel to 0–1, then deriving lightness from the midpoint of the brightest and darkest channel, saturation from their spread, and hue from which channel leads. The label shown on the preview swatch flips between black and white automatically using the WCAG relative-luminance formula, so it stays readable on any background.

Frequently asked questions

Is anything I pick uploaded or saved?

No. The color picker runs entirely in your browser. Every conversion happens on your device — nothing is uploaded, logged, or stored, and reloading the page clears it.

What's the difference between HEX, RGB, and HSL?

They describe the same color three ways. HEX and RGB both encode red, green, and blue — HEX in hexadecimal, RGB in decimal. HSL instead uses hue, saturation, and lightness, which makes it easier to create tints, shades, and matching palettes.

Can I type a short hex like #abc?

Yes. Three-digit shorthand is accepted and expanded automatically — #abc becomes #aabbcc. The leading # is optional, and case doesn't matter.

How do I copy a value?

Use the Copy button next to any of the HEX, RGB, or HSL rows. It writes the exact string to your clipboard so you can paste it straight into CSS or a design tool.

Why does it show a dash or a message instead of colors?

The readouts only appear once the hex code is valid. If you see the placeholder message, the input isn't a valid 3- or 6-digit hex color — finish typing (for example #4f46e5) and the values appear instantly.

Are the values suitable for CSS?

Yes. HEX, rgb(…), and hsl(…) are all valid CSS color syntaxes and can be pasted directly into stylesheets or inline styles.