Instantly share code, notes, and snippets.
Created
December 5, 2025 14:13
-
Star
1
(1)
You must be signed in to star a gist -
Fork
0
(0)
You must be signed in to fork a gist
-
-
Save miztizm/a353d616ef2aa7b7a517f7774bd53945 to your computer and use it in GitHub Desktop.
Social Media Brand Colors - Complete CSS reference with 25+ platforms, HEX codes, RGB values, and utility classes
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /** | |
| * Social Media Brand Colors CSS | |
| * | |
| * Official brand colors for all major social media platforms | |
| * Includes HEX codes, RGB values, and Font Awesome icon classes | |
| * | |
| * Version: 2.0 | |
| * Last Updated: December 2025 | |
| * Usage: Add class="social-icon social-[platform]" to apply styling | |
| */ | |
| /* ============================================ | |
| ROOT VARIABLES - Social Media Colors | |
| ============================================ */ | |
| :root { | |
| /* Primary Social Media Colors */ | |
| --color-facebook: #1877f2; | |
| --color-facebook-rgb: 24, 119, 242; | |
| --color-instagram: #e1306c; | |
| --color-instagram-rgb: 225, 48, 108; | |
| --color-x: #000000; | |
| --color-x-rgb: 0, 0, 0; | |
| --color-tiktok: #25f4ee; | |
| --color-tiktok-secondary: #fe2c55; | |
| --color-tiktok-rgb: 37, 244, 238; | |
| --color-youtube: #ff0000; | |
| --color-youtube-rgb: 255, 0, 0; | |
| --color-telegram: #0088cc; | |
| --color-telegram-rgb: 0, 136, 204; | |
| --color-linkedin: #0a66c2; | |
| --color-linkedin-rgb: 10, 102, 194; | |
| --color-twitter-legacy: #1da1f2; | |
| --color-twitter-legacy-rgb: 29, 161, 242; | |
| --color-vk: #0077ff; | |
| --color-vk-rgb: 0, 119, 255; | |
| --color-whatsapp: #25d366; | |
| --color-whatsapp-rgb: 37, 211, 102; | |
| --color-snapchat: #fffc00; | |
| --color-snapchat-rgb: 255, 252, 0; | |
| --color-pinterest: #e60023; | |
| --color-pinterest-rgb: 230, 0, 35; | |
| --color-reddit: #ff4500; | |
| --color-reddit-rgb: 255, 69, 0; | |
| --color-twitch: #9146ff; | |
| --color-twitch-rgb: 145, 70, 255; | |
| --color-discord: #5865f2; | |
| --color-discord-rgb: 88, 101, 242; | |
| --color-mastodon: #6364ff; | |
| --color-mastodon-rgb: 99, 100, 255; | |
| --color-bluesky: #1185fe; | |
| --color-bluesky-rgb: 17, 133, 254; | |
| --color-threads: #000000; | |
| --color-threads-rgb: 0, 0, 0; | |
| --color-github: #333333; | |
| --color-github-rgb: 51, 51, 51; | |
| --color-gitlab: #fc6d26; | |
| --color-gitlab-rgb: 252, 109, 38; | |
| --color-medium: #000000; | |
| --color-medium-rgb: 0, 0, 0; | |
| --color-substack: #ff6719; | |
| --color-substack-rgb: 255, 103, 25; | |
| --color-tumblr: #36465d; | |
| --color-tumblr-rgb: 54, 70, 93; | |
| --color-dribbble: #ea4c89; | |
| --color-dribbble-rgb: 234, 76, 137; | |
| --color-behance: #0066ff; | |
| --color-behance-rgb: 0, 102, 255; | |
| --color-patreon: #ff424d; | |
| --color-patreon-rgb: 255, 66, 77; | |
| --color-ko-fi: #13c3ff; | |
| --color-ko-fi-rgb: 19, 195, 255; | |
| /* Spacing */ | |
| --social-icon-size: 40px; | |
| --social-icon-border-radius: 6px; | |
| --social-transition: all 0.3s ease; | |
| } | |
| /* ============================================ | |
| BASE SOCIAL ICON STYLES | |
| ============================================ */ | |
| .social-icon { | |
| display: inline-flex; | |
| align-items: center; | |
| justify-content: center; | |
| width: var(--social-icon-size); | |
| height: var(--social-icon-size); | |
| border-radius: var(--social-icon-border-radius); | |
| color: white; | |
| text-decoration: none; | |
| transition: var(--social-transition); | |
| font-size: 20px; | |
| } | |
| .social-icon:hover { | |
| transform: translateY(-4px); | |
| box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); | |
| } | |
| /* ============================================ | |
| INDIVIDUAL PLATFORM STYLES | |
| ============================================ */ | |
| /* Facebook */ | |
| .social-facebook { | |
| background-color: var(--color-facebook); | |
| } | |
| .social-facebook:hover { | |
| background-color: #165ec7; | |
| } | |
| /* Instagram */ | |
| .social-instagram { | |
| background: linear-gradient( | |
| 45deg, | |
| #f9ce34, | |
| #ee2a7b, | |
| #6228d7 | |
| ); | |
| } | |
| .social-instagram:hover { | |
| filter: brightness(0.9); | |
| } | |
| /* X (formerly Twitter) */ | |
| .social-x { | |
| background-color: var(--color-x); | |
| } | |
| .social-x:hover { | |
| background-color: #1a1a1a; | |
| } | |
| /* TikTok */ | |
| .social-tiktok { | |
| background: linear-gradient( | |
| 135deg, | |
| var(--color-tiktok), | |
| var(--color-tiktok-secondary) | |
| ); | |
| } | |
| .social-tiktok:hover { | |
| filter: brightness(0.95); | |
| } | |
| /* YouTube */ | |
| .social-youtube { | |
| background-color: var(--color-youtube); | |
| } | |
| .social-youtube:hover { | |
| background-color: #cc0000; | |
| } | |
| /* Telegram */ | |
| .social-telegram { | |
| background-color: var(--color-telegram); | |
| } | |
| .social-telegram:hover { | |
| background-color: #0070b8; | |
| } | |
| /* LinkedIn */ | |
| .social-linkedin { | |
| background-color: var(--color-linkedin); | |
| } | |
| .social-linkedin:hover { | |
| background-color: #095195; | |
| } | |
| /* VK (VKontakte) */ | |
| .social-vk { | |
| background-color: var(--color-vk); | |
| } | |
| .social-vk:hover { | |
| background-color: #0064e0; | |
| } | |
| /* WhatsApp */ | |
| .social-whatsapp { | |
| background-color: var(--color-whatsapp); | |
| } | |
| .social-whatsapp:hover { | |
| background-color: #1fa85a; | |
| } | |
| /* Snapchat */ | |
| .social-snapchat { | |
| background-color: var(--color-snapchat); | |
| color: #000000; | |
| } | |
| .social-snapchat:hover { | |
| background-color: #f5f200; | |
| } | |
| /* Pinterest */ | |
| .social-pinterest { | |
| background-color: var(--color-pinterest); | |
| } | |
| .social-pinterest:hover { | |
| background-color: #c40010; | |
| } | |
| /* Reddit */ | |
| .social-reddit { | |
| background-color: var(--color-reddit); | |
| } | |
| .social-reddit:hover { | |
| background-color: #ff5722; | |
| } | |
| /* Twitch */ | |
| .social-twitch { | |
| background-color: var(--color-twitch); | |
| } | |
| .social-twitch:hover { | |
| background-color: #7c3aed; | |
| } | |
| /* Discord */ | |
| .social-discord { | |
| background-color: var(--color-discord); | |
| } | |
| .social-discord:hover { | |
| background-color: #4752c4; | |
| } | |
| /* Mastodon */ | |
| .social-mastodon { | |
| background-color: var(--color-mastodon); | |
| } | |
| .social-mastodon:hover { | |
| background-color: #5b5cce; | |
| } | |
| /* Bluesky */ | |
| .social-bluesky { | |
| background-color: var(--color-bluesky); | |
| } | |
| .social-bluesky:hover { | |
| background-color: #0d7dd4; | |
| } | |
| /* Threads */ | |
| .social-threads { | |
| background-color: var(--color-threads); | |
| } | |
| .social-threads:hover { | |
| background-color: #1a1a1a; | |
| } | |
| /* GitHub */ | |
| .social-github { | |
| background-color: var(--color-github); | |
| } | |
| .social-github:hover { | |
| background-color: #1a1a1a; | |
| } | |
| /* GitLab */ | |
| .social-gitlab { | |
| background-color: var(--color-gitlab); | |
| } | |
| .social-gitlab:hover { | |
| background-color: #dd5a09; | |
| } | |
| /* Medium */ | |
| .social-medium { | |
| background-color: var(--color-medium); | |
| } | |
| .social-medium:hover { | |
| background-color: #1a1a1a; | |
| } | |
| /* Substack */ | |
| .social-substack { | |
| background-color: var(--color-substack); | |
| } | |
| .social-substack:hover { | |
| background-color: #ff5500; | |
| } | |
| /* Tumblr */ | |
| .social-tumblr { | |
| background-color: var(--color-tumblr); | |
| } | |
| .social-tumblr:hover { | |
| background-color: #2a3a4d; | |
| } | |
| /* Dribbble */ | |
| .social-dribbble { | |
| background-color: var(--color-dribbble); | |
| } | |
| .social-dribbble:hover { | |
| background-color: #d63371; | |
| } | |
| /* Behance */ | |
| .social-behance { | |
| background-color: var(--color-behance); | |
| } | |
| .social-behance:hover { | |
| background-color: #0052cc; | |
| } | |
| /* Patreon */ | |
| .social-patreon { | |
| background-color: var(--color-patreon); | |
| } | |
| .social-patreon:hover { | |
| background-color: #ff3833; | |
| } | |
| /* Ko-Fi */ | |
| .social-ko-fi { | |
| background-color: var(--color-ko-fi); | |
| } | |
| .social-ko-fi:hover { | |
| background-color: #00b0ff; | |
| } | |
| /* ============================================ | |
| UTILITY CLASSES | |
| ============================================ */ | |
| /* Size Variations */ | |
| .social-icon--sm { | |
| --social-icon-size: 32px; | |
| font-size: 16px; | |
| } | |
| .social-icon--lg { | |
| --social-icon-size: 48px; | |
| font-size: 24px; | |
| } | |
| .social-icon--xl { | |
| --social-icon-size: 64px; | |
| font-size: 32px; | |
| } | |
| /* Square Style */ | |
| .social-icon--square { | |
| --social-icon-border-radius: 0; | |
| } | |
| /* Rounded Style (pill-shaped) */ | |
| .social-icon--rounded { | |
| --social-icon-border-radius: 50%; | |
| } | |
| /* Outline Style */ | |
| .social-icon--outline { | |
| background-color: transparent; | |
| border: 2px solid currentColor; | |
| } | |
| .social-icon--outline.social-facebook { | |
| color: var(--color-facebook); | |
| border-color: var(--color-facebook); | |
| } | |
| .social-icon--outline.social-instagram { | |
| color: var(--color-instagram); | |
| border-color: var(--color-instagram); | |
| } | |
| .social-icon--outline.social-x { | |
| color: var(--color-x); | |
| border-color: var(--color-x); | |
| } | |
| .social-icon--outline.social-tiktok { | |
| color: var(--color-tiktok); | |
| border-color: var(--color-tiktok); | |
| } | |
| .social-icon--outline.social-youtube { | |
| color: var(--color-youtube); | |
| border-color: var(--color-youtube); | |
| } | |
| .social-icon--outline.social-telegram { | |
| color: var(--color-telegram); | |
| border-color: var(--color-telegram); | |
| } | |
| .social-icon--outline.social-linkedin { | |
| color: var(--color-linkedin); | |
| border-color: var(--color-linkedin); | |
| } | |
| /* Text Only (No Background) */ | |
| .social-icon--text { | |
| background-color: transparent; | |
| font-size: 24px; | |
| width: auto; | |
| height: auto; | |
| padding: 0; | |
| } | |
| .social-icon--text.social-facebook { | |
| color: var(--color-facebook); | |
| } | |
| .social-icon--text.social-instagram { | |
| color: var(--color-instagram); | |
| } | |
| .social-icon--text.social-x { | |
| color: var(--color-x); | |
| } | |
| .social-icon--text.social-tiktok { | |
| color: var(--color-tiktok); | |
| } | |
| .social-icon--text.social-youtube { | |
| color: var(--color-youtube); | |
| } | |
| .social-icon--text.social-telegram { | |
| color: var(--color-telegram); | |
| } | |
| .social-icon--text.social-linkedin { | |
| color: var(--color-linkedin); | |
| } | |
| /* No Hover Effect */ | |
| .social-icon--no-hover:hover { | |
| transform: none; | |
| box-shadow: none; | |
| } | |
| /* ============================================ | |
| LAYOUT HELPERS | |
| ============================================ */ | |
| /* Social Icons Container */ | |
| .social-icons { | |
| display: flex; | |
| gap: 12px; | |
| flex-wrap: wrap; | |
| align-items: center; | |
| } | |
| .social-icons--centered { | |
| justify-content: center; | |
| } | |
| .social-icons--spaced { | |
| justify-content: space-between; | |
| } | |
| /* ============================================ | |
| ANIMATION CLASSES | |
| ============================================ */ | |
| @keyframes bounce { | |
| 0%, 100% { | |
| transform: translateY(0); | |
| } | |
| 50% { | |
| transform: translateY(-8px); | |
| } | |
| } | |
| @keyframes pulse { | |
| 0%, 100% { | |
| opacity: 1; | |
| } | |
| 50% { | |
| opacity: 0.7; | |
| } | |
| } | |
| .social-icon--bounce:hover { | |
| animation: bounce 0.6s ease-in-out; | |
| } | |
| .social-icon--pulse { | |
| animation: pulse 2s ease-in-out infinite; | |
| } | |
| /* ============================================ | |
| COLOR REFERENCE TABLE | |
| ============================================ */ | |
| /* | |
| Platform | HEX | RGB | Icon Class | |
| -------------------|-----------|------------------|------------------ | |
| Facebook | #1877f2 | 24, 119, 242 | fab fa-facebook | |
| Instagram | #e1306c | 225, 48, 108 | fab fa-instagram | |
| X (Twitter) | #000000 | 0, 0, 0 | fab fa-x-twitter | |
| TikTok | #25f4ee | 37, 244, 238 | fab fa-tiktok | |
| YouTube | #ff0000 | 255, 0, 0 | fab fa-youtube | |
| Telegram | #0088cc | 0, 136, 204 | fab fa-telegram | |
| LinkedIn | #0a66c2 | 10, 102, 194 | fab fa-linkedin | |
| VK (VKontakte) | #0077ff | 0, 119, 255 | fab fa-vk | |
| WhatsApp | #25d366 | 37, 211, 102 | fab fa-whatsapp | |
| Snapchat | #fffc00 | 255, 252, 0 | fab fa-snapchat | |
| Pinterest | #e60023 | 230, 0, 35 | fab fa-pinterest | |
| Reddit | #ff4500 | 255, 69, 0 | fab fa-reddit | |
| Twitch | #9146ff | 145, 70, 255 | fab fa-twitch | |
| Discord | #5865f2 | 88, 101, 242 | fab fa-discord | |
| Mastodon | #6364ff | 99, 100, 255 | fab fa-mastodon | |
| Bluesky | #1185fe | 17, 133, 254 | fab fa-bluesky | |
| Threads | #000000 | 0, 0, 0 | fab fa-threads | |
| GitHub | #333333 | 51, 51, 51 | fab fa-github | |
| GitLab | #fc6d26 | 252, 109, 38 | fab fa-gitlab | |
| Medium | #000000 | 0, 0, 0 | fab fa-medium | |
| Substack | #ff6719 | 255, 103, 25 | fab fa-substack | |
| Tumblr | #36465d | 54, 70, 93 | fab fa-tumblr | |
| Dribbble | #ea4c89 | 234, 76, 137 | fab fa-dribbble | |
| Behance | #0066ff | 0, 102, 255 | fab fa-behance | |
| Patreon | #ff424d | 255, 66, 77 | fab fa-patreon | |
| Ko-Fi | #13c3ff | 19, 195, 255 | fab fa-ko-fi | |
| */ |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment