samplecolors

Sample color palettes from your favorite sites.

Share

Steps

Determine the Primary Subject:
Identify the main brand, artist, or creator featured on the page.

Prioritize:
<title> or <h1> tags
Repeated mentions in body text
og:site_name or logo alt text


Extract Color Palette:
If the subject is a visual artist, brand, or musician, infer their signature color palette from:
Album art, artwork, product packaging, social media presence, or brand identity
Use known references or sample images from trusted sources if available

If no identity colors are clear, extract 6 distinct HEX codes from the site’s:
CSS variables
Inline styles
Backgrounds
Favicon
Dominant imagery

Output Format:
css
Copy
Edit
Color Palette for [Subject Name]
1. #HEX – (optional short label, e.g., “Primary Blue”)
2. #HEX
...
Implementation Instructions:

React (Tailwind or styled-components):

Tailwind: Show how to add these to tailwind.config.js and use in classnames
styled-components: Create a theme object with the colors and use them in styled components


SwiftUI:
Add each HEX as a named color in the Xcode Asset Catalog
Show example usage like Color("BrandRed")

You might also like

/seo-desc

Generates an SEO meta description for the page you are on.

@srikat

@srikat

/github-release-notes

Generate release notes from Github PRs.

@kyleledbetter

@kyleledbetter

/how-to-web

Learn to code any webpage.

Team Dia

Team Dia

/copycat

Copies any website or app (and does it better).

Tommy Thomas

Tommy Thomas

/pr-review-summary

Summarizes unresolved GitHub PR comments into an actionable checklist.

@ishaan812

@ishaan812

/microcopy

A copywriter in every text box.

Christopher Greer

Christopher Greer

Power up
your internet

Dreaming about Skills? Tap in.