Free Color Picker: HEX, RGB, HSB & HSL Codes
Pick any color and get its HEX, RGB, HSB (HSV), HSL, and CMYK codes instantly. Edit any value and the rest update, check contrast ratios, build a shade palette, and copy any format in one click. No signup, 100% browser-based.
Type a HEX code (with or without #) or click the swatch to pick
HSB is the same color model as HSV.
5.69:1
vs White
3.68:1
vs Black
3 Simple Steps
Pick or Enter a Color
Click the swatch to open the native picker, type a HEX code, or drag the RGB, HSB, or HSL sliders. In Chrome and Edge you can also pick any color from your screen.
View All Formats
Instantly see your color in HEX, RGB, HSL, HSB (HSV), and CMYK, plus contrast ratios and a full shade palette. Edit any value and the rest update.
Copy & Use
Click the Copy button next to any format and paste it straight into Figma, CSS, Tailwind, or any design tool.
Why Use Our Color Picker?
5 Formats at Once
Convert to HEX, RGB, HSL, HSB, and CMYK simultaneously. Edit any of them and the others follow. No need to visit multiple tools.
WCAG Contrast Check
Instantly see accessibility contrast ratios against white and black backgrounds with WCAG pass/fail.
Full Shade Palette
Get a complete 10-step, Tailwind-style shade palette from any color, ready for your design system.
HEX to RGB: What Does It Mean?
HEX (hexadecimal) and RGB (Red, Green, Blue) are two ways to express the same color digitally. HEX codes like #7C3AED are common in CSS and HTML. RGB values like rgb(124, 58, 237) are used in CSS, design tools, and image processing. When designing structured documents or digital layouts, pairing solid colors with clear web text formatted using a Lorem Ipsum Generator or checking layout character limits with our Word Counter improves UI precision.
Our tool goes further. It also converts to HSL (used in modern CSS), HSB, also called HSV (the model behind the color pickers in Photoshop and Figma), and CMYK (used in print design). If you are preparing JSON data schemes or encoding color palettes into configuration strings, you can also process data formatted via our JSON Formatter or encode output using the Base64 Encoder.
HEX vs RGB vs HSB vs HSL: Which One Should You Use?
Common Use Cases
Who Should Use This?
Features
Frequently Asked Questions
What is a HEX color code?
A HEX color code is a 6-digit hexadecimal value prefixed with # that represents a color in the RGB color model. Each pair of digits represents the intensity of the Red, Green, and Blue channels. If you need to standardize casing in CSS or code configs, try our Case Converter.
How do I find the HEX code of a color?
Pick the color with the swatch, the sliders, or the Pick from screen button (Chrome and Edge). The HEX code appears in the HEX field and in the first row of All Color Formats, ready to copy.
How do I convert HEX to RGB?
Split the 6-digit HEX into three pairs, then convert each pair from base-16 to base-10. For example, #FF8800 becomes R=255, G=136, B=0. Our tool does this instantly without requiring manual code formatting or data parsing.
What is HSB (HSV), and how is it different from HSL?
HSB (Hue, Saturation, Brightness) is the same model as HSV (Hue, Saturation, Value), and it is the model behind the color pickers in Photoshop and Figma. HSL (Hue, Saturation, Lightness) is the model CSS supports through the hsl() function. In HSB, 100% brightness gives the purest version of a hue; in HSL, 50% lightness does, and 100% lightness is white. HSL is widely used in CSS alongside mock copy from our Lorem Ipsum Generator.
What is CMYK and when is it used?
CMYK (Cyan, Magenta, Yellow, Key/Black) is the color model used in color printing. Unlike RGB which adds light, CMYK subtracts light on a white medium. Use CMYK values when preparing physical media layouts. The CMYK shown here is a simple conversion from RGB, so a print shop may adjust it using a color profile.
What is contrast ratio and why does it matter?
Contrast ratio measures how distinguishable text is against its background. WCAG guidelines require at least 4.5:1 for normal text and 3:1 for large text. You can measure word density and text sizing using our Word Counter.
Can I pick a color from my screen?
Yes, in browsers that support the EyeDropper API, mainly Chrome and Edge. A Pick from screen button appears next to the HEX field. Click it, then click any pixel on your screen. In other browsers, use the swatch, the HEX field, or the sliders.
Can I use the color picker on mobile?
Yes. The tool is fully responsive and works on mobile devices. Tap the color swatch to open your native device color picker, or paste string values clean using our Case Converter.
What are color shades and tints?
Shades are darker variations of a color (mixed with black) and tints are lighter variations (mixed with white). The palette uses Tailwind-style names (50 to 900) and is calculated from the color you picked, so it will not match the official Tailwind palette exactly.
Is my color data stored anywhere?
No. Everything runs 100% in your browser, and no color data is sent to any server. If you work with web configuration files, you can also format your payloads securely using our browser-based JSON Formatter or encode assets via Base64 Encoder.
You may also find these free tools helpful
Ready to convert your colors?
Takes 2 seconds. No signup. No ads.