डिजाइन

Color Picker

Pick any color visually with a saturation/brightness canvas, hue slider, opacity slider, browser eyedropper, and image pixel sampler. Copy values in HEX, RGB, RGBA, HSL, or CMYK — or search the full CSS named-color library by name or hex.

टूल सारांश

यो टूलले संरचित इनपुट लिन्छ र सर्भर अपलोड बिना ब्राउजरमै निर्धारित आउटपुट दिन्छ।

टूलको नाम: Color Picker
इनपुट उद्देश्य: बदल्न, प्रमाणीकरण गर्न वा विश्लेषण गर्न स्रोत सामग्री प्रदान गर्नुहोस्।
आउटपुट उद्देश्य: कपी, पुन: प्रयोग वा डिबगिङका लागि उपयुक्त सामान्यीकृत आउटपुट प्राप्त गर्नुहोस्।
उदाहरण इनपुट: Pick red
उदाहरण आउटपुट: #ff0000 · rgb(255, 0, 0) · cmyk(0%, 100%, 100%, 0%)

Pick a colour you love.

Drag the canvas, tap any swatch, sample from your screen, or pick any pixel from an image upload or image URL. Every format copies in one click, and the matching-pair table below shows colours that play nicely together.

Hue217°Opacity100%

≈ royalblue#3b82f5

Eyedropper

HEX

RGB

rgb(59, 130, 245)

RGBA

rgba(59, 130, 245, 1)

HSL

hsl(217, 90%, 60%)

CMYK

cmyk(76%, 47%, 0%, 4%)

Closest named color:

Pick from image or URL

Upload an image or paste an image URL, then click directly on the preview to sample a pixel.

On white3.69:1

Normal textFailLarge textAA

On black5.70:1

Normal textAALarge textAAA

Shades & tints

Matching colour pairs

Click a row to set it as the current colour.

Role	Pair preview	HEX	Why it works	Copy
	Contrast 1.93:1		Opposite on the wheel — bold call-to-action pair
	Contrast 1.09:1		Softer take on complementary, easier on the eye
	Contrast 3.03:1		Balancing partner for hero + accent layouts
	Contrast 1.03:1		Vibrant trio — works for illustrations and charts
	Contrast 2.65:1		Third vertex of the triad for extra contrast
	Contrast 1.70:1		Neighbor hue — great for smooth gradients
	Contrast 2.29:1		Neighbor on the other side — calm and cohesive
	Contrast 1.16:1		Four-color scheme with strong visual energy
	Contrast 2.52:1		Opposite tetradic partner to round out the set

Named colors

टूल परिचय

टूल अवलोकन

Most pickers stop at HEX and RGB. This one adds opacity (rgba and #RRGGBBAA), print-ready CMYK, desktop/screen sampling in supported browsers, and click-to-pick color extraction from image uploads or image URLs. A nearest-match label tells you the closest CSS named color for readability and handoff. Saved swatches live in memory only — nothing is uploaded.

प्रयोगका केसहरू

Use Color Picker when you need fast interactive color picker with eyedropper support, image upload and url sampling, saturation/brightness canvas, hue and opacity sliders, hex / rgb / rgba / hsl / cmyk output, css named-color lookup, nearest-name matching, and saved swatches.
Handle design workflows directly in the browser with no install required.
Support SEO long-tail intent by covering quick checks, troubleshooting, and one-off conversions.

इनपुट/आउटपुट उदाहरण

इनपुट उद्देश्य

Pick red

आउटपुट उद्देश्य

#ff0000 · rgb(255, 0, 0) · cmyk(0%, 100%, 100%, 0%)

इनपुट उद्देश्य

Search "teal"

आउटपुट उद्देश्य

#008080 · rgb(0, 128, 128)

इनपुट उद्देश्य

Opacity 50% on #3b82f6

आउटपुट उद्देश्य

rgba(59, 130, 246, 0.5) · #3b82f680

अक्सर सोधिने प्रश्नहरू

What is the hex code for red, blue, green, and yellow?+

Red is #ff0000 (rgb 255,0,0), green is #008000 (rgb 0,128,0) — pure green in CSS is called "lime" #00ff00 — blue is #0000ff (rgb 0,0,255), and yellow is #ffff00 (rgb 255,255,0).

What are the hex codes for orange, purple, pink, and brown?+

Orange is #ffa500, purple is #800080, pink is #ffc0cb, and brown is #a52a2a. CSS also has named variants like darkorange (#ff8c00), hotpink (#ff69b4), and saddlebrown (#8b4513).

What are the hex codes for black, white, gray, and silver?+

Black is #000000, white is #ffffff, gray is #808080, and silver is #c0c0c0. Off-whites like whitesmoke (#f5f5f5) and ghostwhite (#f8f8ff) are useful for softer backgrounds.

What is the hex for teal, cyan, navy, and indigo?+

Teal is #008080, cyan/aqua is #00ffff, navy is #000080, and indigo is #4b0082. Royal blue (#4169e1) and dodgerblue (#1e90ff) are popular mid-blues.

What is CMYK and when should I use it?+

CMYK (cyan, magenta, yellow, key/black) is the subtractive model used by printers. Web and screens use RGB. If you are exporting for print — flyers, business cards, packaging — convert your RGB value to CMYK so the printer gets predictable ink mixing.

What does the #RRGGBBAA hex format mean?+

The last two hex digits encode alpha from 00 (fully transparent) to ff (fully opaque). For example, #ff000080 is 50%-opaque red. Modern browsers accept it in CSS directly.

How is the "closest named color" found?+

The tool computes Euclidean distance in RGB space between your color and every CSS named color, then returns the nearest one. It is a quick approximation — perceptual distance (CIEDE2000) is more accurate but overkill for most labeling.

Can I pick a color from an image URL?+

Yes. Paste an image URL and click Load URL, then click any pixel on the preview to sample that exact color. Some hosts block cross-origin image access; in that case, upload the file directly.

Can I sample color from my desktop screen?+

Yes on supported browsers via the EyeDropper API. Click Pick from screen and choose any pixel. If your browser does not support EyeDropper, use image upload/URL sampling instead.