PTBox

Color Picker / Format Converter / Contrast Checker

Online color picker that converts between HEX / RGB / HSL / HSV / CSS named colors / Tailwind arbitrary-value syntax — click to copy any format. Includes a screen color picker (EyeDropper API in Chromium 95+), brightness gradient, alpha channel and WCAG 2.1 contrast checker (AA / AAA).

Left: lighter (+40% / +30% / +20% / +10%). Middle: current. Right: darker (-10% / -20% / -30% / -40%).

White bg4.47 : 1AA Large

Aa

PTBox · 颜色对比示例

Black bg4.70 : 1AA

Aa

PTBox · 颜色对比示例

AA ≥ 4.5 (normal text) / ≥ 3.0 (large text); AAA ≥ 7.0 (normal) / ≥ 4.5 (large).

Usage

Pick colors, convert between multiple formats and check WCAG contrast. Includes a native color picker, screen color picker (Chrome/Edge 95+ EyeDropper API), and text input parsing HEX / RGB / HSL / named CSS colors.

Exports HEX (6/8 digits) / RGB(A) / HSL(A) / HSV / CSS variable / Tailwind arbitrary-value. Contrast uses the WCAG 2.1 formula — AA ≥ 4.5 (normal text) / AAA ≥ 7.0.

Use cases

UI color sampling

Pick a colour from a design mock and export HEX / RGB / HSL straight into code.

WCAG accessibility check

Confirm text-on-background contrast meets AA (4.5) or AAA (7.0).

Theme colour definition

Export as a CSS variable or Tailwind arbitrary-value.

Sampling colour from the screen

Use the EyeDropper to grab any pixel from anywhere on screen.

FAQ

Why doesn't the screen color picker work?

The EyeDropper API is Chrome / Edge 95+ only. Firefox and Safari haven't shipped it — take a screenshot and pick from the image instead.

What's WCAG AA / AAA?

Web accessibility levels. AA requires contrast ≥ 4.5 for normal text (3 for large text). AAA is stricter: ≥ 7 / 4.5.

How do I get a color with alpha?

Enable the alpha channel — output switches to #RRGGBBAA (8-digit hex) or rgba(...) form.

What's a Tailwind arbitrary value?

Tailwind v3+ supports inline values like bg-[#3b82f6]. The tool can emit that form directly.

Comments

0 / 1000