منتقي الألوان ومحوِّلها

(التوثيق بالإنجليزية)

What it does

The Color Picker & Converter lets you choose any color and instantly see it in five formats - HEX, RGB, HSL, HSV, and CMYK - side by side with a live preview. Edit a value in any one of those formats and every other format updates from the same source of truth, so the values can never drift apart. It also reads off the closest named CSS color, tells you whether black or white text stays readable on it (WCAG AA/AAA), and remembers your recent colors. Pick with the native color square, type a hex code, scrub the HSL sliders, randomize, or - in Chromium browsers - grab a color straight off your screen with the eyedropper. Everything runs 100% client-side: the color you pick never leaves your browser.

How to use it

1. Pick a starting color: the native color square, the HEX field, the Screen eyedropper (Chromium only), the HSL sliders, or Randomize.
2. Watch the live preview swatch (with its closest named color) and the five format cards update together.
3. To convert from another space, edit the R/G/B, H/S/L, H/S/V, or C/M/Y/K fields directly - type a number and tab out (or press Enter) to commit it.
4. Check Text legibility to see whether black or white text passes WCAG AA/AAA on this color, and the exact contrast ratios.
5. Click any Recent swatch to jump back to a color you just used.
6. Tap Copy on any card to copy that format’s string (#3B82F6, rgb(59, 130, 246), …), or Copy share link to send the exact color to someone else.

Examples

Blue primary → every format

Pick #3b82f6:

HEX:   #3B82F6
RGB:   rgb(59, 130, 246)
HSL:   hsl(217, 91%, 60%)
HSV:   hsv(217, 76%, 96%)
CMYK:  cmyk(76%, 47%, 0%, 4%)
Name:  royal blue
Text:  #000000 (5.71:1 - AA pass)

Convert HSL to hex

Enter H 0, S 0%, L 50% → a neutral gray:

HEX: #808080
RGB: rgb(128, 128, 128)

Share a color

Pick a color, then the URL becomes …/tools/color-picker?c=3b82f6 - open it anywhere to land on the exact same color.

Good to know

• One source of truth: every edit funnels through a single normalized RGB, so HEX/RGB/HSL/HSV/CMYK always agree. HSL, HSV, and CMYK are lossy representations, so a value you type may display rounded to the nearest whole number - that’s expected, not a bug.
• Named colors are approximate: the “closest named color” is matched against a curated subset of well-known CSS names, so unusual shades may snap to a nearby neighbor.
• Eyedropper: the Screen button uses the browser EyeDropper API, available in Chromium browsers (Chrome, Edge, Arc). It’s hidden where unsupported.
• Shareable: your color is encoded in the URL (?c=…), and recent colors are stored locally in your browser - never sent to a server.
• Private: all conversion happens locally.
• Related tools: Palette Generator, Color Contrast Checker, CSS Animation Playground.