Color Picker & Converter

Pick colors and convert between HEX, RGB, and HSL formats instantly.

HEX

RGB

HSL

Preview

Examples

CSS variables: copy HEX (e.g. #6c5ce7) into your design tokens.
Convert RGB → HEX: paste rgb(108, 92, 231) and copy the HEX output.
HSL tuning: use HSL when you want to adjust lightness without changing hue.

FAQ

HEX vs RGB vs HSL?
HEX is common in design/dev tools. RGB maps to screen colors. HSL is handy for tweaking lightness/saturation.

Why does the same color look different on other screens?
Displays vary (brightness, calibration, color profiles). Always check colors on the target device.

Is anything uploaded?
No. All conversions happen locally in your browser.

Tips for choosing accessible colors

Color choice affects readability. For UI text, prioritize contrast against the background and avoid relying on color alone to convey meaning.

Test your primary text color on both light and dark backgrounds.
Use HSL to adjust lightness while keeping the same hue.
For links and buttons, verify hover/active states remain readable.