Select an image
Upload a JPG, PNG or WebP file from your device or drag it into the upload area.
Local and private processing
Image Color Picker
Upload an image, generate a dominant color palette and get HEX, RGB and HSL values ready to copy or export.
The file is analyzed directly inside your browser using Canvas and is not sent to SG Hub servers.
◉
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.
Read the Privacy Policy →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.
Frequently asked questions
Questions about the image color picker
Learn how images are processed, which formats are supported and how to use or export the generated palette.
How do I extract colors from an image online?
Select a JPG, PNG or WebP image and the tool will automatically generate a palette containing its dominant colors.
Can I select an exact color from the image?
Yes. Click anywhere on the image to get the color corresponding to that pixel.
Which color codes does the tool display?
The tool displays each color in HEX, RGB and HSL formats.
What are dominant colors?
They are the tones that appear most frequently or best represent the visual composition of an image.
How many colors can I extract?
You can generate an automatic palette containing between 3 and 12 colors.
Can I manually add a color to the palette?
Yes. Select a color from the image and use the option to add it to the palette.
Can I remove colors from the palette?
Yes. Each color includes a button that removes it before copying or exporting the palette.
Can I copy all colors together?
Yes. The tool can copy all HEX values from the palette in one action.
Which export formats are available?
You can download the palette as CSS variables, SCSS variables or a sample Tailwind configuration.
Is the image uploaded to a server?
No. The image is analyzed locally in your browser using Canvas and is not sent to SG Hub.
Which image formats are supported?
The tool supports JPG, PNG and WebP files.
What is the maximum file size?
The tool accepts images up to 20 MB.
Are extracted colors always exact?
Colors selected by clicking correspond to the sampled pixel. The dominant palette is an approximation based on color grouping and sampling.
Can I use the palette to design a website?
Yes. HEX, RGB and HSL values can be used in CSS, design applications, presentations and development tools.
Related tools