Design

Color Picker

Pick a color with the native control, type HEX, or edit RGB and HSL — all fields stay in sync. Use the EyeDropper (Chrome / Edge / Opera) to sample from the screen, copy CSS-ready strings, and see rough contrast hints vs white and black. Runs entirely in your browser.

Ad placement — top banner

Copy CSS

Ad placement — mid rectangle

HEX, RGB, and HSL

HEX is a compact encoding of 8-bit red, green, and blue channels (#RRGGBB). RGB uses the same channels as separate numbers. HSL (hue, saturation, lightness) is often easier for tweaking palettes: move hue for the “color wheel”, saturation for vividness, lightness for tints and shades.

How syncing works

The tool converts internally through sRGB (standard web RGB). Editing any field updates the others so you can work in whichever notation matches your design workflow. Short HEX forms like #RGB expand to #RRGGBB on blur.

EyeDropper API

In supporting browsers, EyeDropper lets you pick a color from anywhere on screen (including outside the browser in many setups). If the button is disabled, your browser does not expose the API — use the native color input or type values manually.

Contrast hints

The stats row shows WCAG-style contrast ratios against pure white and black for rough accessibility guidance. For WCAG compliance you still need to test real text sizes, fonts, and non-text UI; use dedicated a11y checkers for sign-off.

How to use this tool

  1. Step 1: Choose a color with the swatch, native picker, EyeDropper, or Random.
  2. Step 2: Fine-tune in HEX, RGB, or HSL.
  3. Step 3: Copy the CSS string that matches your stylesheet (comma or modern space-separated hsl).

Frequently Asked Questions

Does DroidXP store my colors?

No. Everything runs locally in your page session. Refreshing resets to the default unless your browser restores form state.

Why do HSL values differ slightly from another app?

Rounding, different gamuts, or non-sRGB profiles can shift numbers. This tool uses standard sRGB math suitable for web CSS.

Does this support CMYK or Pantone?

No — only sRGB-style HEX/RGB/HSL for screens. Print workflows need ICC profiles and ink-specific conversions elsewhere.

Can I pick P3 or wide-gamut colors?

The native color input may allow wide-gamut picking in some browsers, but fields here normalize to sRGB for interoperability.

What about alpha transparency?

This page uses opaque RGB. For alpha, add rgba() / hsla() or modern rgb(… / …) syntax in your own stylesheet.

Why is EyeDropper blocked or cancelled?

Some environments restrict screen capture, or the user dismissed the picker. Permissions and OS policy vary.

Why does the contrast hint say “dark text” or “light text”?

It is a rough suggestion based on relative luminance: high lightness often pairs better with dark text, low lightness with light text — not a guarantee for every design.

Is this a replacement for design system tokens?

No. Use it for quick exploration; production apps should use a centralized palette, tokens, and documentation for consistency.

Ad placement — sidebar 300×600