Pick any colour and convert it to HEX, RGB, HSL, HSV, CMYK, LAB, LCH, OKLCH and CSS names. Use the EyeDropper, pick from an image, generate palettes & gradients, check WCAG contrast, simulate colour blindness, and export to CSS, Tailwind, Flutter, Swift and more — all in your browser.
Quick palette:
Exports your saved palette (or the current colour if empty).
Save colours to build a palette here.
Recently used colours appear here.
A saturation/brightness area, hue and opacity sliders, native picker and HEX/name input — all synced live.
HEX, HEXA, RGB(A), HSL(A), HSV, CMYK, LAB, LCH, OKLCH and the nearest CSS named colour.
Pick any colour from anywhere on your screen (supported browsers).
Upload an image and click to sample any pixel's colour.
Complementary, analogous, triadic, tetradic, monochromatic, shades, tints and tones.
Linear, radial and conic gradients with instant CSS output.
Contrast ratio with AA/AAA pass badges, a text preview and colour-blind simulation.
Mix two colours, generate a random colour, and keep a history of what you use.
CSS, SCSS, Tailwind, Bootstrap, Android XML, Flutter, Swift, React and SVG.
Download as TXT, JSON, CSS, GPL, PNG, and Adobe ASE / ACO swatch files.
Build a saved palette and keep colours you reuse, stored locally.
Everything runs in your browser. No uploads, no sign-up, works offline.
The ApneSoftware Color Picker is a professional, all-in-one colour tool for designers and developers — a fast, private way to choose a colour and immediately get everything you need to use it. Where a basic picker only shows HEX and RGB, this tool converts your colour to more than a dozen formats at once: HEX and HEXA (with alpha), RGB and RGBA, HSL and HSLA, HSV/HSB, print-ready CMYK, and the perceptual spaces LAB, LCH and the modern CSS OKLCH, plus the nearest CSS named colour. Every value is one click away from your clipboard, so moving a colour from an idea into CSS, a design file or print specs takes seconds.
Choosing the colour is just as flexible. A responsive saturation-and-brightness area lets you drag to the exact shade, with dedicated hue and opacity sliders beside it and a live, checkerboard-backed preview so transparency is visible. You can type a HEX code or a CSS colour name, use your operating system's native picker, or — in supported browsers — the EyeDropper to grab any colour from anywhere on your screen, which is perfect for matching a colour in another app or a photo. There is also a built-in image colour picker: drop in a picture and click any pixel to sample its colour, ideal for pulling a palette from a photograph or a brand asset.
Beyond a single colour, the tool helps you build harmonious palettes. The palette generator produces classic colour-theory schemes from your base colour — complementary, analogous, triadic, split-complementary and tetradic combinations, plus monochromatic variations and full ramps of shades, tints and tones. Each generated swatch is clickable to make it the active colour, and you can save a whole scheme to your palette in one click. A gradient generator turns your colour and a second one into linear, radial or conic gradients with a live preview and ready-to-paste CSS, so backgrounds and buttons come together quickly. You can also mix two colours to find the midpoint, generate a random colour for inspiration, and keep a history of recent colours and a saved palette — all stored locally in your browser.
Colour is not only aesthetic; it has to be usable, and this tool takes accessibility seriously. The built-in contrast checker computes the WCAG contrast ratio between your colour and any background and shows clear AA and AAA pass/fail badges for normal and large text, with a live text preview so you can see readability at a glance. A colour-blind simulation panel shows how your colour appears under protanopia, deuteranopia, tritanopia and achromatopsia, helping you avoid combinations that some users cannot distinguish. Together these features let you design inclusive interfaces and catch contrast problems long before they reach real users — the kind of check that is easy to skip but important to get right.
For developers, the export options turn a colour or a whole palette into code and files. Copy a single colour as a CSS custom property, SCSS variable, Tailwind config entry, Bootstrap variable, Android XML colour, Flutter Color, Swift UIColor, React style object or an SVG fill. Export an entire palette as plain TXT, structured JSON, a CSS variables block, a GIMP GPL palette, a PNG swatch strip, or the industry-standard Adobe ASE and ACO swatch files that open directly in Photoshop, Illustrator and other design apps. This bridges the gap between choosing colours in the browser and using them in a real project or design pipeline.
Privacy, speed and quality are built in. All colour maths runs locally in JavaScript — nothing you pick, no image you load and no palette you build is ever uploaded to a server, and there is no account or tracking. Because it is fully client-side, conversions are instant even on a phone, and the tool keeps working with no internet connection once loaded. The interface is keyboard-navigable and labelled for screen readers, respects high-contrast preferences, and adapts from wide desktops to tablets and phones with touch-friendly controls. Internally, colour conversions, palette schemes and export formats are organised into small, well-defined functions, so the tool is accurate, easy to audit and simple to extend. In short, it is a fast, private, deeply capable colour picker suitable for everyday design work and for a professional developer or design platform alike.
Common tasks are covered out of the box: converting HEX to RGB and RGB to HEX, turning a brand colour into HSL for quick lightness tweaks, getting CMYK values before sending artwork to print, and copying a modern OKLCH value straight into a stylesheet. Designers can lift a colour from a screenshot with the EyeDropper, build a matching analogous or complementary scheme, verify the text will pass WCAG AA on its background, and hand developers a Tailwind or Flutter snippet — all in a single, uninterrupted flow. Because the same colour is shown in every format at once and updates the instant you move the picker, you spend your time choosing colours rather than converting them by hand or hunting for a second tool.
ApneSoftware Color Picker designers और developers के लिए एक professional, all-in-one colour टूल है — रंग चुनने और उसे इस्तेमाल करने के लिए ज़रूरी सब कुछ तुरंत पाने का एक तेज़, निजी तरीका। जहाँ एक साधारण picker सिर्फ़ HEX और RGB दिखाता है, वहीं यह टूल आपके रंग को एक साथ एक दर्जन से ज़्यादा formats में बदलता है: HEX और HEXA (alpha सहित), RGB और RGBA, HSL और HSLA, HSV/HSB, print-ready CMYK, और perceptual spaces LAB, LCH तथा आधुनिक CSS OKLCH, साथ ही निकटतम CSS named colour। हर value एक क्लिक में clipboard पर आ जाती है।
रंग चुनना भी उतना ही लचीला है। एक responsive saturation-and-brightness क्षेत्र आपको सटीक shade तक drag करने देता है, उसके साथ अलग hue और opacity sliders और एक live, checkerboard-backed preview होता है ताकि transparency दिखे। आप HEX code या CSS colour name टाइप कर सकते हैं, अपने OS का native picker उपयोग कर सकते हैं, या — supported browsers में — EyeDropper से screen पर कहीं से भी कोई रंग उठा सकते हैं। एक अंतर्निहित image colour picker भी है: कोई तस्वीर डालें और किसी भी pixel पर click कर उसका रंग sample करें — किसी photo या brand asset से palette निकालने के लिए आदर्श।
एक रंग से आगे, टूल harmonious palettes बनाने में मदद करता है। palette generator आपके base colour से classic colour-theory schemes बनाता है — complementary, analogous, triadic, split-complementary और tetradic संयोजन, साथ ही monochromatic variations और shades, tints और tones के पूरे ramps। हर generated swatch clickable है, और आप पूरी scheme एक क्लिक में palette में सहेज सकते हैं। एक gradient generator आपके रंग और दूसरे रंग को linear, radial या conic gradients में बदलता है, live preview और paste-ready CSS के साथ। आप दो रंगों को mix कर सकते हैं, प्रेरणा के लिए random रंग बना सकते हैं, और recent colours की history तथा एक saved palette रख सकते हैं — सब locally आपके browser में।
रंग सिर्फ़ सुंदरता नहीं, उसका उपयोग-योग्य होना ज़रूरी है, और यह टूल accessibility को गंभीरता से लेता है। अंतर्निहित contrast checker आपके रंग और किसी background के बीच WCAG contrast ratio निकालता है और normal तथा large text के लिए स्पष्ट AA व AAA pass/fail badges दिखाता है, एक live text preview के साथ। एक colour-blind simulation panel दिखाता है कि आपका रंग protanopia, deuteranopia, tritanopia और achromatopsia में कैसा दिखता है, जिससे आप ऐसे संयोजनों से बच सकें जिन्हें कुछ users अलग नहीं कर पाते। ये सुविधाएँ inclusive interfaces बनाने और contrast समस्याओं को असली users तक पहुँचने से पहले पकड़ने में मदद करती हैं।
Developers के लिए, export विकल्प एक रंग या पूरी palette को code और files में बदल देते हैं। किसी एक रंग को CSS custom property, SCSS variable, Tailwind config entry, Bootstrap variable, Android XML colour, Flutter Color, Swift UIColor, React style object या SVG fill के रूप में copy करें। पूरी palette को सादे TXT, structured JSON, CSS variables block, GIMP GPL palette, PNG swatch strip, या industry-standard Adobe ASE और ACO swatch files के रूप में export करें जो सीधे Photoshop, Illustrator आदि में खुलती हैं।
Privacy, गति और गुणवत्ता इसमें अंतर्निहित हैं। सारा colour गणित locally JavaScript में चलता है — आपका चुना कोई रंग, load की गई कोई image या बनाई गई कोई palette किसी server पर upload नहीं होती, और कोई account या tracking नहीं। पूरी तरह client-side होने के कारण conversions फ़ोन पर भी तुरंत होते हैं, और page load के बाद टूल बिना इंटरनेट भी काम करता है। Interface keyboard से चलता है और screen readers के लिए labelled है, high-contrast वरीयता का सम्मान करता है, और बड़े desktop से tablets व phones तक touch-friendly controls के साथ ढलता है। भीतर से, colour conversions, palette schemes और export formats छोटे, सुपरिभाषित functions में व्यवस्थित हैं, इसलिए टूल सटीक, audit करने में आसान और विस्तार करने में सरल है।
रोज़मर्रा के काम इसमें पहले से शामिल हैं: HEX से RGB और RGB से HEX बदलना, किसी brand colour को त्वरित lightness बदलाव के लिए HSL में लाना, artwork print पर भेजने से पहले CMYK values पाना, और एक आधुनिक OKLCH value सीधे stylesheet में copy करना। Designers EyeDropper से किसी screenshot से रंग उठा सकते हैं, एक मिलती-जुलती analogous या complementary scheme बना सकते हैं, जाँच सकते हैं कि text उसके background पर WCAG AA pass करेगा, और developers को Tailwind या Flutter snippet दे सकते हैं — सब एक ही निर्बाध प्रवाह में। चूँकि एक ही रंग एक साथ हर format में दिखता है और picker हिलाते ही update होता है, आपका समय रंग चुनने में लगता है, हाथ से बदलने या दूसरा टूल खोजने में नहीं।
| Format | Example | Best for |
|---|---|---|
| HEX / HEXA | #7C5CFC / #7C5CFCFF | Web & CSS, with optional alpha. |
| RGB / RGBA | rgb(124, 92, 252) | Screens; RGBA adds transparency. |
| HSL / HSLA | hsl(252, 96%, 67%) | Intuitive hue / saturation / lightness edits. |
| HSV / HSB | hsv(252, 63%, 99%) | Design apps & colour pickers. |
| CMYK | cmyk(51%, 63%, 0%, 1%) | Print (cyan, magenta, yellow, key). |
| LAB / LCH | lab(56 40 -72) | Perceptual, device-independent colour. |
| OKLCH | oklch(63% 0.20 290) | Modern CSS; even lightness & chroma. |
| CSS Named | the nearest CSS colour name | Readable, standard colour names. |
Readable colour needs enough contrast. The WCAG contrast ratio ranges from 1:1 (identical) to 21:1 (black on white). Targets:
Use the contrast panel above to check your colour against its background, and the colour-blind simulation to make sure your combinations stay distinguishable for everyone. Never rely on colour alone to convey meaning — pair it with text, icons or patterns.
Works on all modern browsers — Google Chrome, Mozilla Firefox, Microsoft Edge, Safari, Opera and Brave — on Windows, macOS, Linux, Android and iOS. Colour conversion, palettes, gradients, contrast and exports work everywhere. The EyeDropper is available in Chromium-based browsers (Chrome, Edge, Opera) and gracefully hides where unsupported; copy uses the Clipboard API with a fallback.