Tumblr color palette
SocialTumblr's color identity is defined by its signature deep blue, complemented by a range of neutral grays and accent colors for UI clarity. The palette supports a minimalist, content-focused user experience.
tumblr.comTumblr colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- Tumblr BluePrimary54, 70, 93
- Tumblr NavySecondary0, 25, 53
- Tumblr OrangeAccent255, 138, 0
Surfaces
Page, cards and dividers.- Tumblr WhiteBackground255, 255, 255
- Tumblr Light GraySurface245, 248, 250
- Tumblr Border GrayBorder206, 211, 217
Text
Three tiers of copy.- Tumblr Text BlackText0, 25, 53
- Tumblr Text GraySecondary text84, 89, 95
- Tumblr Muted GrayMuted text138, 143, 152
Semantic
Feedback and state colors.- Tumblr GreenSuccess0, 180, 136
- Tumblr OrangeWarning255, 138, 0
- Tumblr RedError255, 79, 94
- Tumblr Info BlueInfo54, 163, 255
Use Tumblr's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
tumblr-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #36A3FF;
--error: #FF4F5E;
--accent: #FF8A00;
--border: #CED3D9;
--primary: #36465D;
--success: #00B488;
--surface: #F5F8FA;
--warning: #FF8A00;
--secondary: #001935;
--text-muted: #8A8F98;
--background: #FFFFFF;
--text-primary: #001935;
--text-secondary: #54595F;
}Contrast and accessibility
Every text tone tested against every surface, per WCAG 2.1.
Text on background
Needs 4.5:1 for body text
17.6:1
Pass
Text on surface
Needs 4.5:1 for body text
16.5:1
Pass
Secondary text on background
Needs 4.5:1 for body text
7.1:1
Pass
Secondary text on surface
Needs 4.5:1 for body text
6.6:1
Pass
Muted text on background
Needs 3:1 for large text
3.2:1
Pass
Muted text on surface
Needs 3:1 for large text
3.0:1
Pass
Tumblr background, border and text colors
The quiet part of the Tumblr palette: page background, card surfaces, dividers and the three text tones that sit on them. Click a value to copy it.
- Tumblr WhiteBackground
- HEX
- RGB
- HSL
- Tumblr Light GraySurface
- HEX
- RGB
- HSL
- Tumblr Border GrayBorder
- HEX
- RGB
- HSL
- Tumblr Text BlackText
- HEX
- RGB
- HSL
- Tumblr Text GraySecondary text
- HEX
- RGB
- HSL
- Tumblr Muted GrayMuted text
- HEX
- RGB
- HSL
About Tumblr's colors
Tumblr's palette is anchored by a deep blue, evoking trust and creativity, with supporting neutrals for readability and subtlety. Accent colors provide clear visual cues for actions and notifications.
Primary blue dominates navigation and branding.
Neutral grays structure backgrounds and surfaces.
Accent orange and green highlight actions and statuses.
Psychology
The deep blue conveys reliability and a sense of community, while the orange accent draws attention to interactive elements. Neutrals keep the focus on user content and reduce visual noise.
Evolution
Tumblr's core blue has remained consistent since its early branding, with the palette gradually expanding to include more nuanced grays and vibrant accents. The overall color system has evolved to support modern UI needs while retaining its recognizable identity.
Where Tumblr uses each color
- Primary
Used for the main navigation bar, logo, and primary buttons.
- Secondary
Appears in headers, footers, and as a background for modal dialogs.
- Accent
Highlights notifications, call-to-action buttons, and interactive elements.
- Backgrounds
White and light gray are used for main backgrounds and post feeds.
- Text
Text colors are applied for primary content, secondary information, and muted UI hints.
- Semantic
Green, orange, and red indicate success, warnings, and errors in alerts and forms.
Tumblr color questions
Hex codes, RGB values, neutrals and how to use the palette.
The official Tumblr primary color hex code is #36465D. This deep blue is used across branding and navigation.
Tumblr Blue (#36465D) in RGB is (54, 70, 93). For CMYK, it is approximately (42, 25, 0, 64).
Tumblr uses a range of grays such as #F5F8FA (Tumblr Light Gray), #CED3D9 (Tumblr Border Gray), and #8A8F98 (Tumblr Muted Gray) for backgrounds, borders, and muted text.
Use #36465D for primary navigation and branding, with neutral grays for backgrounds and surfaces. Accent colors like #FF8A00 and #00B488 should highlight important actions or statuses.
The secondary color is Tumblr Navy, #001935, and the accent is Tumblr Orange, #FF8A00. Together with the primary they make up the three brand colors at the top of this page.
6 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 Tumblr's colors consistently when it generates UI.
Make something in the spirit of Tumblr
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.