What image tools does Texterfly offer?

Texterfly offers 3 free image tools: a Color Palette Generator (extracts HEX, RGB, HSL, CMYK colors from any uploaded image, with eyedropper and CSS export), an Image to Base64 Converter (converts images to data URIs with HTML, CSS, and JSON output), and a Base64 to Image Decoder (decodes Base64 strings back to visible images with download). All are browser-based with no image uploads to servers.

What color formats does the color palette generator output?

The Color Palette Generator outputs four color format codes for each extracted color: HEX (e.g. #3A86FF — used in web CSS and design tools), RGB (e.g. rgb(58, 134, 255) — used in screen design), HSL (e.g. hsl(217, 100%, 61%) — useful for manipulating lightness and saturation), and CMYK (e.g. cmyk(77, 47, 0, 0) — used in print design). You can copy any format with one click.

What is Base64 image encoding?

Base64 image encoding converts binary image data into a string of ASCII characters. The result is a "data URI" — a self-contained text string that browsers can render as an image without fetching an external file. Format: data:image/png;base64, . Base64 increases image size by ~33% but eliminates the need for a separate HTTP request, making it useful for small icons and inline images.

When should I use Image to Base64?

Use Image to Base64 when: embedding small icons directly in CSS (saves one HTTP request), including images in email signatures or HTML newsletters (bypasses email client image blocking), building single-file web applications or offline HTML files, embedding images in JSON API payloads, or adding inline images to SVG files.

What is the difference between HEX, RGB, HSL, and CMYK?

HEX (#RRGGBB) is a 6-digit hexadecimal code used in CSS and most design tools. RGB (red, green, blue) defines colour by mixing three light channels from 0–255. HSL (hue, saturation, lightness) makes it intuitive to create colour variations by adjusting a single value. CMYK (cyan, magenta, yellow, black) is used in print design, defining ink percentages for physical printing. For web design, HEX and RGB are most common. For print, CMYK is required.

What image formats does the Base64 converter support?

The Image to Base64 Converter supports: JPEG (.jpg, .jpeg), PNG (.png), GIF (.gif), SVG (.svg), and WebP (.webp). Each format produces a correctly typed data URI (e.g. data:image/png;base64,... for PNG files).

How does the Base64 to Image Decoder work?

Paste a Base64 string (with or without the data:image/...;base64, prefix) into the decoder. The tool renders the image visually, shows the resolution (width × height in pixels) and decoded file size, and provides a download button. It also detects and helps clean common issues like extra whitespace or line breaks in the Base64 string.

How does the color palette generator extract colors?

The Color Palette Generator uses a colour quantization algorithm (similar to k-means clustering) to analyse pixel data across the uploaded image and identify the most visually dominant and representative colours. You can also use the manual eyedropper tool to click any specific pixel in the image to get its exact colour code.

Are these image tools free?

Yes. All 3 image tools are 100% free with no registration, subscription, or payment required.

Are my images private?

Yes. All image processing runs entirely in your browser using the Canvas API and FileReader. Your images are never uploaded to any server, never stored, and never transmitted. This applies to all three tools including the colour palette generator.

How do I pick a color from my screen online?

Click the "Pick from Screen" button in this tool. Your cursor becomes an eyedropper. Hover over any pixel on your screen — in any tab, image, or app — and click to sample it. The HEX, RGB, HSL, and CMYK values appear instantly. This uses the browser's native EyeDropper API and works in Chrome, Edge, and Opera.

What is the EyeDropper API?

The EyeDropper API is a browser standard introduced in Chrome 95 that lets web pages request a screen color sample from the user. When activated, the browser shows a magnified eyedropper cursor. The user clicks any pixel on screen — in any open tab or application — and the browser returns the color to the web page. No permissions are required beyond the user clicking.

Which browsers support the EyeDropper (pick from screen)?

The EyeDropper API is supported in Chrome 95+, Edge 95+, and Opera 81+. It is not currently supported in Firefox or Safari. On unsupported browsers, you can still use the visual color picker, manual HEX/RGB/HSL input, and pick colors from an uploaded image.

How do I pick a color from an image?

Click "Pick from Image" and upload any JPG, PNG, or WebP file. The image loads into the tool. Hover over it to see a magnified preview of the pixels under your cursor, and click to sample any color.

How do I convert HEX to RGB?

Paste your HEX code into the HEX input field. The tool instantly converts it and shows the RGB, HSL, HSB, and CMYK equivalents. You can also type any RGB value in the RGB field and all other formats update automatically.

What is the WCAG contrast checker?

WCAG (Web Content Accessibility Guidelines) defines minimum contrast ratios between text and background to ensure readability for users with visual impairments. AA requires a ratio of at least 4.5:1 for normal text. AAA requires 7:1. This tool calculates the contrast ratio between your picked color and white or black and shows whether it passes AA or AAA.

What is the difference between HSL and HSB/HSV?

Both use Hue and Saturation but differ in the third component. HSL (Lightness) defines 50% as the "pure" color and goes to white at 100%. HSB/HSV (Brightness/Value) defines 100% as the pure color and goes to black at 0%. HSL is used in CSS. HSB/HSV is used in most design applications like Adobe Photoshop and Illustrator.

Can I export my color history as CSS variables?

Yes. Click "Export Palette" and choose CSS Variables, JSON, or SCSS. The CSS Variables export generates a :root {} block with each color as a --color-n variable. The JSON export gives an array of color objects with all format values. The SCSS export generates $color-n variable declarations.

Back to Image Tools

Color Picker & Eyedropper

Pick any color from your screen or an image. Get HEX, RGB, HSL, CMYK, and CSS values instantly — free, no sign-up.

Visual Picker

HEX

Color Values

HEX#6366F1

RGBrgb(99, 102, 241)

HSLhsl(239, 84%, 67%)

HSBhsb(239, 59%, 95%)

CMYKcmyk(59%, 58%, 0%, 5%)

CSS RGBrgb(99 102 241)

CSS HSLhsl(239deg 84% 67%)

WCAG Contrast

Sample Text — #6366F1

4.47:1 contrast ratio

✗

AA Normal

≥ 4.5:1

✓

AA Large

≥ 3:1

✗

AAA Normal

≥ 7:1

Shades, Tints & Complement

Shades (darker)

Tints (lighter)

Complementary

#F2EF64

Support Our Free Tools

If you find this calculator helpful, please consider supporting our work. Your contribution helps us build and maintain these free tools for everyone.

Buy me a coffee

Free Color Picker & Eyedropper — Pick Any Color from Screen or Image

Texterfly's Color Picker is the fastest way to sample, identify, and convert any color — from your screen, an uploaded image, or typed manually. Click Pick from Screen and the browser's native EyeDropper lets you click any pixel anywhere on your monitor — in a website, Figma file, photo, or desktop app — and instantly shows you the HEX, RGB, HSL, HSB, CMYK, and CSS values.

Every picked color is saved to your history as a clickable swatch. Star favorites to pin them, then export your palette as CSS custom properties, SCSS variables, or JSON in one click. The built-in WCAG contrast checker tells you instantly whether your color meets accessibility standards against white or black backgrounds.

Color Format Reference

Format	Example	Used In	Range
HEX	#6366F1	CSS, HTML, SVG, design tools	000000–FFFFFF
RGB	rgb(99, 102, 241)	CSS, canvas, image processing	0–255 per channel
HSL	hsl(239, 84%, 67%)	CSS, design, theming	H:0–360, S/L:0–100%
HSB/HSV	hsb(239, 59%, 95%)	Adobe Photoshop, Illustrator, Figma	H:0–360, S/B:0–100%
CMYK	cmyk(59%, 58%, 0%, 5%)	Print design, offset printing	0–100% per channel
CSS HSL	hsl(239deg 84% 67%)	CSS Color Level 4	Same as HSL

Features

🎯

EyeDropper API

Sample any pixel from any tab or app on your screen. Uses the browser's native EyeDropper API — no extension, no permission dialog, just click.

🖼️

Pick from Image

Upload any image and click any pixel to sample its color. The canvas renders the full image at up to 600×400px for accurate sampling.

🎨

Visual HSL Picker

Drag in the saturation/lightness square and drag the hue slider to pick any color visually. All format outputs update in real time.

📋

All Formats — One Click Copy

HEX, RGB, HSL, HSB, CMYK, CSS rgb(), CSS hsl(), and named color — each with its own copy button. No hunting for the right value.

♿

WCAG Contrast Checker

Instantly see if your color passes WCAG AA or AAA against white or black. A preview shows exactly how text looks on that background.

🌈

Shades, Tints & Complement

5 shades (toward black), 5 tints (toward white), and the complementary color. Click any to make it the active color.

🕐

Color History & Favorites

Last 20 picked colors are saved as swatches. Star any to pin it. Click any swatch to restore that color.

📤

Export as CSS, SCSS, or JSON

Export your full color history as CSS custom properties (:root {}), SCSS variables, or a structured JSON array with all format values.

Frequently Asked Questions

How do I find the color code of anything on my screen?

Click "Pick from Screen" in this tool. Your cursor becomes a magnified eyedropper. Hover over any element on any open tab or desktop application, and click. The HEX, RGB, and all other codes appear instantly. This uses the browser's EyeDropper API — no extension needed.

Can I pick a color from a photo or image?

Yes. Click "Pick from Image" and upload any JPG, PNG, or WebP file. The image renders in the tool. Click any pixel to sample its exact color. This works on all browsers, including Firefox and Safari.

What is the difference between HSL and HSB?

Both use Hue and Saturation. The third value differs: HSL's Lightness is 50% for a pure color and reaches white at 100%. HSB's Brightness (also called Value) is 100% for a pure color and reaches black at 0%. HSL is used in CSS. HSB is used in Photoshop, Illustrator, and most design apps.

What WCAG contrast ratio do I need to pass accessibility?

WCAG 2.1 defines three levels. AA (most sites aim for this): 4.5:1 for normal text, 3:1 for large text (18pt+ or 14pt+ bold). AAA (stricter): 7:1 for normal text, 4.5:1 for large text. Check your text color against your background color to ensure compliance.

How do I convert a HEX code to RGB or HSL?

Type or paste your HEX code into the HEX input field. All other formats — RGB, HSL, HSB, CMYK, CSS values — update instantly. Use the copy button next to whichever format you need.

Explore All Tools

95 free tools — no signup required

All 95 tools are free · No signup · No ads