Color Palette from URL

Color palette from URL: extract any website's colors

This tool builds a color palette from URL input. Paste a public web address and it reads the page's styles, groups near-duplicate shades and returns the main colors as named swatches. You can copy each one as HEX, RGB or HSL, fine-tune the set, then export it as CSS, SCSS, Tailwind or JSON. It is free and needs no signup.

How to extract a color palette from a website URL

You need only a public page address and one click. The steps below take you from the URL field to a finished export.

1. Type or paste a web address into Website or image URL. If you leave out https://, the tool adds it for you.
2. Press Extract palette. Large sites can take up to 30 seconds while the page and its stylesheets are fetched.
3. Click any swatch to copy its HEX code, or use the small HEX, RGB and HSL buttons under it for other formats.
4. In Refine the Website Palette, drag colors to reorder them, edit a HEX value, remove colors you do not need or use Add color.
5. Pick a tab (CSS, SCSS, Tailwind or JSON) and copy the code, or use the buttons under the results to export a file or download a PNG strip.

This works as a color palette from a website URL generator for any public page. Not sure what to try first? The Try an example chips run the extraction on wikipedia.org, news.ycombinator.com, getbootstrap.com, w3schools.com and github.com.

What the website color extractor reads on each page

The extractor collects colors that a page declares in its own code, not the pixels you see on screen. That makes the results exact HEX values you can reuse, rather than approximations from a screenshot.

• Inline styles and style blocks: colors written directly in the page.
• The theme-color tag: the browser-bar color a site declares for mobile browsers. See the MDN theme-color reference for how it works.
• Linked stylesheets: up to 6 external CSS files are read.
• Image fallback: if a site exposes few CSS colors, the palette is sampled from its share image or icon, and a note tells you so.
• Direct image links: PNG, JPG, WebP, GIF and SVG addresses work too.

Similar shades are merged, and the tool returns up to 10 distinct colors. Only public pages are supported. Private, local and intranet addresses are blocked.

Why does a website color palette return fewer colors?

Sites that paint their interface with JavaScript expose fewer colors in their CSS, so less can be read. Server-rendered pages with regular stylesheets work best. If a result looks thin, take a screenshot and use Palette from Image, which samples the pixels instead.

Website palette results: names, share and WCAG badges

Each swatch shows its HEX code, its share of the page's color usage as a percentage, and a nearest color name with its color family. A weighted strip above the swatches shows the same shares visually, so dominant colors look wide and accents look narrow.

Click the info button on a swatch for full color details. The arrow link opens that color's own page in the library, where you can see more conversions and related shades.

How to read WCAG contrast badges on a color swatch

Every swatch carries two badges that show the contrast ratio of white text and black text placed on that color. The labels follow WCAG 2.2 success criterion 1.4.3: 4.5:1 for normal text (AA), 3:1 for large text and 7:1 for AAA. Ratios are rounded down, never up, before the label is chosen.

Worked example: #1E90FF is rgb(30, 144, 255) and hsl(210, 100%, 56%). White text on it scores 3.23:1, which only passes for large text. Black text scores 6.48:1, which passes AA for normal text. For a full text and background pairing, use the Contrast Checker.

HEX, RGB and HSL values for each extracted color

Each swatch gives you the same color in three notations, so you can paste it wherever your project expects it. HEX is the compact form used in most stylesheets, RGB lists the red, green and blue channels from 0 to 255, and HSL describes hue, saturation and lightness.

Pick the notation that matches the job. HSL is handy when you want to nudge a lightness value up or down, while HEX is easiest to share in a brief. To see the trade-offs in detail, read the HEX vs RGB comparison. All values are in the sRGB color space, which is what browsers use for ordinary CSS colors.

Because the tool reads colors declared in the page's own code, the HEX values you copy come from the site itself. Near-duplicate shades are grouped into one swatch, so you get a short, usable list instead of hundreds of tiny variations.

How to refine and export a website palette

You can reshape the extracted set before you export it. The editable list holds up to 12 colors: drag the grip to reorder, type a new HEX value, remove a swatch or add one. Every export updates as you edit.

The quick actions under the results also include Copy palette (all HEX values at once), Copy CSS, Export CSS, Export JSON, Download PNG, Open palette and Share link. Open palette needs at least 2 colors and sends the first 10 to a custom palette page. Share link copies a URL that restores the palette and its source address. CSS custom properties are explained on MDN.

What can you do with a palette extracted from a website?

• Audit a brand: list every color a company site actually uses, and spot off-brand shades. For a brand-focused view, try Brand Colors from URL.
• Match a client site: pull the exact HEX values before you design an add-on page, email or landing page.
• Start a design system: export CSS variables, then turn them into tokens with the HEX to Design Token Exporter.
• Study references: compare how well-known documentation or news sites balance neutrals and accents.
• Check accessibility early: the white and black badges flag swatches that cannot carry text.
• Convert formats: need CMYK, OKLCH or another model? Send any value to the Color Converter.

Website color extraction tips and common mistakes

• Use the page that shows the styling. A marketing homepage usually exposes more brand colors than a login screen or a single-page app shell.
• Read the percentages. A color with a tiny share may be a one-off border or error state, not a brand color.
• Expect neutrals. White, black and grays often rank high because they appear in text, backgrounds and borders. Remove them if you only want accent colors.
• Do not trust one pass for a full audit. Dark mode, hover states and colors added by scripts may not appear. Re-run on other pages of the same site.
• Name your tokens by role. Rename exported variables to names like primary and surface so they survive a redesign.
• Check contrast before shipping. A pleasant swatch is not automatically readable as text.

Is it okay to reuse a website color palette?

Individual colors are generally free to use as inspiration, but a site's logo, trade dress and overall brand identity can be protected. Extracting a palette to study, to match a client's own site or to start a design is a normal workflow. If you plan to imitate a competitor's complete look, get legal advice first.

To give an extracted palette more range, build lighter and darker steps with the Tailwind Scale Generator. If you only have a screenshot or photo instead of a live page, the Image Color Picker lets you sample exact pixels.