Color Picker

When to use Color Picker

The designer gave you a HEX code for the brand primary, your Tailwind config wants HSL, and the React Native stylesheet needs an RGB tuple — three formats for the same color and you're translating between them by hand. Enter any color value here and get HEX, RGB, and HSL simultaneously in one panel, each with a copy button. A session history of recent picks stays visible so you can compare two swatches without writing anything down or tabbing between a hex wheel and an RGB calculator. Runs on your device using standard browser color APIs, so there's no server request and no login needed. Useful for implementing a design system, debugging a CSS variable that looks wrong on screen, or building a quick style guide.

• Translate a brand HEX code to HSL for a Tailwind config file
• Compare two swatches side by side while building a design system
• Convert a Figma color to an RGB tuple for a React Native stylesheet

About this tool

Color values are format-specific nightmares. A designer gives you a HEX code, the CSS file expects HSL, and the Android resource file wants RGB. Pick or enter any color here and get all three formats at once — copy the one you need with a single click. The tool keeps a session history of recently picked colors so you can compare swatches without writing anything down. Everything runs in your browser with no server involved, and there's a session history of recent picks for quick reference. No install, no account.