ਕਲਰ ਪਿਕਰ ਅਤੇ ਪੈਲੇਟ ਐਕਸਟ੍ਰੈਕਟਰ - ਤਸਵੀਰ ਤੋਂ ਰੰਗ ਚੁਣੋ

ਕੋਈ ਵੀ JPG, PNG, WebP ਜਾਂ GIF ਅੱਪਲੋਡ ਕਰੋ ਅਤੇ ਦਿਖਾਈ ਜਾ ਰਹੀ ਤਸਵੀਰ 'ਤੇ ਕਿਤੇ ਵੀ ਕਲਿੱਕ ਕਰੋ — ਤੁਹਾਡੇ ਕਰਸਰ ਹੇਠਲੇ ਠੀਕ ਪਿਕਸਲ ਦਾ ਨਮੂਨਾ ਲਿਆ ਜਾਂਦਾ ਹੈ ਅਤੇ HEX, RGB ਅਤੇ HSL ਵਜੋਂ ਦਿਖਾਇਆ ਜਾਂਦਾ ਹੈ, ਹਰ ਫਾਰਮੈਟ ਲਈ ਇੱਕ-ਕਲਿੱਕ ਕਾਪੀ ਨਾਲ। ਕਿਸੇ ਬ੍ਰਾਂਡ ਰੰਗ ਨਾਲ ਮੇਲ ਕਰਨ, ਫੋਟੋ ਤੋਂ ਸਵੈਚ ਲੈਣ, ਜਾਂ ਡਿਜ਼ਾਈਨ ਮੌਕਅੱਪ ਤੋਂ ਐਕਸੈਂਟ ਟੋਨ ਚੁੱਕਣ ਲਈ ਬਿਲਕੁਲ ਢੁਕਵਾਂ।

ਕਿਸੇ ਵੀ ਪਿਕਸਲ 'ਤੇ ਕਲਿੱਕ ਕਰੋ ਤੇ ਇਹ ਕਲਰ ਪਿਕਰ ਟੂਲ ਉਸਦਾ HEX ਰੰਗ ਕੋਡ (ਜਿਵੇਂ #FF6B35) RGB ਤੇ HSL ਦੇ ਨਾਲ ਦਿਖਾਉਂਦਾ ਹੈ — ਉਹੀ HTML/CSS ਰੰਗ ਕੋਡ ਜੋ ਤੁਸੀਂ ਸਿੱਧਾ ਇੱਕ ਸਟਾਈਲਸ਼ੀਟ, ਡਿਜ਼ਾਈਨ ਟੋਕਨ ਜਾਂ HTML ਐਟ੍ਰੀਬਿਊਟ ਵਿੱਚ ਪੇਸਟ ਕਰਦੇ ਹੋ। ਇੱਕ ਕਲਿੱਕ ਵਿੱਚ ਹੈਕਸ ਕੋਡ ਲੈਣ ਲਈ Copy ਦਬਾਓ।

ਚਿੱਤਰ ਨੂੰ ਇਸ ਦੇ ਸਭ ਤੋਂ ਲੰਬੇ ਪਾਸੇ ਉੱਤੇ 320 ਪਿਕਸਲ ਤੱਕ ਡਾਊਨਸੈਂਪਲ ਕੀਤਾ ਜਾਂਦਾ ਹੈ, ਫਿਰ ਹਰ ਪਿਕਸਲ ਨੂੰ ਉਸ ਦੇ ਪ੍ਰਤੀ ਚੈਨਲ ਉੱਪਰਲੇ 4 ਬਿਟਾਂ ਅਨੁਸਾਰ ਬਕਟਾਂ ਵਿੱਚ ਪਾਇਆ ਜਾਂਦਾ ਹੈ। ਸਭ ਤੋਂ ਵੱਧ ਭਰੇ ਬਕਟਾਂ ਨੂੰ ਪੂਰੇ 8-ਬਿਟ ਰੰਗ ਵਿੱਚ ਔਸਤ ਕੀਤਾ ਜਾਂਦਾ ਹੈ, ਬਾਰੰਬਾਰਤਾ ਅਨੁਸਾਰ ਛਾਂਟਿਆ ਜਾਂਦਾ ਹੈ, ਅਤੇ ਤੁਹਾਡੇ ਪੈਲੇਟ ਵਜੋਂ ਵਾਪਸ ਕੀਤਾ ਜਾਂਦਾ ਹੈ। ਨਤੀਜਾ ਆਮ ਤੌਰ 'ਤੇ 5-24 ਪ੍ਰਮੁੱਖ ਰੰਗ ਹੁੰਦੇ ਹਨ ਜੋ ਚਿੱਤਰ ਦਾ ਦ੍ਰਿਸ਼ਟੀਗਤ ਸਾਰ ਦਿੰਦੇ ਹਨ।

