Pick colors with an area, wheel, sliders, and eyedropper; convert instantly between HEX, RGB, RGBA, HSL, HSV, CMYK, LAB, OKLCH, and CSS named colors (plus closest Tailwind and Material tokens); extract dominant colors from any image; generate CSS and React Native gradients; preview color blindness; and check WCAG contrast all in your browser.

No colors yet — pick or convert a color to start your history.

This free online color picker and converter helps designers and developers choose colors, convert between popular color formats, match Tailwind and Material Design tokens, pull palettes from photos, build gradients, and validate accessibility. Everything runs locally in your browser — images and colors are not uploaded to a server.

Web4pps brings the full color workflow into one free tool so you spend less time switching apps and more time shipping polished UI. Pick a color once, convert it to HEX, RGB, HSL, LAB, OKLCH, and more, then map it to the closest Tailwind or Material Design token for production-ready naming. Pull real palettes from your own images, generate CSS or React Native gradients in one click, and check color blindness and WCAG contrast before you publish — without accounts, uploads, or paywalls.

• Standard pickers: color area, color wheel, sliders, swatches, and screen eyedropper
• Color converter for HEX, RGB, RGBA, HSL, HSV, CMYK, LAB, OKLCH, CSS named colors, and closest Tailwind / Material Design tokens
• Palette generator with 50 popular-style palettes and random 4–10 color generation
• Favorite palettes saved in your browser with one-click download (.txt) and multi-format export
• Export palettes as PNG, SVG, JSON, CSS Variables, SCSS Variables, Tailwind Config, Figma JSON, or Adobe ASE
• Color History that remembers colors you pick or convert (local storage) and lets you restore them anytime
• Image color picker with magnifier and HEX, RGB, HSL, HSV, CMYK values
• Automatic dominant color extraction (top 5 + top 10) with percentage bars
• Gradient generator with instant CSS and React Native output
• Color blindness preview for Protanopia, Deuteranopia, Tritanopia, and Achromatopsia
• WCAG contrast checker for AA, AAA, and large text
• Works on desktop and mobile — no registration required

1. Open the Color Pickers tab to choose a color with the area, wheel, sliders, palette swatches, or screen eyedropper. Copy HEX, RGB, HSL, HSV, or CMYK values instantly.

2. Use the Color Converter tab to convert between HEX, RGB, RGBA, HSL, HSV, CMYK, LAB, OKLCH, and CSS named colors, and see the closest Tailwind and Material Design tokens.

3. Open Palette Generator to browse 50 popular-style palettes or generate a random palette with 4–10 colors. Hover a swatch to expand it and see the HEX, then click to select.

4. Use Image Extract to select a photo from your computer, click any pixel to sample it, and review the automatically detected dominant colors with percentage bars.

5. Build gradients in the Gradient tab, then copy CSS for the web or React Native-style props for mobile apps.

6. Check how colors look under different types of color blindness, and verify text/background contrast with the Accessibility tab.

Does the screen eyedropper work in every browser?

The EyeDropper API is supported in Chromium-based browsers such as Chrome and Edge. Other browsers may hide or disable this control.

What formats does the Color Converter support?

You can convert between HEX, RGB, RGBA, HSL, HSV, CMYK, LAB, OKLCH, and CSS named colors. The converter also shows the closest Tailwind CSS and Material Design palette tokens for your color.

How does Color History work?

When you pick or convert a color, it is saved in this browser using local storage. You can restore any past color from the Color History section (or the history panels inside Image Extract and Gradient). Clearing history only affects this device and browser.

Can I save favorite palettes?

Yes. In the Palette Generator tab, tap Favorite on a random or popular palette to store it locally. Favorites stay available when you return to the page, and you can remove or clear them anytime.

What can I export a palette as?

Use Download for a comma-separated .txt file of HEX values, or Export for PNG, SVG, JSON, CSS Variables, SCSS Variables, Tailwind Config, Figma JSON, or Adobe ASE. Exports run entirely in your browser.

Are my images uploaded?

No. Image processing and color extraction happen entirely in your browser.

What do AA and AAA mean?

They are WCAG contrast levels. AA requires at least 4.5:1 for normal text (3:1 for large text). AAA requires 7:1 for normal text (4.5:1 for large text).

Can I use the gradient output in React Native?

Yes. The React Native panel outputs props compatible with libraries like expo-linear-gradient (colors, locations, start, end).

Colors and images you select are processed locally in your browser. Nothing is uploaded to a server or stored after you leave the page.