Dev.to color palette
SocialDev.to uses a monochromatic palette centered on deep black and grayscale tones, reflecting its developer-focused community and minimalist design. The color system prioritizes clarity, accessibility, and contrast for code and content readability.
dev.toDev.to colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- Dev BlackPrimary10, 10, 10
- Dev CharcoalSecondary22, 27, 34
- Dev BlueAccent59, 73, 223
Surfaces
Page, cards and dividers.- Dev WhiteBackground255, 255, 255
- Dev Light GraySurface245, 246, 248
- Dev Border GrayBorder209, 213, 218
Text
Three tiers of copy.- Dev Text BlackText23, 23, 23
- Dev Text GraySecondary text87, 87, 87
- Dev Muted GrayMuted text163, 163, 163
Semantic
Feedback and state colors.- Dev Success GreenSuccess34, 134, 58
- Dev Warning GoldWarning176, 136, 0
- Dev Error RedError215, 58, 73
- Dev Info BlueInfo49, 109, 220
Use Dev.to's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
devto-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #316DDC;
--error: #D73A49;
--accent: #3B49DF;
--border: #D1D5DA;
--primary: #0A0A0A;
--success: #22863A;
--surface: #F5F6F8;
--warning: #B08800;
--secondary: #161B22;
--text-muted: #A3A3A3;
--background: #FFFFFF;
--text-primary: #171717;
--text-secondary: #575757;
}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.9:1
Pass
Text on surface
Needs 4.5:1 for body text
16.6:1
Pass
Secondary text on background
Needs 4.5:1 for body text
7.2:1
Pass
Secondary text on surface
Needs 4.5:1 for body text
6.7: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.3:1
Fail
Dev.to background, border and text colors
The quiet part of the Dev.to palette: page background, card surfaces, dividers and the three text tones that sit on them. Click a value to copy it.
- Dev WhiteBackground
- HEX
- RGB
- HSL
- Dev Light GraySurface
- HEX
- RGB
- HSL
- Dev Border GrayBorder
- HEX
- RGB
- HSL
- Dev Text BlackText
- HEX
- RGB
- HSL
- Dev Text GraySecondary text
- HEX
- RGB
- HSL
- Dev Muted GrayMuted text
- HEX
- RGB
- HSL
About Dev.to's colors
Dev.to's palette is rooted in high-contrast monochrome with a single blue accent, supporting readability and focus on content. The restrained use of color ensures a distraction-free environment for developers.
Primary black and white create strong contrast for UI elements.
Accent blue is used sparingly for links and highlights.
Grayscale tones support depth and hierarchy.
Psychology
The dominant black and gray tones convey seriousness, professionalism, and clarity. Blue accents introduce trust and approachability without overwhelming the interface.
Evolution
Dev.to's palette has remained largely stable since its launch, emphasizing consistency. Minor adjustments have been made to gray tones for improved accessibility and contrast.
Where Dev.to uses each color
- Primary
Used for the main navigation bar and logo.
- Secondary
Appears in headers, footers, and code block backgrounds.
- Accent
Applied to links, buttons, and interactive highlights.
- Backgrounds
White is the default background for content areas.
- Text
Text uses black and gray tones for hierarchy and readability.
- Semantic
Success, warning, and error colors are used for notifications and status indicators.
Dev.to color questions
Hex codes, RGB values, neutrals and how to use the palette.
The official Dev.to primary color is #0A0A0A. This deep black is used for the main navigation and branding.
Dev Black (#0A0A0A) in RGB is (10, 10, 10). In CMYK, it is approximately (0%, 0%, 0%, 96%).
Dev.to uses several grays: Dev Charcoal (#161B22), Dev Light Gray (#F5F6F8), Dev Border Gray (#D1D5DA), and text grays like #575757 and #A3A3A3. These ensure clear hierarchy and accessible contrast.
Use Dev Black (#0A0A0A) for primary navigation and branding, with blue (#3B49DF) only for accents and interactive elements. Grays and white provide structure and background, while semantic colors are reserved for status and alerts.
The secondary color is Dev Charcoal, #161B22, and the accent is Dev Blue, #3B49DF. 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 Dev.to's colors consistently when it generates UI.
Make something in the spirit of Dev.to
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.