OmniTools

Color Picker & Converter

Pick a color or type HEX, use the eyedropper, and copy HEX, RGB, HSL or CMYK.

Basis: sRGB (IEC 61966-2-1) HEX, RGB and HSL notation with a simple CMYK conversion formula·2026-11-02 verified·Editorial policy

Before you rely on this

Values are in the sRGB color space. What you actually see shifts with display calibration and wider gamuts such as Display P3. CMYK is a simple formula without a color profile, so printed colors can differ.

Tool Overview & Key Purpose

Pick a color from the swatch, type a HEX code or sample the screen with the eyedropper, then copy the matching HEX, RGB, HSL or CMYK value in one click.

Step-by-Step Usage Instructions

1STEP 1

Click the swatch to choose a color in the browser color picker, or type a HEX code (#3B82F6 or the short #38F form).

2STEP 2

To grab a color shown on screen, open the eyedropper with the pick-screen-color button (Chrome, Edge and other browsers that support EyeDropper).

3STEP 3

Click any of the HEX, RGB, HSL or CMYK rows to copy that value.

4STEP 4

Save colors you reuse and load them again from the history panel.

Real-World Scenarios & Practical Cases

3 Practical CasesScenario #1

Moving a Mockup Color into CSS

Open the mockup on screen, sample a button with the eyedropper and get `#3B82F6` together with `rgb(59, 130, 246)` and `hsl(217, 91%, 60%)`, ready to paste into CSS.

To make a lighter or darker shade, change the last HSL value (lightness).Scenario #2

Print CMYK vs Web RGB Conversion

Enter the web color `#FF5733` to get the CMYK approximation `cmyk(0%, 66%, 80%, 0%)`.

This is a simple formula, not a color-managed conversion, so printed results depend on the print shop profile.Scenario #3

Keeping Brand Colors at Hand

Save your logo HEX once and load it from the history next time to read its RGB and HSL again.

Saved colors stay in this browser only.Color space and conversion basis

HEX → RGB (two hex digits per channel), RGB → HSL (hue, saturation and lightness from the channel max and min), RGB → CMYK (K = 1 − max(R,G,B); C, M, Y = (1 − value − K) / (1 − K)).

Pro Tips & Key Considerations

HSL model is often easiest for designers adjusting lightness and saturation programmatically.The eyedropper relies on the browser EyeDropper API, so it may not open in Safari or Firefox; type the HEX code instead.

Frequently Asked Questions (FAQ)

Sources & References

W3C — CSS Color Module Level 4 MDN Web Docs — CSS <color> Value Reference

Basis: sRGB (IEC 61966-2-1) HEX, RGB and HSL notation with a simple CMYK conversion formula · 2026-11-02 verified