From an image to a palette
Start with an image that already has the feel you want: a landscape, an interior, a product shot or a piece of artwork. The generator finds its main colors and lists them by how much of the image they cover. That order is a useful starting point for roles. The first swatch is often a background or large surface and works as a base or neutral, while the smaller ones later in the list make natural accents.
Because the palette comes from real proportions in the picture, it tends to feel balanced when used in similar proportions: lots of the base, a little of the accent.
Turning swatches into a usable UI palette
A palette for a website or app needs roles more than a long list of colors: a background, a surface for cards, a text color, and one or two accents for buttons and links. Pick candidates from the generated swatches, then check text against its background for contrast. The WCAG guideline for normal body text is a contrast ratio of at least 4.5:1.
Click any swatch to see its HSL value. Keeping the hue and saturation while changing the lightness is the simplest way to make tints and shades, such as a lighter hover state or a darker border, that still belong to the same family.
The CSS output
Copy palette as CSS gives you a :root block with one custom property per color, from --color-1 for the most common to the last. Paste it at the top of a stylesheet, rename the variables to roles like --brand or --surface, and refer to them with var(). The same HEX codes paste straight into design apps, presentation themes and configuration files.