Color Picker
Pick any color and get its HEX, RGB, and HSL values instantly. Click a value to copy it.
#3db8f5
rgb(41, 171, 226)
hsl(199, 74%, 52%)
Click any value to copy it
💡 Once you have your color values, convert between formats — HEX to RGB to HSL — with the RGB / HEX / HSL Converter. For building a full color palette from your chosen color, the Palette Generator creates harmonious color sets. For CSS gradients, Gradient Generator produces ready-to-use CSS code.
What This Tool Does
Picks colors from a visual color wheel or from an uploaded image, then shows the selected color in HEX, RGB, and HSL formats with a live preview — all in your browser.
Who This Is For
- Designers who need to extract a specific color from an image or brand reference
- Frontend developers who want to find and copy a color value quickly without opening design software
- Anyone matching colors between design files, CSS, and physical materials
- Content creators identifying colors in screenshots or photo references for social media graphics
Example: Input: Click anywhere on the color wheel, or upload an image and click a pixel → Output: HEX: #3B82F6 · RGB: rgb(59, 130, 246) · HSL: hsl(217, 91%, 60%) with a preview swatch
Color Format Reference: HEX, RGB, HSL Explained
The same color can be expressed in multiple formats. Once you have your values, the CSS Minifier removes unnecessary whitespace from stylesheets, and the Color Converter translates between HEX, RGB, HSL, and more depending on the context:
| Format | Example | Used In |
|---|---|---|
| HEX | #FF5733 | CSS, HTML, design tools — most common web format |
| RGB | rgb(255, 87, 51) | CSS, programmatic color manipulation |
| RGBA | rgba(255, 87, 51, 0.8) | CSS — RGB with opacity (alpha) channel |
| HSL | hsl(11, 100%, 60%) | CSS — intuitive for adjusting lightness and saturation |
| HSLA | hsla(11, 100%, 60%, 0.8) | CSS — HSL with opacity |
| OKLCH | oklch(67% 0.22 29) | Modern CSS — perceptually uniform color space |
Choosing Colors for Accessibility
Color contrast affects whether text and interface elements are readable by users with low vision or color blindness.
- WCAG AA standard — requires a contrast ratio of at least 4.5:1 for normal text (under 18pt) and 3:1 for large text (18pt+ or bold 14pt+).
- WCAG AAA standard — requires 7:1 for normal text, 4.5:1 for large text. Required for accessibility compliance in some contexts.
- Test contrast — use a contrast checker tool to verify your text color against its background color meets the required ratio.
- Don't rely on color alone — colorblind users cannot distinguish red from green at equal lightness. Always pair color with icons, labels, or patterns.
- Common safe combinations — black (#000000) on white (#FFFFFF) has a 21:1 ratio. Dark navy on white is another reliable high-contrast pairing.
- Avoid light gray text on white — a common design mistake. Light gray text often fails accessibility contrast requirements even when it looks fine on high-resolution displays.
Color Design Workflow
Color picking is the first step in a design workflow:
- Generate a full color palette from your selected base color
- Create a CSS gradient using the picked color as a gradient stop
- Convert to more color formats — HSB, OKLCH, and CSS variable syntax
Frequently Asked Questions
What color formats does the picker output?▼
HEX (#ff6b35), RGB (255, 107, 53), HSL (16°, 100%, 60%), and RGBA/HSLA with alpha channel. All four update simultaneously as you adjust the color.
What's the difference between RGB and HSL?▼
RGB defines color by its Red, Green, and Blue components — how much of each primary color. HSL defines color by Hue (the color angle, 0–360°), Saturation (color intensity), and Lightness (brightness). HSL is more intuitive for making colors lighter, darker, or more muted — change just the L or S value.
How do I find the exact HEX code for a color on my screen?▼
Use the eyedropper tool (if available in your browser) to sample any color from your screen. In Chrome and Edge, the eyedropper works on any page color, and the Palette Generator builds full color schemes from any starting color. For CSS format conversion between HEX, RGB, and HSL, use the Color Converter. For colors in other apps, take a screenshot, open it in an image viewer, and use its color picker.
Can I enter a specific HEX code to see its equivalents?▼
Yes — type or paste a HEX code directly into the HEX field. The RGB and HSL values update to match, and the color picker moves to the correct position.
What does the alpha/transparency slider do?▼
The alpha channel controls transparency: 1.0 (fully opaque) to 0.0 (fully transparent). The RGBA and HSLA formats include the alpha value. Use this for CSS colors with transparency, such as overlays and semi-transparent backgrounds.
How do I use this color in CSS?▼
Copy the format your CSS requires — HEX for most uses, RGB or HSL for dynamic manipulation with CSS variables. Example: background-color: #ff6b35; or background-color: hsl(16, 100%, 60%);
What is HSL?▼
HSL stands for Hue, Saturation, Lightness. It is an intuitive way to describe colors — adjusting lightness makes a color lighter or darker without changing the hue.
How It Works
1
Open the color pickerClick the color wheel or swatch area to open the visual color picker. Drag to select any color.
2
Fine-tune with slidersAdjust hue, saturation, and lightness individually using the HSL sliders for precise control.
3
Copy your color valuesHEX, RGB, and HSL values are shown and updated live. Click any value to copy it to clipboard.
When to Use This Tool
- →Picking an exact color from a visual palette for use in CSS or design tools
- →Finding the HEX code for a color you can see but don't know the value of
- →Generating color values for a brand guideline or design system
- →Checking what a color looks like across different formats before choosing one for a project
🔒 Privacy & Security
The color picker runs entirely in your browser's JavaScript engine. No data is uploaded. Color values are not sensitive, and the tool works offline after the page loads.
You Might Also Need
Related Tools
- Building a design tool or app? Pair color picking with a secure password generator. → generate a secure password for your project
- Generate a QR code to complement your color scheme — link to a landing page with your palette colors. → create a QR code with your brand colors
- Working on a global design project with budget in different currencies? Use the Currency Converter. → convert currencies for international design projects
- Scheduling design reviews with an international team? Use the Timezone Converter. → coordinate design reviews across time zones
- Designing for print as well as screen? Convert px dimensions to mm or inches with the Length Converter. → convert design dimensions between px and physical units
- Building a UI prototype? Generate realistic placeholder data to fill your design. → generate realistic placeholder data for UI mockups
- Designing address forms or maps? Generate realistic fake US addresses for your mockups. → generate fake addresses for UI testing