Social Media Colors – Official Brand Codes

What This Social Media Colors Reference Is and How to Use It

Matching a brand's exact color is the difference between a design that looks official and one that looks off. This reference gives you the verified primary hex and RGB codes for the biggest social media platforms — Facebook, YouTube, Instagram, X, WhatsApp, LinkedIn, TikTok, Snapchat, Pinterest, Reddit, Telegram, Discord, Twitch, Spotify, Google, and more — sourced from official brand guidelines. Each swatch shows the color, its hex value, and its RGB value, and a single click copies whichever code you need. Designers and developers reach for these constantly. Building a share bar, a footer with social icons, a call-to-action button, or a marketing graphic all go smoother when you can grab the correct brand color instantly instead of eyedropping a logo or guessing. Using the right value keeps icons recognizable and on-brand, which matters for trust and polish. Copy the hex for CSS and design tools, or the RGB string when you need it for gradients, opacity, or environments that expect rgb values. Here is how a lookup actually goes, and where the two formats come from. Click Facebook and you get hex #1877F2 alongside rgb(24, 119, 242). Those are the same colour written two ways: hex pairs are base-16, so 18 is 1×16 + 8 = 24, 77 is 7×16 + 7 = 119, and F2 is 15×16 + 2 = 242. YouTube is the simplest case — #FF0000 is rgb(255, 0, 0), full red with green and blue at zero. Click X and you get #000000, pure black, with the legacy Twitter blue #1DA1F2 shown beside it for older projects. Knowing the conversion is genuinely useful: when you need a translucent overlay you cannot use hex alone in older CSS, so you reach for rgba(24, 119, 242, 0.15) and the numbers are already there. The cases are practical. A developer building a share row needs six exact brand colours in one CSS file and cannot ship an eyedropped approximation that looks slightly wrong beside the real icon. A designer producing a client's contact page in Figma needs the same values the developer will use, or the handoff drifts. An agency assembling a pitch deck with platform logos wants the accents to match the marks. A marketer writing an email template needs inline hex codes because email clients strip most stylesheets. A few of these deserve a note because brands have evolved. X, formerly Twitter, now uses black (#000000) as its primary brand color, though the classic Twitter blue (#1DA1F2) is still widely recognized and included here for legacy work. Instagram is often shown as a colorful gradient, but its solid primary brand color is a magenta (#C32AA3); the gradient is built from several accent colors layered together. TikTok's core is near-black with its signature cyan and red accents. When a brand offers a full palette, the single primary color shown here is the safest default for icons and accents. One practical reminder: platforms update their branding from time to time, and these values reflect current official guidelines at the time of writing. For a high-stakes project, it is always worth confirming against the platform's own brand resource page. Also remember these colors and logos are trademarks of their respective owners — use them to represent the brands accurately, not to imply endorsement. Everything here runs locally in your browser, so you can copy as many codes as you need, instantly and for free, with nothing uploaded. The mistake that shows up in real builds is using a brand colour as a background and then putting white text on it: several of these, including YouTube red and Facebook blue, fall short of the WCAG contrast ratio for normal-size white text, so the label looks fine to you and is unreadable to someone with low vision. Check the pairing rather than assuming a brand colour is accessible. And do not recolour a platform's mark to fit your palette — most brand guidelines forbid it, and a tinted logo is the fastest way to make a professional page look unofficial.

🔥 Trending Tools