CINXE.COM

<!DOCTYPE html> <html class=""> <head> <meta charset="utf-8"> <title>Accent colors</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta property="description" content="Telegram users and channels can change the accent color and background pattern of their profile page and their messages!"> <meta property="og:title" content="Accent colors"> <meta property="og:image" content=""> <meta property="og:description" content="Telegram users and channels can change the accent color and background pattern of their profile page and their messages!"> <link rel="icon" type="image/svg+xml" href="/img/website_icon.svg?4"> <link rel="apple-touch-icon" sizes="180x180" href="/img/apple-touch-icon.png"> <link rel="icon" type="image/png" sizes="32x32" href="/img/favicon-32x32.png"> <link rel="icon" type="image/png" sizes="16x16" href="/img/favicon-16x16.png"> <link rel="alternate icon" href="/img/favicon.ico" type="image/x-icon" /> <link href="/css/bootstrap.min.css?3" rel="stylesheet"> <link href="/css/telegram.css?241" rel="stylesheet" media="screen"> <style> </style> </head> <body class="preload"> <div class="dev_page_wrap"> <div class="dev_page_head navbar navbar-static-top navbar-tg"> <div class="navbar-inner"> <div class="container clearfix"> <ul class="nav navbar-nav navbar-right hidden-xs"><li class="navbar-twitter"><a href="https://twitter.com/telegram" target="_blank" data-track="Follow/Twitter" onclick="trackDlClick(this, event)"><i class="icon icon-twitter"></i><span> Twitter</span></a></li></ul> <ul class="nav navbar-nav"> <li><a href="//telegram.org/">Home</a></li> <li class="hidden-xs"><a href="//telegram.org/faq">FAQ</a></li> <li class="hidden-xs"><a href="//telegram.org/apps">Apps</a></li> <li class="active"><a href="/api">API</a></li> <li class=""><a href="/mtproto">Protocol</a></li> <li class=""><a href="/schema">Schema</a></li> </ul> </div> </div> </div> <div class="container clearfix"> <div class="dev_page"> <div id="dev_page_content_wrap" class=" "> <div class="dev_page_bread_crumbs"><ul class="breadcrumb clearfix"><li><a href="/api" >API</a></li><i class="icon icon-breadcrumb-divider"></i><li><a href="/api/colors" >Accent colors</a></li></ul></div> <h1 id="dev_page_title">Accent colors</h1> <div id="dev_page_content"> <p>Telegram users and channels can change the accent color and background pattern of their profile page and their messages!</p> <p>Schema:</p> <pre><code><a href='/constructor/peerColor'>peerColor</a>#b54b5acf flags:<a href='/type/%23'>#</a> color:flags.0?<a href='/type/int'>int</a> background_emoji_id:flags.1?<a href='/type/long'>long</a> = <a href='/type/PeerColor'>PeerColor</a>; <a href='/constructor/help.peerColorSet'>help.peerColorSet</a>#26219a58 colors:<a href='/type/Vector%20t'>Vector</a><<a href='/type/int'>int</a>> = <a href='/type/help.PeerColorSet'>help.PeerColorSet</a>; <a href='/constructor/help.peerColorProfileSet'>help.peerColorProfileSet</a>#767d61eb palette_colors:<a href='/type/Vector%20t'>Vector</a><<a href='/type/int'>int</a>> bg_colors:<a href='/type/Vector%20t'>Vector</a><<a href='/type/int'>int</a>> story_colors:<a href='/type/Vector%20t'>Vector</a><<a href='/type/int'>int</a>> = <a href='/type/help.PeerColorSet'>help.PeerColorSet</a>; <a href='/constructor/help.peerColorOption'>help.peerColorOption</a>#adec6ebe flags:<a href='/type/%23'>#</a> hidden:flags.0?<a href='/constructor/true'>true</a> color_id:<a href='/type/int'>int</a> colors:flags.1?<a href='/type/help.PeerColorSet'>help.PeerColorSet</a> dark_colors:flags.2?<a href='/type/help.PeerColorSet'>help.PeerColorSet</a> channel_min_level:flags.3?<a href='/type/int'>int</a> group_min_level:flags.4?<a href='/type/int'>int</a> = <a href='/type/help.PeerColorOption'>help.PeerColorOption</a>; <a href='/constructor/help.peerColorsNotModified'>help.peerColorsNotModified</a>#2ba1f5ce = <a href='/type/help.PeerColors'>help.PeerColors</a>; <a href='/constructor/help.peerColors'>help.peerColors</a>#00f8ed08 hash:<a href='/type/int'>int</a> colors:<a href='/type/Vector%20t'>Vector</a><<a href='/type/help.PeerColorOption'>help.PeerColorOption</a>> = <a href='/type/help.PeerColors'>help.PeerColors</a>; <a href='/constructor/stickerSet'>stickerSet</a>#2dd14edc flags:<a href='/type/%23'>#</a> archived:flags.1?<a href='/constructor/true'>true</a> official:flags.2?<a href='/constructor/true'>true</a> masks:flags.3?<a href='/constructor/true'>true</a> emojis:flags.7?<a href='/constructor/true'>true</a> text_color:flags.9?<a href='/constructor/true'>true</a> channel_emoji_status:flags.10?<a href='/constructor/true'>true</a> creator:flags.11?<a href='/constructor/true'>true</a> installed_date:flags.0?<a href='/type/int'>int</a> id:<a href='/type/long'>long</a> access_hash:<a href='/type/long'>long</a> title:<a href='/type/string'>string</a> short_name:<a href='/type/string'>string</a> thumbs:flags.4?<a href='/type/Vector%20t'>Vector</a><<a href='/type/PhotoSize'>PhotoSize</a>> thumb_dc_id:flags.4?<a href='/type/int'>int</a> thumb_version:flags.4?<a href='/type/int'>int</a> thumb_document_id:flags.8?<a href='/type/long'>long</a> count:<a href='/type/int'>int</a> hash:<a href='/type/int'>int</a> = <a href='/type/StickerSet'>StickerSet</a>; <a href='/constructor/user'>user</a>#83314fca flags:<a href='/type/%23'>#</a> self:flags.10?<a href='/constructor/true'>true</a> contact:flags.11?<a href='/constructor/true'>true</a> mutual_contact:flags.12?<a href='/constructor/true'>true</a> deleted:flags.13?<a href='/constructor/true'>true</a> bot:flags.14?<a href='/constructor/true'>true</a> bot_chat_history:flags.15?<a href='/constructor/true'>true</a> bot_nochats:flags.16?<a href='/constructor/true'>true</a> verified:flags.17?<a href='/constructor/true'>true</a> restricted:flags.18?<a href='/constructor/true'>true</a> min:flags.20?<a href='/constructor/true'>true</a> bot_inline_geo:flags.21?<a href='/constructor/true'>true</a> support:flags.23?<a href='/constructor/true'>true</a> scam:flags.24?<a href='/constructor/true'>true</a> apply_min_photo:flags.25?<a href='/constructor/true'>true</a> fake:flags.26?<a href='/constructor/true'>true</a> bot_attach_menu:flags.27?<a href='/constructor/true'>true</a> premium:flags.28?<a href='/constructor/true'>true</a> attach_menu_enabled:flags.29?<a href='/constructor/true'>true</a> flags2:<a href='/type/%23'>#</a> bot_can_edit:flags2.1?<a href='/constructor/true'>true</a> close_friend:flags2.2?<a href='/constructor/true'>true</a> stories_hidden:flags2.3?<a href='/constructor/true'>true</a> stories_unavailable:flags2.4?<a href='/constructor/true'>true</a> contact_require_premium:flags2.10?<a href='/constructor/true'>true</a> bot_business:flags2.11?<a href='/constructor/true'>true</a> bot_has_main_app:flags2.13?<a href='/constructor/true'>true</a> id:<a href='/type/long'>long</a> access_hash:flags.0?<a href='/type/long'>long</a> first_name:flags.1?<a href='/type/string'>string</a> last_name:flags.2?<a href='/type/string'>string</a> username:flags.3?<a href='/type/string'>string</a> phone:flags.4?<a href='/type/string'>string</a> photo:flags.5?<a href='/type/UserProfilePhoto'>UserProfilePhoto</a> status:flags.6?<a href='/type/UserStatus'>UserStatus</a> bot_info_version:flags.14?<a href='/type/int'>int</a> restriction_reason:flags.18?<a href='/type/Vector%20t'>Vector</a><<a href='/type/RestrictionReason'>RestrictionReason</a>> bot_inline_placeholder:flags.19?<a href='/type/string'>string</a> lang_code:flags.22?<a href='/type/string'>string</a> emoji_status:flags.30?<a href='/type/EmojiStatus'>EmojiStatus</a> usernames:flags2.0?<a href='/type/Vector%20t'>Vector</a><<a href='/type/Username'>Username</a>> stories_max_id:flags2.5?<a href='/type/int'>int</a> color:flags2.8?<a href='/type/PeerColor'>PeerColor</a> profile_color:flags2.9?<a href='/type/PeerColor'>PeerColor</a> bot_active_users:flags2.12?<a href='/type/int'>int</a> = <a href='/type/User'>User</a>; <a href='/constructor/channel'>channel</a>#aadfc8f flags:<a href='/type/%23'>#</a> creator:flags.0?<a href='/constructor/true'>true</a> left:flags.2?<a href='/constructor/true'>true</a> broadcast:flags.5?<a href='/constructor/true'>true</a> verified:flags.7?<a href='/constructor/true'>true</a> megagroup:flags.8?<a href='/constructor/true'>true</a> restricted:flags.9?<a href='/constructor/true'>true</a> signatures:flags.11?<a href='/constructor/true'>true</a> min:flags.12?<a href='/constructor/true'>true</a> scam:flags.19?<a href='/constructor/true'>true</a> has_link:flags.20?<a href='/constructor/true'>true</a> has_geo:flags.21?<a href='/constructor/true'>true</a> slowmode_enabled:flags.22?<a href='/constructor/true'>true</a> call_active:flags.23?<a href='/constructor/true'>true</a> call_not_empty:flags.24?<a href='/constructor/true'>true</a> fake:flags.25?<a href='/constructor/true'>true</a> gigagroup:flags.26?<a href='/constructor/true'>true</a> noforwards:flags.27?<a href='/constructor/true'>true</a> join_to_send:flags.28?<a href='/constructor/true'>true</a> join_request:flags.29?<a href='/constructor/true'>true</a> forum:flags.30?<a href='/constructor/true'>true</a> flags2:<a href='/type/%23'>#</a> stories_hidden:flags2.1?<a href='/constructor/true'>true</a> stories_hidden_min:flags2.2?<a href='/constructor/true'>true</a> stories_unavailable:flags2.3?<a href='/constructor/true'>true</a> id:<a href='/type/long'>long</a> access_hash:flags.13?<a href='/type/long'>long</a> title:<a href='/type/string'>string</a> username:flags.6?<a href='/type/string'>string</a> photo:<a href='/type/ChatPhoto'>ChatPhoto</a> date:<a href='/type/int'>int</a> restriction_reason:flags.9?<a href='/type/Vector%20t'>Vector</a><<a href='/type/RestrictionReason'>RestrictionReason</a>> admin_rights:flags.14?<a href='/type/ChatAdminRights'>ChatAdminRights</a> banned_rights:flags.15?<a href='/type/ChatBannedRights'>ChatBannedRights</a> default_banned_rights:flags.18?<a href='/type/ChatBannedRights'>ChatBannedRights</a> participants_count:flags.17?<a href='/type/int'>int</a> usernames:flags2.0?<a href='/type/Vector%20t'>Vector</a><<a href='/type/Username'>Username</a>> stories_max_id:flags2.4?<a href='/type/int'>int</a> color:flags2.7?<a href='/type/PeerColor'>PeerColor</a> profile_color:flags2.8?<a href='/type/PeerColor'>PeerColor</a> emoji_status:flags2.9?<a href='/type/EmojiStatus'>EmojiStatus</a> level:flags2.10?<a href='/type/int'>int</a> = <a href='/type/Chat'>Chat</a>; ---functions--- <a href='/method/help.getPeerColors'>help.getPeerColors</a>#da80f42f hash:<a href='/type/int'>int</a> = <a href='/type/help.PeerColors'>help.PeerColors</a>; <a href='/method/help.getPeerProfileColors'>help.getPeerProfileColors</a>#abcfa9fd hash:<a href='/type/int'>int</a> = <a href='/type/help.PeerColors'>help.PeerColors</a>; <a href='/method/account.getDefaultBackgroundEmojis'>account.getDefaultBackgroundEmojis</a>#a60ab9ce hash:<a href='/type/long'>long</a> = <a href='/type/EmojiList'>EmojiList</a>; <a href='/method/account.updateColor'>account.updateColor</a>#7cefa15d flags:<a href='/type/%23'>#</a> for_profile:flags.1?<a href='/constructor/true'>true</a> color:flags.2?<a href='/type/int'>int</a> background_emoji_id:flags.0?<a href='/type/long'>long</a> = <a href='/type/Bool'>Bool</a>; <a href='/method/channels.updateColor'>channels.updateColor</a>#d8aa3671 flags:<a href='/type/%23'>#</a> for_profile:flags.1?<a href='/constructor/true'>true</a> channel:<a href='/type/InputChannel'>InputChannel</a> color:flags.2?<a href='/type/int'>int</a> background_emoji_id:flags.0?<a href='/type/long'>long</a> = <a href='/type/Updates'>Updates</a>;</code></pre> <p>A <a href="/constructor/peerColor">peerColor</a> constructor contains a color palette ID (<code>id</code>) and a <a href="/api/custom-emoji">custom emoji sticker聽禄</a> (<code>background_emoji</code>) to be re-colored using the colors in the palette and spread out throughout the palette, generating a background that can be used in the profile page of a user, and in other places throughout the UI, namely in in webpage preview message frames and message accent colors when quoting or replying to messages sent by a channel or user that enabled a custom message accents. </p> <p>The color palettes is identified by an <code>id</code> (not by an RGB24 color); use <a href="/method/help.getPeerProfileColors">help.getPeerProfileColors</a> to obtain all color palettes (represented by <a href="/constructor/help.peerColorOption">help.peerColorOption</a> constructors) that can be used in the background of a profile page, and use <a href="/method/help.getPeerColors">help.getPeerColors</a> to obtain all color palettes that can be used in message accents. </p> <p>A color palette is represented by a <a href="/constructor/help.peerColorOption">help.peerColorOption</a> constructor: the palette ID is contained in <code>color_id</code>; the palette for light mode is contained in the <code>colors</code> field, the palette for dark mode is contained in the <code>dark_colors</code> field.<br> If the <code>hidden</code> flag is set it should not be displayed as an option to the user when choosing a palette to use in the profile page or in message accents. </p> <p>The actual colors that should be used are contained either in a <a href="/constructor/help.peerColorSet">help.peerColorSet</a> (returned by <a href="/method/help.getPeerColors">help.getPeerColors</a>, containing a palette for message accents) or in a <a href="/constructor/help.peerColorProfileSet">help.peerColorProfileSet</a> (returned by <a href="/method/help.getPeerColors">help.getPeerColors</a> containing a palette for profile pages), see the relative constructor pages for more info. </p> <p>Use <a href="/method/account.getDefaultBackgroundEmojis">account.getDefaultBackgroundEmojis</a> to obtain a list of IDs of <a href="/api/custom-emoji">custom emojis</a> that can be used in a palette background. </p> <p>All custom emojis in <a href="/api/custom-emoji">custom emoji stickersets聽禄</a> with <code>text_color</code> flag set can also be used for the same purpose. </p> <p>Use <a href="/method/account.updateColor">account.updateColor</a> to update the color palette of the current account's message accents and/or profile page; note that the current account must be subscribed to <a href="/api/premium">Telegram Premium</a> in order to call the method.<br> Use <a href="/method/channels.updateColor">channels.updateColor</a> to update the color palette of a channel/supergroup's profile page accents, or a channel's message accent.</p> <p>Note that channels/supergroups can use a message accent palette or profile palette only after reaching at least the <a href="/api/boost">boost level</a> specified in the <code>channel_min_level</code>/<code>group_min_level</code> field of the <a href="/constructor/help.peerColorOption">help.peerColorOption</a> constructor for the chosen palette. </p> <p>Additionally, to change <strong>profile</strong> palettes, channels/supergroups must <strong>also</strong> reach at least the <a href="/api/boost">boost level</a> specified in the <a href="/api/config#channel-profile-bg-icon-level-min"><code>channel_profile_bg_icon_level_min</code>聽禄</a>/<a href="/api/config#group-profile-bg-icon-level-min"><code>group_profile_bg_icon_level_min</code>聽禄</a> config parameters. </p> <p>The chosen message accent palette will be visible to other users in the <a href="/constructor/channel">channel</a>.<code>color</code> and <a href="/constructor/user">user</a>.<code>color</code> fields; changing it will emit an <a href="/constructor/updateChannel">updateChannel</a>/<a href="/constructor/updateUser">updateUser</a> update. </p> <p>The chosen profile palettes will be visible in the <a href="/constructor/user">user</a>.<code>profile_color</code> and <a href="/constructor/channel">channel</a>.<code>profile_color</code> fields; changing it will emit an <a href="/constructor/updateUser">updateUser</a> update/<a href="/constructor/updateChannel">updateChannel</a> update.</p> <p>If no palette is specified for a peer, a random color from red, orange, violet, green, cyan, blue, pink (eventually tweaked according to the client's theme) must be chosen locally as message accent palette once for every met peer.</p></div> </div> </div> </div> <div class="footer_wrap"> <div class="footer_columns_wrap footer_desktop"> <div class="footer_column footer_column_telegram"> <h5>Telegram</h5> <div class="footer_telegram_description"></div> Telegram is a cloud-based mobile and desktop messaging app with a focus on security and speed. </div> <div class="footer_column"> <h5><a href="//telegram.org/faq">About</a></h5> <ul> <li><a href="//telegram.org/faq">FAQ</a></li> <li><a href="//telegram.org/privacy">Privacy</a></li> <li><a href="//telegram.org/press">Press</a></li> </ul> </div> <div class="footer_column"> <h5><a href="//telegram.org/apps#mobile-apps">Mobile Apps</a></h5> <ul> <li><a href="//telegram.org/dl/ios">iPhone/iPad</a></li> <li><a href="//telegram.org/android">Android</a></li> <li><a href="//telegram.org/dl/web">Mobile Web</a></li> </ul> </div> <div class="footer_column"> <h5><a href="//telegram.org/apps#desktop-apps">Desktop Apps</a></h5> <ul> <li><a href="//desktop.telegram.org/">PC/Mac/Linux</a></li> <li><a href="//macos.telegram.org/">macOS</a></li> <li><a href="//telegram.org/dl/web">Web-browser</a></li> </ul> </div> <div class="footer_column footer_column_platform"> <h5><a href="/">Platform</a></h5> <ul> <li><a href="/api">API</a></li> <li><a href="//translations.telegram.org/">Translations</a></li> <li><a href="//instantview.telegram.org/">Instant View</a></li> </ul> </div> </div> <div class="footer_columns_wrap footer_mobile"> <div class="footer_column"> <h5><a href="//telegram.org/faq">About</a></h5> </div> <div class="footer_column"> <h5><a href="//telegram.org/blog">Blog</a></h5> </div> <div class="footer_column"> <h5><a href="//telegram.org/apps">Apps</a></h5> </div> <div class="footer_column"> <h5><a href="/">Platform</a></h5> </div> <div class="footer_column"> <h5><a href="//telegram.org/press">Press</a></h5> </div> </div> </div> </div> <script src="/js/main.js?47"></script> <script src="/js/jquery.min.js?1"></script> <script src="/js/bootstrap.min.js?1"></script> <script>window.initDevPageNav&&initDevPageNav(); backToTopInit("Go up"); removePreloadInit(); </script> </body> </html>