ਹਾਂ। Download ਬਟਨ ਦੋ ਫਾਰਮੈਟ ਬਣਾਉਂਦੇ ਹਨ: ਇੱਕ CSS ਵੇਰੀਏਬਲ ਬਲਾਕ ਜੋ :root ਸਿਲੈਕਟਰ (--color-1, --color-2…) ਵਿੱਚ ਪੇਸਟ ਕਰਨ ਲਈ ਤਿਆਰ ਹੈ, ਅਤੇ ਇੱਕ JSON ਫਾਈਲ ਜਿਸ ਵਿੱਚ ਹਰ ਰੰਗ ਲਈ ਹੈਕਸ, RGB ਭਾਗ ਅਤੇ ਭਾਰ ਪ੍ਰਤੀਸ਼ਤ ਹੁੰਦਾ ਹੈ। ਦੋਵੇਂ ਫਾਰਮੈਟ ਡਿਜ਼ਾਈਨ ਟੋਕਨਾਂ, Tailwind ਕਨਫਿਗਾਂ ਅਤੇ ਪੈਲੇਟ ਲਾਇਬ੍ਰੇਰੀਆਂ ਵਿੱਚ ਸਾਫ਼-ਸੁਥਰੇ ਢੰਗ ਨਾਲ ਜੁੜ ਜਾਂਦੇ ਹਨ।

ਨਹੀਂ — ਰੰਗ ਚੁਣਨਾ ਅਤੇ ਪੈਲੇਟ ਕੱਢਣਾ ਪੂਰੀ ਤਰ੍ਹਾਂ ਤੁਹਾਡੇ ਬ੍ਰਾਊਜ਼ਰ ਵਿੱਚ HTML canvas API ਦੀ ਵਰਤੋਂ ਨਾਲ ਹੁੰਦਾ ਹੈ। ਚਿੱਤਰ ਤੁਹਾਡੇ ਡਿਵਾਈਸ ਉੱਤੇ ਹੀ ਰਹਿੰਦਾ ਹੈ, ਜਿਸ ਨਾਲ ਇਹ ਟੂਲ ਅਣ-ਜਾਰੀ ਪ੍ਰੋਡਕਟ ਫ਼ੋਟੋਆਂ, ਡਰਾਫਟ ਮੌਕਅੱਪ ਅਤੇ NDA ਅਧੀਨ ਬ੍ਰਾਂਡ ਐਸੈੱਟਾਂ ਲਈ ਸੁਰੱਖਿਅਤ ਬਣ ਜਾਂਦਾ ਹੈ।

ਬ੍ਰਾਂਡ ਪਛਾਣ ਦੇ ਕੰਮ ਲਈ, 5-8 ਰੰਗ ਸਭ ਤੋਂ ਵਧੀਆ ਚੋਣ ਹਨ — ਇਹ ਐਕਸੈਂਟ ਚੋਣਾਂ ਨੂੰ ਪਤਲਾ ਕੀਤੇ ਬਿਨਾਂ ਮੁੱਖ ਥੀਮ ਨੂੰ ਫੜ ਲੈਂਦਾ ਹੈ। ਡਾਟਾ ਵਿਜ਼ੁਅਲਾਈਜ਼ੇਸ਼ਨ ਲਈ ਅਸੀਂ 10-16 ਰੰਗਾਂ ਦੀ ਸਿਫ਼ਾਰਸ਼ ਕਰਦੇ ਹਾਂ ਤਾਂ ਜੋ ਤੁਹਾਡੇ ਕੋਲ ਕਾਫ਼ੀ ਵੱਖ-ਵੱਖ ਰੰਗ ਹੋਣ। ਸਲਾਈਡਰ ਤੁਹਾਨੂੰ 5 ਤੇ 24 ਵਿਚਕਾਰ ਚੋਣ ਕਰਨ ਦਿੰਦਾ ਹੈ।

