Online Color Picker Tool
Pick colors from your screen or any webpage instantly. Real-time preview with multiple color format outputs and one-click copy.
About Color Picker
Our Free Online Color Picker is a powerful tool that allows you to select and capture colors directly from your screen or any webpage. Whether you're a designer looking for inspiration, a developer matching brand colors, or anyone who needs to extract color values from images and websites, this tool makes it effortless.
The color picker uses the modern Eyedropper API to let you pick any color visible on your screen. Simply click the eyedropper button, hover over any element, and click to capture the color. The tool instantly displays the selected color in multiple formats including HEX, RGB, RGBA, HSL, HSLA, CMYK, and LAB.
Additionally, you can click anywhere on the preview canvas below to sample colors from our interactive color palette. This is perfect for exploring color combinations, testing shades, and building custom color palettes for your projects.
Color Picker Tool
Pick a Color
Click to pick color from your screen
Picked Color
#FFFFFF
Quick Presets
Color History
Picked colors will appear here
Accessibility
Contrast vs White
Contrast vs Black
Click Canvas to Pick Color
Click anywhere on the canvasColor Values
#FFFFFF rgb(255, 255, 255) rgba(255, 255, 255, 1) hsl(0, 0%, 100%) hsla(0, 0%, 100%, 1) cmyk(0%, 0%, 0%, 0%) lab(100.0, 0.0, 0.0) CSS Usage Examples
Background Color
background-color: #FFFFFF; Text Color
color: #FFFFFF; Border
border: 2px solid #FFFFFF; Box Shadow
box-shadow: 0 4px 14px 0 rgba(0, 0, 0, 0.25); Tailwind CSS
bg-[#FFFFFF] text-[#FFFFFF] Export Palette
Click a color to start building your palette...
How to Use
Use the Eyedropper
Click the "Open Eyedropper" button to activate the screen color picker. A cursor will appear - move it over any visible color on your screen and click to capture. This works on any application or webpage visible in your browser window.
Click the Color Canvas
Alternatively, click anywhere on the colorful gradient canvas below the eyedropper button. The canvas displays a rich spectrum of colors - click any point to sample that exact color and see its values in all formats.
Select Quick Presets
Use the 10 preset color swatches for quick access to commonly used colors including red, orange, yellow, green, blue, purple, pink, and gray. Perfect for quickly testing or starting your color exploration.
Copy and Export
Copy individual color values with one click, or use "Copy All" to get all formats at once. Build a color palette by picking multiple colors, then export as CSS variables, SCSS variables, Tailwind config, or JSON format.
Key Features
Screen Eyedropper
Pick any color visible on your screen using the native Eyedropper API
Interactive Canvas
Click a color gradient canvas to sample millions of colors instantly
7 Color Formats
Instant conversion to HEX, RGB, RGBA, HSL, HSLA, CMYK, and LAB
Color History
Automatically saves your recently picked colors for easy reference
Accessibility Check
WCAG contrast ratio calculations against white and black backgrounds
Multiple Export Formats
Export your palette as CSS, SCSS, Tailwind config, or JSON
One-Click Copy
Copy individual values or all formats with a single click
CSS Code Snippets
Ready-to-use CSS code including standard CSS and Tailwind CSS
Frequently Asked Questions
How does the eyedropper tool work?
The eyedropper uses the modern Eyedropper API built into Chrome, Edge, and other Chromium-based browsers. When you click the button, a special cursor appears that lets you sample any pixel color visible in your browser window. Click anywhere to capture that exact color value. Note: This feature requires a secure context (HTTPS) and is currently supported in Chromium-based browsers.
Can I pick colors from any website?
The eyedropper can pick colors from any content visible within your browser window, including webpages, images, videos, and browser UI elements. However, due to security restrictions, it cannot sample colors from content in other applications or browser windows. For the color canvas, you can sample from the built-in gradient palette displayed on this page.
Why doesn't the eyedropper work in my browser?
The Eyedropper API is currently supported in Chrome 95+, Edge 95+, and other Chromium-based browsers. It is not yet available in Firefox or Safari. If your browser doesn't support it, you can still use the color canvas by clicking anywhere on it, or use the preset colors. We recommend using Chrome or Edge for the full eyedropper experience.
What is the difference between HEX, RGB, and HSL?
All three represent the same color information in different formats. HEX uses hexadecimal notation (#RRGGBB) and is the most common in web design. RGB uses decimal values (0-255) for red, green, and blue channels. HSL uses Hue (color type), Saturation (intensity), and Lightness (brightness) which is more intuitive for humans. Our converter shows all formats so you can use whichever you prefer.
What is CMYK and when should I use it?
CMYK stands for Cyan, Magenta, Yellow, and Key (black). It's the color model used in color printing. Use CMYK when designing materials that will be printed - business cards, brochures, packaging, or posters. Converting from screen colors (RGB/HEX) to CMYK helps you preview how colors will appear in print, though some vibrant screen colors cannot be exactly reproduced with ink.
How does the accessibility checker work?
The accessibility checker calculates the relative luminance of your selected color and compares it against white (#FFFFFF) and black (#000000) backgrounds using the WCAG 2.0 contrast ratio formula. Results are classified as AAA (7:1+ ratio), AA (4.5:1+), AA Large (3:1+), or Fail. These ratings help you ensure sufficient color contrast for readable text and accessible design.
Can I save my color palette?
Yes! Your recently picked colors are automatically saved to the Color History section. You can also build a custom palette by picking multiple colors and then export it in several formats: CSS custom properties (variables), SCSS variables, Tailwind CSS configuration, or JSON. Simply click the corresponding export button to generate code you can copy into your project.
Related Color Tools
Color Converter
Convert between HEX, RGB, HSL, CMYK, LAB formats
Random Color Generator
Generate random HEX, pastel, macaron & morandi colors
Color Code Lookup
Standard colors, web safe & HTML named colors
Color Scheme Generator
Complementary, analogous, triadic & tetradic schemes
Color Pairing Tool
2-5 color palette builder with live preview
Trending Color Palettes
Morandi, Macaron, Premium Gray & more
Brand Color Generator
Complete VI color system from primary color
Color Shade Generator
Lighter and darker shade variations
Color Adjuster
HSL sliders for fine-tuning colors
Color Similarity Comparator
Compare two colors with Delta E calculation
Colorblind Friendly Checker
Test colors for color vision deficiency
Image Color Extractor
Extract dominant colors from images
Image Color Editor
Apply filters and color adjustments
Image Gradient Generator
Generate gradients from image colors
Color Card Generator
Professional color swatch cards
Web Safe Colors
Complete 216 web-safe color reference
Flat & Gradient Colors
Curated UI palettes and gradients
Text Color Accessibility
WCAG contrast ratio checker
Color Name Finder
Find the name of any color
Birthday Color Generator
Lucky colors based on birth date
Industry Color Recommender
Industry-specific color palettes