Bluesky color palette
SocialBluesky uses a crisp, modern palette centered on a vivid blue, with supporting cool neutrals and subtle accent colors for clarity and accessibility. Its color system is designed for a clean, open social experience.
bsky.appBluesky colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- Bluesky BluePrimary17, 133, 254
- Bluesky CharcoalSecondary26, 29, 33
- Bluesky AmberAccent245, 166, 35
Surfaces
Page, cards and dividers.- Bluesky WhiteBackground255, 255, 255
- Bluesky CloudSurface244, 248, 251
- Bluesky Border GrayBorder226, 232, 240
Text
Three tiers of copy.- Bluesky CharcoalText26, 29, 33
- Bluesky SlateSecondary text101, 119, 134
- Bluesky Muted GrayMuted text170, 184, 194
Semantic
Feedback and state colors.- Bluesky Success GreenSuccess46, 204, 64
- Bluesky AmberWarning245, 166, 35
- Bluesky Error PinkError224, 36, 94
- Bluesky BlueInfo17, 133, 254
Use Bluesky's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
bluesky-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #1185FE;
--error: #E0245E;
--accent: #F5A623;
--border: #E2E8F0;
--primary: #1185FE;
--success: #2ECC40;
--surface: #F4F8FB;
--warning: #F5A623;
--secondary: #1A1D21;
--text-muted: #AAB8C2;
--background: #FFFFFF;
--text-primary: #1A1D21;
--text-secondary: #657786;
}Contrast and accessibility
Every text tone tested against every surface, per WCAG 2.1.
Text on background
Needs 4.5:1 for body text
16.9:1
Pass
Text on surface
Needs 4.5:1 for body text
15.8:1
Pass
Secondary text on background
Needs 4.5:1 for body text
4.6:1
Pass
Secondary text on surface
Needs 4.5:1 for body text
4.3:1
Fail
Muted text on background
Needs 3:1 for large text
2.0:1
Fail
Muted text on surface
Needs 3:1 for large text
1.9:1
Fail
Bluesky background, border and text colors
The quiet part of the Bluesky palette: page background, card surfaces, dividers and the three text tones that sit on them. Click a value to copy it.
- Bluesky WhiteBackground
- HEX
- RGB
- HSL
- Bluesky CloudSurface
- HEX
- RGB
- HSL
- Bluesky Border GrayBorder
- HEX
- RGB
- HSL
- Bluesky CharcoalText
- HEX
- RGB
- HSL
- Bluesky SlateSecondary text
- HEX
- RGB
- HSL
- Bluesky Muted GrayMuted text
- HEX
- RGB
- HSL
About Bluesky's colors
Bluesky's palette is dominated by a bright, approachable blue, complemented by neutral grays and subtle accent hues. The system emphasizes clarity, accessibility, and a sense of openness.
Primary blue is paired with dark neutrals for contrast.
Accent amber highlights actions and notifications.
Cool grays provide structure and hierarchy.
Psychology
The primary blue conveys trust, reliability, and a welcoming digital environment. Neutral grays and white backgrounds create a sense of space and focus.
Evolution
Bluesky's palette has remained stable since launch, maintaining its signature blue and clean neutrals. Minor adjustments have refined contrast and accessibility over time.
Where Bluesky uses each color
- Primary
Used for logo, primary buttons, and key interactive elements.
- Secondary
Appears in navigation bars, headers, and dark mode backgrounds.
- Accent
Highlights notifications, active states, and important icons.
- Backgrounds
White and light blue backgrounds are used for app screens and content areas.
- Text
Charcoal and slate grays are used for primary and secondary text throughout the interface.
- Semantic
Green, amber, and pink are used for success, warning, and error states respectively.
Bluesky color questions
Hex codes, RGB values, neutrals and how to use the palette.
The official Bluesky primary color is #1185FE, known as 'Bluesky Blue'. This should be used for all key brand and interactive elements.
Bluesky Blue (#1185FE) in RGB is (17, 133, 254). In CMYK, it is approximately (93%, 48%, 0%, 0%).
Bluesky uses several neutrals: 'Bluesky Charcoal' (#1A1D21) for dark backgrounds and text, 'Bluesky Slate' (#657786) for secondary text, and 'Bluesky Muted Gray' (#AAB8C2) for muted UI elements.
Use 'Bluesky Blue' (#1185FE) for primary actions and branding, with neutrals for backgrounds and text. Accent and semantic colors are reserved for notifications, alerts, and status indicators.
The secondary color is Bluesky Charcoal, #1A1D21, and the accent is Bluesky Amber, #F5A623. Together with the primary they make up the three brand colors at the top of this page.
3 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 Bluesky's colors consistently when it generates UI.
Make something in the spirit of Bluesky
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.