Gaming & Creator ToolsLive🔒 Private

Brand Color Palette for Social

Build and export a brand color palette for social media. Free online brand palette tool. No signup, 100% private, browser-based.

Quick social palette suggestion for consistent cover, thumbnail, and CTA styling.

#0f172a

#1d4ed8

#06b6d4

#f59e0b

#ef4444

How it works

Brand consistency across social media means using the exact same hex codes on every post, graphic, and Reel. The Brand Color Palette for Social lets you enter up to 12 brand hex codes, name each colour (Primary, Secondary, Accent, Background, Text), and generate a one-click CSS snippet, a Figma/Canva-ready colour grid image, and a copy-paste swatch panel — so your colours are always accessible without hunting through brand guidelines.

How to use: 1. Add your brand colours — enter each hex code and give it a name. 2. The palette renders as a visual swatch grid with hex code labels. 3. Export options: - PNG swatch card: a downloadable image with colour blocks and labels — paste into your Canva brand kit, Notion brand board, or team Slack - CSS variables snippet: custom properties like --color-primary: #1A1A2E; — copy into your stylesheet - Tailwind config snippet: custom colour object for tailwind.config.js - Figma import: hex codes formatted for the Figma colour styles import flow

Colour combination checker: - Enter a foreground/background pair to check WCAG contrast ratio (accessible design requirement) - Highlights which combinations meet AA (4.5:1 for body text) and AAA (7:1) standards

Platform export sizes: the swatch PNG is sized at 1200x628px — the exact dimensions for a LinkedIn post image — so you can share the brand palette as a LinkedIn post or brand announcement.

Privacy: all colour processing runs in the browser. No data is transmitted.

Frequently Asked Questions

How many brand colours is too many?
A functional brand palette for social media needs 3–5 colours: 1 primary, 1 secondary, 1 accent, and 1–2 neutrals (a light and dark). More than 7 brand colours creates visual inconsistency when used across social posts — designers and VAs will make different choices about which colour to use, and the feed loses cohesion. If your full brand guide has 12+ colours, create a 'social-only' subset of 4–5.
What WCAG contrast ratio do I need for accessible social graphics?
WCAG 2.1 Level AA requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text (18pt+) against the background. Level AAA requires 7:1 for normal text. For social media graphics, Level AA is the practical target. The contrast checker in this tool shows the ratio — ratios below 3:1 are flagged as failing even large text accessibility.
How do I find my exact brand hex codes from an existing logo?
If you have the original logo file (AI, EPS, SVG, or PDF): open it in Illustrator or Inkscape, click a colour area, and read the hex code from the colour picker. If you only have a PNG or JPG: upload the logo to this tool's Palette Extractor (a related tool) which samples the dominant colours. For web-based brands, use your browser's DevTools colour picker on the brand website.
Can I export my brand palette as a Figma library?
The tool exports hex codes in the format used by Figma's colour styles import. In Figma, go to the team file, open Plugins, and use a colour import plugin (such as 'Batch Styler' or 'Design Tokens') to import the exported JSON or text file. This creates local styles for each brand colour — team members can then apply brand colours from the styles panel without manually entering hex codes.