Loading…
Loading…
Pick your brand colors and generate a complete design system palette.
Common questions about the Brand Colors.
This tool provides verified brand color palettes for popular companies, frameworks, and services. Search by brand name to get their exact HEX, RGB, and HSL values. Colors are sourced from official brand guidelines and style guides.
Brand colors are factual information and aren't copyrightable, but using them to imply endorsement or affiliation may violate trademark laws. Use them for accurate brand representation in case studies, integrations, or comparative content — not to impersonate the brand.
Take the primary brand color and generate tints (add white) and shades (add black) for a full palette. Use OKLCH color space for perceptually uniform steps. Our color tool can generate these variations automatically from any starting HEX value.
Use HEX (#3b82f6) for CSS and design tools, RGB for programmatic manipulation, HSL for adjusting lightness/saturation, and OKLCH for perceptually uniform palettes. Store brand colors as design tokens or CSS custom properties for easy updates across your project.
One file that carries your tokens as data and your taste as prose, checked into the repo next to the code. What goes in it, what stays out, how to keep it true, and the other DESIGN.md it should not be confused with.
SkillsImplement or edit UI using only the project's tokens for colour, spacing, radius and type. Reads the theme, maps every value, and stops to ask when nothing matches. Lives inside the tokens guide.
WorkflowsWhat the server actually does, the fixed read order, slicing big frames, why Code Connect is the lever, the design-to-code loop, and an operating model with checklists and a scorecard.
PromptsReplaces 'match the design' with a set of allowed moves: read the token file first, no literals, paired inks, and a report of every value that had no token.