Signal color palette
SocialSignal uses a crisp blue and white color palette, emphasizing clarity and security. Its interface relies on strong blue accents and a range of neutral grays for a clean, modern look.
signal.orgSignal colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- Signal BluePrimary59, 69, 253
- Signal WhiteSecondary255, 255, 255
- Signal Sky BlueAccent0, 191, 255
Surfaces
Page, cards and dividers.- Signal Light GrayBackground247, 248, 250
- Signal Surface WhiteSurface255, 255, 255
- Signal Border GrayBorder209, 213, 219
Text
Three tiers of copy.- Signal Text BlackText32, 33, 36
- Signal Text GraySecondary text95, 99, 104
- Signal Muted GrayMuted text154, 160, 166
Semantic
Feedback and state colors.- Signal Success GreenSuccess45, 198, 83
- Signal Warning YellowWarning255, 179, 0
- Signal Error RedError255, 59, 48
- Signal Info BlueInfo59, 69, 253
Use Signal's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
signal-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #3B45FD;
--error: #FF3B30;
--accent: #00BFFF;
--border: #D1D5DB;
--primary: #3B45FD;
--success: #2DC653;
--surface: #FFFFFF;
--warning: #FFB300;
--secondary: #FFFFFF;
--text-muted: #9AA0A6;
--background: #F7F8FA;
--text-primary: #202124;
--text-secondary: #5F6368;
}Contrast and accessibility
Every text tone tested against every surface, per WCAG 2.1.
Text on background
Needs 4.5:1 for body text
15.2:1
Pass
Text on surface
Needs 4.5:1 for body text
16.1:1
Pass
Secondary text on background
Needs 4.5:1 for body text
5.7:1
Pass
Secondary text on surface
Needs 4.5:1 for body text
6.0:1
Pass
Muted text on background
Needs 3:1 for large text
2.5:1
Fail
Muted text on surface
Needs 3:1 for large text
2.6:1
Fail
Signal background, border and text colors
The quiet part of the Signal palette: page background, card surfaces, dividers and the three text tones that sit on them. Click a value to copy it.
- Signal Light GrayBackground
- HEX
- RGB
- HSL
- Signal Surface WhiteSurface
- HEX
- RGB
- HSL
- Signal Border GrayBorder
- HEX
- RGB
- HSL
- Signal Text BlackText
- HEX
- RGB
- HSL
- Signal Text GraySecondary text
- HEX
- RGB
- HSL
- Signal Muted GrayMuted text
- HEX
- RGB
- HSL
About Signal's colors
Signal's palette centers on a trustworthy blue, supported by clean whites and functional grays. The scheme prioritizes readability and a sense of privacy.
Primary blue contrasts with white for clarity.
Grays provide hierarchy and subtle separation.
Accent blue highlights interactive elements.
Psychology
Blue communicates security, reliability, and calm, aligning with Signal's privacy-first mission. The neutral tones reinforce a sense of professionalism and simplicity.
Evolution
Signal's color palette has remained stable, with blue always as the core identity color. Minor adjustments have been made to grays and accents for improved accessibility.
Where Signal uses each color
- Primary
Used for the app icon, main navigation bar, and primary action buttons.
- Secondary
Serves as the background for most screens and chat bubbles.
- Accent
Highlights links, active states, and secondary buttons.
- Backgrounds
Light gray backgrounds are used in chat lists and settings screens.
- Text
Primary and secondary text colors are used throughout the UI for readability.
- Semantic
Success, warning, and error colors appear in notifications and status indicators.
Signal color questions
Hex codes, RGB values, neutrals and how to use the palette.
The official Signal primary color is #3B45FD. This blue is used prominently in the app and branding.
Signal Blue (#3B45FD) has an RGB value of (59, 69, 253). For print, the approximate CMYK is (77, 73, 0, 0).
Signal uses several grays, including #F7F8FA for backgrounds and #D1D5DB for borders. These neutrals help maintain a clean, readable interface.
Use Signal Blue (#3B45FD) for primary actions and highlights, with white and gray tones for backgrounds and surfaces. Accent and semantic colors should only be used for specific interactive or status elements.
The secondary color is Signal White, #FFFFFF, and the accent is Signal Sky Blue, #00BFFF. Together with the primary they make up the three brand colors at the top of this page.
4 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 Signal's colors consistently when it generates UI.
Make something in the spirit of Signal
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.