All Tools
Image Converter
Base64 to Image
Check Image Dimension
Color Picker from Image
Dummy Images Generator
Image to Base64
Image to Text
Password Generator
PDF to Text
QR Code Scanner
YouTube Thumbnail Downloader
Mic Tester
Keyboard Tester
Mouse Tester
Webcam Tester
Case Converter
Photo Name And Date Joiner
Crop Image
PDF to Image
Image Resizer
Image Compress
Check File Type
my space
My Tasks

view, download and share
profile image
profile image
welcome back !

Guest User

go premium

ad-free experience

upgrade
quick access
Menu

Pick Colors from Any Image

Upload an image and instantly pick colors, get HEX, RGB, HSL values, and copy your favorite colors in one click.

Selected Color
Current Color
#6366F1
rgb(99, 102, 241)

Color Canvas
Color Formats
Shades & Tints
Gradient Generator
Upload Image

Drop image here or browse

Supports JPG, PNG, WEBP, GIF, BMP • Max 20 MB MB

Click to Pick Color
Hover over the image to preview, click to pick the color. Magnifier will appear near cursor.
Contrast Checker (WCAG)
Normal Text Aa
Large Text Aa
4.54:1
Contrast Ratio
Preview
AA ✓
#6366F1
Slate Blue
White on Color
Black on Color
Color Harmony
Color History
No colors picked yet
Copied:
How to use

Pick, preview and copy colors in seconds

Use the color picker, image picker, or contrast checker to get accurate HEX, RGB, HSL, CMYK and CSS color values for your design or website.

Step 01

Choose a color

Select a color from the picker, color canvas, hue slider, or generate a random color.

Step 02

Pick from image

Upload an image and click anywhere on it to grab the exact color from that pixel.

Step 03

Copy color values

Copy HEX, RGB, HSL, HSV, CMYK, RGBA or CSS variable values with one click.

Step 04

Check readability

Use the contrast checker to test text and background colors for better accessibility.

Live workflow

Design-ready output

#6366F1 Slate Blue
HEX #6366F1
RGB 99, 102, 241
HSL 239, 84%, 67%

Tip: Use color harmony and shades to create matching palettes for buttons, cards, backgrounds and text.

Features

Everything you need for perfect color selection

Pick colors, convert color formats, check contrast, generate palettes and copy ready-to-use CSS values from one clean tool.

Screen Color Picker

Pick any color directly from your screen using the eyedropper and get instant color values.

Image Color Picker

Upload an image and click on any area to extract the exact color from that pixel.

Multiple Color Formats

Convert colors into HEX, RGB, HSL, HSV, CMYK, RGBA and CSS variable formats.

Palette Generator

Create matching shades, tints and harmony palettes for modern website and app designs.

Gradient Generator

Generate beautiful linear or radial gradients and copy the CSS code instantly.

Contrast Checker

Check text and background contrast to improve readability and accessibility.

Color guide

What is a color picker tool?

A color picker tool helps you choose, extract and convert colors for websites, apps, graphics, branding and UI design. You can select a color manually, pick it from an image, copy color codes and test how readable your color combination is.

This online color picker gives you ready-to-use values like HEX, RGB, HSL, HSV, CMYK and CSS color formats. It is useful for developers, designers, content creators and anyone who wants accurate colors without installing heavy design software.

Best for UI colors, brand palettes and website themes
Extract colors from images and visual references
Copy clean CSS color values for frontend projects

For Developers

Copy HEX, RGB, HSL and CSS variables directly into your HTML, CSS, Tailwind or design system.

For Designers

Create color palettes, shades, tints and gradients for clean, consistent visual designs.

For Better Readability

Check foreground and background contrast before using colors in buttons, cards, headings and text.

Examples

Color picker examples

See how picked colors can be used in real website UI elements like buttons, cards, gradients and text backgrounds.

Examples 01

Button Colors

Use picked colors for CTA buttons, hover states and action controls.

#6366F1
Premium Card

Clean UI block with soft background and readable text.

Examples 02

Card Background

Create soft card backgrounds for dashboards, tools and SaaS pages.

#EEF2FF
Gradient Hero
Examples 03

CSS Gradient

Generate linear or radial gradients and copy CSS for hero sections.

linear-gradient(...)

Readable Text

Good color contrast makes content easier to read.

Examples 04

Text Contrast

Check foreground and background colors before using them in text areas.

AA Passed
FAQ

Color picker FAQs

Quick answers about picking colors, copying formats, image color extraction and contrast checking.

A color picker tool helps you select colors and copy their values in formats like HEX, RGB, HSL, HSV, CMYK and CSS variables.

Yes, you can upload an image and click on any part of it to extract the exact color from that pixel.

This tool supports popular color formats including HEX, RGB, HSL, HSV, CMYK, RGBA and CSS variable output.

The contrast checker helps you test foreground and background colors so your text stays readable and accessible.

Yes, you can copy HEX, RGB, HSL, RGBA, gradient CSS and CSS variable values directly into your website stylesheet.

Related tools

Try more useful image and design tools

Explore other free tools that help you edit, convert, optimize and create better visual content.

Image Converter

Convert images between JPG, PNG, WEBP, GIF, AVIF, BMP, TIFF and more formats quickly.

Dummy Images Generator

Generate placeholder dummy images with custom size, background color and text.

Image to Text

Extract readable text from images using OCR and copy it easily.

Crop Image

Crop images online with custom area, ratio and preview before downloading.

Image Resizer

Resize images by width, height, percentage, pixels, cm, inch or mm.

Image Compress

Compress images to reduce file size while keeping good visual quality.