128 ਤੋਂ ਘੱਟ ਐਲਫਾ ਵਾਲੇ ਪਿਕਸਲ ਨਜ਼ਰਅੰਦਾਜ਼ ਕੀਤੇ ਜਾਂਦੇ ਹਨ, ਇਸ ਲਈ ਪਾਰਦਰਸ਼ੀ ਪਿਛੋਕੜ ਰੰਗ-ਪਟ ਨੂੰ "ਪਿਛੋਕੜ" ਰੰਗਾਂ ਨਾਲ ਖ਼ਰਾਬ ਨਹੀਂ ਕਰਦੇ। ਇਹ Image Color Picker ਨੂੰ ਉਤਪਾਦ ਕੱਟਆਊਟ, ਸਟਿੱਕਰ ਕਲਾਕਾਰੀ ਅਤੇ ਵੱਖ ਕੀਤੇ ਵਿਸ਼ਿਆਂ ਲਈ ਖ਼ਾਸ ਤੌਰ 'ਤੇ ਵਧੀਆ ਬਣਾਉਂਦਾ ਹੈ।

HEX (#RRGGBB) ਸਭ ਤੋਂ ਸੰਖੇਪ ਹੈ ਅਤੇ ਇਹੀ CSS, Figma ਅਤੇ Sketch ਮੂਲ ਰੂਪ ਵਿੱਚ ਵਰਤਦੇ ਹਨ। RGB 0-255 ਤੱਕ ਤਿੰਨ ਘਟਕ ਮੁੱਲ ਦਿਖਾਉਂਦਾ ਹੈ — ਜਦੋਂ ਚਿੱਤਰ ਡਾਟੇ ਨਾਲ ਪ੍ਰੋਗਰਾਮ ਰਾਹੀਂ ਕੰਮ ਕਰਨਾ ਹੋਵੇ ਤਾਂ ਲਾਭਦਾਇਕ। HSL (hue, saturation, lightness) ਰੰਗਾਂ ਨੂੰ ਅਨੁਕੂਲ ਕਰਨ ਲਈ ਸਹਿਜ ਹੈ: ਰੰਗ ਪਰਿਵਾਰ ਬਦਲਣ ਲਈ hue ਬਦਲੋ, ਅਤੇ tint ਤੇ shade ਲਈ lightness ਅਨੁਕੂਲ ਕਰੋ।

ਹਾਂ। ਮੁਫ਼ਤ, ਕੋਈ ਖਾਤਾ ਜ਼ਰੂਰੀ ਨਹੀਂ, ਤਸਵੀਰ ਦੇ ਆਕਾਰ ਜਾਂ ਕੱਢੇ ਗਏ ਪੈਲੇਟਾਂ ਦੀ ਗਿਣਤੀ 'ਤੇ ਕੋਈ ਹੱਦ ਨਹੀਂ। ਇੰਸਟਾਲ ਕਰਨ ਲਈ ਕੁਝ ਨਹੀਂ ਹੈ — ਪੂਰਾ ਟੂਲ ਇੱਕ ਸਿੰਗਲ ਵੈਬ ਪੰਨਾ ਹੈ।

ਕੋਈ ਤਸਵੀਰ ਦੀ ਲੋੜ ਨਹੀਂ। ਉੱਪਰ ਦਿੱਤਾ Color Picker ਤੇ Wheel ਆਪਣੇ-ਆਪ ਕੰਮ ਕਰਦਾ ਹੈ — saturation/brightness ਵਾਲਾ ਚੌਰਸ ਤੇ hue ਸਲਾਈਡਰ ਨੂੰ ਖਿੱਚੋ, ਜਾਂ ਕੋਈ ਵੀ HEX, RGB ਜਾਂ HSL ਮੁੱਲ ਟਾਈਪ ਕਰਕੇ ਠੀਕ ਉਹੀ ਰੰਗ ਸੈੱਟ ਕਰੋ। ਤਸਵੀਰ ਅੱਪਲੋਡ ਕਰਨੀ ਮਰਜ਼ੀ 'ਤੇ ਹੈ, ਸਿਰਫ਼ ਫ਼ੋਟੋ ਵਿੱਚੋਂ ਰੰਗ ਚੁੱਕਣ ਲਈ।

ਆਪਣਾ ਆਧਾਰ ਰੰਗ ਚੁਣੋ ਤੇ Color harmonies ਪੈਨਲ ਰੰਗ-ਚੱਕਰ ਸਿਧਾਂਤ ਵਰਤ ਕੇ ਤੁਰੰਤ ਪੂਰਕ, ਮਿਲਦੇ-ਜੁਲਦੇ, ਤ੍ਰੈ-ਰੰਗੀ, ਵੰਡਿਆ-ਪੂਰਕ, ਚਤੁਰ-ਰੰਗੀ ਤੇ ਇੱਕ-ਰੰਗੀ ਸਕੀਮਾਂ ਬਣਾ ਦਿੰਦਾ ਹੈ। ਕਿਸੇ ਵੀ ਸਵੈਚ 'ਤੇ ਕਲਿੱਕ ਕਰਕੇ ਉਸ ਦਾ HEX ਕੋਡ ਕਾਪੀ ਕਰੋ।

In the standalone Color Picker & Wheel, dial in your color and the panel shows its contrast ratio against pure white and pure black along with the WCAG rating — AAA, AA, AA Large, or Fail. Use this before finalizing a text or button color so it stays readable and meets WCAG 2.1 accessibility guidelines.

Yes. The standalone Color Picker & Wheel shows the closest matching named CSS color next to whatever HEX, RGB or HSL value you've dialed in, which is handy for quickly describing a shade in a brief, ticket or design spec without guessing.

Click Random in the Color Picker & Wheel to jump to a new color, then use the Color harmonies panel below it to see complementary, analogous, triadic and other coordinated palettes built from that color — a quick way to find a starting point when you're designing from scratch rather than sampling an existing image.

Use the Size dropdown above the palette to choose 5, 8, 10, 16 or 24 dominant colors — the palette recalculates instantly as you change it. Combine a small size like 5 for a clean brand palette with the picked-color eyedropper to grab one or two exact accent shades the automatic extraction might average away.

Yes — the standalone Color Picker & Wheel shows your current color's contrast ratio against pure white and pure black right under the swatch, labelled AAA, AA, AA Large or Fail per the WCAG thresholds (7:1, 4.5:1, 3:1). Use it to check a text/background pairing meets accessibility standards before you lock in a design color.

The Color Picker & Wheel automatically matches whatever color you've dialed in — via the picker, HEX box, or RGB/HSL fields — to its closest standard CSS color name, shown as 'Closest name' next to the swatch. It's a quick way to describe a color verbally or find its nearest web-safe equivalent.

Yes — every click or tap on the uploaded image adds a new swatch to your Picked Colors list rather than replacing the last one, so you can build up a custom set of exact pixel colors from different parts of a photo. Remove any single swatch with its × button, or clear the whole list with Clear picked.

Yes — the Random button (shuffle icon) in the Color Picker & Wheel jumps to a new hue, saturation and brightness combination in one click, useful for breaking creative block or exploring a palette you wouldn't have typed in manually. HEX, RGB, HSL and the harmony swatches below all update together.

On a touchscreen, drag your finger across the image to preview the color under it in a live floating swatch, then lift your finger to add that exact pixel to your Picked Colors list — no separate confirm tap needed. The same palette-size dropdown and export buttons work identically on mobile.