Telegram color palette
SocialTelegram's color system centers around its distinctive blue, complemented by cool grays and white for a clean, modern interface. The palette is consistent across its app and web platforms, emphasizing clarity and simplicity.
telegram.orgTelegram colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- Telegram BluePrimary38, 165, 228
- Telegram Deep BlueSecondary0, 136, 204
- Telegram Green AccentAccent52, 195, 159
Surfaces
Page, cards and dividers.- Telegram WhiteBackground255, 255, 255
- Telegram Light GraySurface243, 246, 249
- Telegram Border GrayBorder227, 232, 235
Text
Three tiers of copy.- Telegram Primary TextText34, 45, 58
- Telegram Secondary TextSecondary text109, 120, 133
- Telegram Muted TextMuted text160, 176, 188
Semantic
Feedback and state colors.- Telegram Success GreenSuccess52, 195, 159
- Telegram Warning YellowWarning255, 213, 79
- Telegram Error RedError229, 57, 53
- Telegram Info BlueInfo38, 165, 228
Use Telegram's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
telegram-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #26A5E4;
--error: #E53935;
--accent: #34C39F;
--border: #E3E8EB;
--primary: #26A5E4;
--success: #34C39F;
--surface: #F3F6F9;
--warning: #FFD54F;
--secondary: #0088CC;
--text-muted: #A0B0BC;
--background: #FFFFFF;
--text-primary: #222D3A;
--text-secondary: #6D7885;
}Contrast and accessibility
Every text tone tested against every surface, per WCAG 2.1.
Text on background
Needs 4.5:1 for body text
14.0:1
Pass
Text on surface
Needs 4.5:1 for body text
12.9:1
Pass
Secondary text on background
Needs 4.5:1 for body text
4.5:1
Fail
Secondary text on surface
Needs 4.5:1 for body text
4.1:1
Fail
Muted text on background
Needs 3:1 for large text
2.2:1
Fail
Muted text on surface
Needs 3:1 for large text
2.1:1
Fail
Telegram background, border and text colors
The quiet part of the Telegram palette: page background, card surfaces, dividers and the three text tones that sit on them. Click a value to copy it.
- Telegram WhiteBackground
- HEX
- RGB
- HSL
- Telegram Light GraySurface
- HEX
- RGB
- HSL
- Telegram Border GrayBorder
- HEX
- RGB
- HSL
- Telegram Primary TextText
- HEX
- RGB
- HSL
- Telegram Secondary TextSecondary text
- HEX
- RGB
- HSL
- Telegram Muted TextMuted text
- HEX
- RGB
- HSL
About Telegram's colors
Telegram's palette is based on a vibrant blue, supported by neutral grays and white for maximum readability and a modern look. The colors are chosen for clarity, trust, and ease of use.
Primary blue is complemented by deep blue for emphasis.
Neutral grays provide contrast for text and UI elements.
Accent green is used for positive actions and status.
Psychology
Blue conveys trust, reliability, and communication, aligning with Telegram's messaging focus. The use of white and gray supports a clean, distraction-free experience.
Evolution
Telegram's palette has remained stable since launch, with minor adjustments to gray tones for improved accessibility. The primary blue has consistently defined the brand's identity.
Where Telegram uses each color
- Primary
Used for main buttons, highlights, and the app icon background.
- Secondary
Appears in headers, selected states, and secondary buttons.
- Accent
Used for success states, notifications, and active elements.
- Backgrounds
White and light gray are used for main app screens and chat backgrounds.
- Text
Primary and secondary text colors are used throughout the app for readability.
- Semantic
Success, warning, and error colors indicate message status and alerts.
Telegram color questions
Hex codes, RGB values, neutrals and how to use the palette.
The official Telegram primary color is #26A5E4. This blue is used prominently in the app and branding.
Telegram Blue (#26A5E4) is RGB(38, 165, 228) and CMYK(83, 28, 0, 11). These values ensure color consistency across media.
Telegram uses #F3F6F9 for light gray surfaces and #E3E8EB for borders. These neutrals provide a clean, modern backdrop for content.
Use #26A5E4 for primary actions and branding, with grays and whites for backgrounds and surfaces. Accent and semantic colors are reserved for status, alerts, and highlights.
The secondary color is Telegram Deep Blue, #0088CC, and the accent is Telegram Green Accent, #34C39F. Together with the primary they make up the three brand colors at the top of this page.
2 of 6 text and background pairings meet WCAG 2.1 AA contrast. The contrast section above shows every pairing with its exact ratio.
Use the export block on this page. It gives you CSS custom properties, a Tailwind config, W3C design tokens or a shadcn/ui theme built from these exact hex values, with copy and download buttons.
Yes. Export the Claude Code skill, Cursor rules or Codex prompt from the same block. The agent then applies Telegram's colors consistently when it generates UI.
Make something in the spirit of Telegram
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.