Select an image
Upload a JPG, PNG or WebP file from your device or drag it into the upload area.
Free tool
Image Color Picker
Upload an image, generate a dominant color palette and get HEX, RGB and HSL values ready to copy or export.
◉
Upload an image
Drag an image or select a JPG, PNG or WebP file.
Supported formats: JPG, PNG and WebP.
Maximum size: 20 MB.
Click anywhere on the image to identify its color.
How to use the tool
How to extract colors from an image
SG Hub's image color picker analyzes a JPG, PNG or WebP image and generates a palette with its dominant colors. You can also select an exact color by clicking anywhere on the image.
Choose the number of colors
Define how many colors you want to include in the dominant palette.
Extract the palette
Analyze the image to automatically identify its most representative colors.
Select exact colors
Click anywhere on the image to get the HEX, RGB and HSL values of that point.
Copy or export
Copy individual color codes or download the palette as CSS, SCSS or a Tailwind configuration.
What is a color palette?
A color palette is a set of related colors used in a design, visual identity, interface or graphic piece.
Extracting colors from a photograph, illustration or logo makes it easier to reuse its visual style in websites, presentations, posts and brand materials.
The tool generates an approximate selection of dominant colors and also lets you sample exact colors from individual pixels.
How dominant colors are calculated
The image is internally reduced so it can be analyzed quickly without modifying the original file.
Transparent pixels are ignored and similar colors are grouped to avoid repetitive palettes.
Colors very close to black or white may be skipped during automatic analysis to create a more representative palette.
Results may vary depending on lighting, contrast, color variety and image composition.
What HEX, RGB and HSL mean
HEX
Represents a color with six hexadecimal characters. It is one of the most common formats in CSS and web design.
#22D3EERGB
Defines a color using red, green and blue components with values between 0 and 255.
rgb(34, 211, 238)HSL
Describes a color by hue, saturation and lightness, making visual adjustments and variations easier.
hsl(188, 86%, 53%)How to select an exact color
After loading an image, click the point you want to analyze. The tool calculates its position in the original image and reads the color from that pixel. You can then copy it or add it to the palette.
How to create a custom palette
You can combine dominant colors with colors selected manually. If a color already exists in the palette, it will not be added again. You can also remove colors before exporting.
Export formats
CSS
Generates custom properties inside :root that can be used with var(--palette-1).
SCSS
Generates Sass variables such as $palette-1, $palette-2 and the following values.
Tailwind
Generates a configuration example with color names that you can adapt to your project.
Common use cases
- Create a palette from a photograph.
- Get the colors from a logo.
- Design a visual identity.
- Prepare CSS variables for a website.
- Create color combinations for social media.
- Sample colors from an illustration.
- Analyze product colors.
- Create interface themes.
- Get colors for presentations.
- Prepare a Tailwind configuration.
Tips for better results
Use images with good lighting and contrast.
Try different color counts to create a simpler or more detailed palette.
Manually select important colors that are missing from the dominant palette.
Remove very similar tones before exporting.
Check contrast between light and dark colors when using them for text.
Do not rely only on one photograph when defining a complete visual identity.
Accessibility
Color and accessibility
An attractive palette does not guarantee readable text. When using colors in an interface, check the contrast between text and background, especially for buttons, links, forms and primary content.
Privacy
Private browser analysis
The image is analyzed locally with Canvas. The file is not sent to SG Hub or stored on a server.
Limitations
Dominant colors are an approximation calculated from a reduced sample.
Gradient images may contain many similar shades.
Color management may vary slightly between displays and browsers.
A transparent pixel may not provide a visually useful color.
The tool does not replace a professional accessibility or brand identity assessment.
Other image tools
You can prepare the image before extracting its colors by using the cropper, resizer, compressor or format converter.
Related tools