Color Tools

Color Picker & Palette Generator

Pick colors manually or from an image, generate palettes and copy HEX, RGB, HSL and OKLCH values.

Local browser processing No image upload No account required No third-party color library

Choose a color

#D00C35
HEX —
RGB —
HSL —
OKLCH —

Color Harmonies

Color Variations

UI Color Scale

Text Contrast

Black text sample
Contrast — —
White text sample
Contrast — —

How to choose a color manually

This free color picker lets you explore a color without installing software or creating an account. Open the Color Picker tab and click or drag across the large color field. The horizontal spectrum changes the hue, while the field controls saturation and lightness. You can also type a six-digit HEX value when you already know the exact color you need. The current HEX, RGB, HSL and OKLCH values update together, so you can copy the format that fits your workflow without converting it elsewhere.

The Random button is useful for starting a new direction. In browsers that support the EyeDropper API, Pick from screen can sample a color from another visible window or application. Browser support and the permission prompt for that feature are controlled by your browser and operating system.

Pick an exact color from an image

Switch to Image Color Picker and choose a JPEG, PNG or WebP file. Move across the preview to inspect pixels in the magnified view, then click the image to make that pixel the active color. This is useful for matching a brand color, identifying a color in a photograph or checking a design reference.

The image keeps its proportions in the preview; empty checkerboard space is not part of the photograph and is not included in the palette. Files are limited to 40 MB and 40 megapixels so the browser does not attempt to decode an unsafe amount of image data.

Generate a useful image palette

The image palette summarizes representative colors from the uploaded image. Use the minus and plus controls to choose how many swatches you want, then regenerate the palette. Click any swatch to inspect its exact values and use it as the starting color for harmonies, variations and contrast checks.

A generated palette is a compact visual summary, not a list of every pixel in the image. Small details may therefore be omitted. When a particular object or accent matters, sample it directly from the image instead of relying only on the automatic palette.

HEX, RGB, HSL and OKLCH explained

FormatBest used for
HEXCompact color values in CSS, design handoffs and many graphics applications.
RGBScreen-based work where red, green and blue channel values are required.
HSLAdjusting hue, saturation or lightness in a way that is easy to understand.
OKLCHModern CSS and perceptual color work with more predictable lightness changes.

These formats describe the same active color in different ways. Minor rounding is normal when values are converted between color spaces.

Explore color harmonies

Harmonies arrange colors around the color wheel using established relationships. Analogous colors sit close together and often feel calm. Complementary colors sit opposite each other and create stronger contrast. Split-complementary, triadic, tetradic and square palettes add more choices for illustrations, charts, brands and interfaces.

Treat these results as starting points rather than automatic design decisions. Click a swatch to make it active, then check contrast and adjust its variations for the context in which the color will actually be used.

Build tints, shades, tones and a UI scale

Tints mix the active color toward white, shades move it toward black and tones reduce its intensity. The 50–950 scale creates a broader sequence for interface work, such as light backgrounds, borders, buttons and dark text or states. Click any generated swatch to continue exploring from that color.

The UI scale is generated by this tool and does not copy the palette rules of an external design system. Always review the complete scale in the real interface, especially interactive, disabled and error states.

Check black and white text contrast

The contrast cards compare the active color with black and white text. A result of at least 4.5:1 is marked as passing the WCAG AA threshold used here for normal text. This quick check helps you choose the more readable text color for a button, label or solid background.

Contrast is only one part of accessibility. Text size, font weight, hover and focus states, surrounding colors and the final display can also affect readability.

Copy, download and keep your image private

Copy individual values, export the active palette as CSS or JSON, or download a PNG swatch image. The palette generator is free to use, and image decoding, pixel sampling and palette generation run locally in your browser. Your source image is not uploaded to JernejLetica.com, no account is required and the tool does not need a third-party color library.

Frequently asked questions

Is this color picker free?

Yes. You can choose colors, sample an image and export palettes without an account or subscription.

Can I pick an exact color from an image?

Yes. Click the image to select that pixel. The generated image palette is a representative summary rather than a list of every pixel.

Which image formats are supported?

The Image Color Picker accepts JPEG, PNG and WebP files up to 40 MB and 40 megapixels.

Which color values are shown?

The active color is displayed as HEX, RGB, HSL and OKLCH.

Is my image uploaded?

No. Image decoding, pixel sampling and palette generation run locally in your browser.