Dribbble color palette
SocialDribbble's color identity centers on its signature pink, complemented by a range of soft grays and dark tones for UI clarity. The palette is playful yet professional, supporting a creative community.
dribbble.comDribbble colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- Dribbble PinkPrimary234, 76, 137
- Dribbble Light PinkSecondary248, 187, 208
- Dribbble PurpleAccent138, 63, 252
Surfaces
Page, cards and dividers.- Dribbble WhiteBackground255, 255, 255
- Dribbble Light GraySurface243, 243, 244
- Dribbble Border GrayBorder231, 231, 233
Text
Three tiers of copy.- Dribbble BlackText13, 12, 34
- Dribbble GraySecondary text110, 109, 122
- Dribbble Muted GrayMuted text161, 161, 181
Semantic
Feedback and state colors.- Dribbble GreenSuccess39, 201, 63
- Dribbble YellowWarning255, 184, 0
- Dribbble RedError255, 75, 75
- Dribbble BlueInfo30, 167, 253
Use Dribbble's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
dribbble-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #1EA7FD;
--error: #FF4B4B;
--accent: #8A3FFC;
--border: #E7E7E9;
--primary: #EA4C89;
--success: #27C93F;
--surface: #F3F3F4;
--warning: #FFB800;
--secondary: #F8BBD0;
--text-muted: #A1A1B5;
--background: #FFFFFF;
--text-primary: #0D0C22;
--text-secondary: #6E6D7A;
}Contrast and accessibility
Every text tone tested against every surface, per WCAG 2.1.
Text on background
Needs 4.5:1 for body text
19.2:1
Pass
Text on surface
Needs 4.5:1 for body text
17.3:1
Pass
Secondary text on background
Needs 4.5:1 for body text
5.1:1
Pass
Secondary text on surface
Needs 4.5:1 for body text
4.6: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
Dribbble background, border and text colors
The quiet part of the Dribbble palette: page background, card surfaces, dividers and the three text tones that sit on them. Click a value to copy it.
- Dribbble WhiteBackground
- HEX
- RGB
- HSL
- Dribbble Light GraySurface
- HEX
- RGB
- HSL
- Dribbble Border GrayBorder
- HEX
- RGB
- HSL
- Dribbble BlackText
- HEX
- RGB
- HSL
- Dribbble GraySecondary text
- HEX
- RGB
- HSL
- Dribbble Muted GrayMuted text
- HEX
- RGB
- HSL
About Dribbble's colors
Dribbble's palette is anchored by a vibrant pink, evoking creativity and approachability. Neutral grays and darks provide balance and readability throughout the interface.
Primary pink is complemented by soft pinks and purples for highlights.
Grays and dark tones support content legibility and UI structure.
Accent colors are reserved for notifications and status indicators.
Psychology
The signature pink conveys playfulness, creativity, and a welcoming atmosphere. Neutral tones ensure the interface feels modern and professional.
Evolution
Dribbble's palette has remained consistent, with pink as the central color since its inception. Over time, the gray and neutral tones have been refined to improve accessibility and contrast.
Where Dribbble uses each color
- Primary
Used for main buttons, highlights, and brand elements across the website and app.
- Secondary
Appears in backgrounds of cards, subtle highlights, and secondary buttons.
- Accent
Used for notifications, links, and interactive elements requiring emphasis.
- Backgrounds
White and light gray backgrounds are used for main content areas and cards.
- Text
Text colors range from deep black for headlines to muted gray for secondary information.
- Semantic
Green, yellow, red, and blue are used for status indicators such as success, warning, error, and informational messages.
Dribbble color questions
Hex codes, RGB values, neutrals and how to use the palette.
The official Dribbble primary color is #EA4C89. This pink is used for branding, buttons, and highlights.
The RGB value for Dribbble Pink (#EA4C89) is 234, 76, 137. In CMYK, it is approximately 0, 67, 41, 8.
Dribbble uses a range of grays, including #F3F3F4 for surfaces, #E7E7E9 for borders, and #0D0C22 for primary text. These ensure clarity and contrast in the UI.
Use #EA4C89 for primary actions and branding, with grays for backgrounds and text. Accent and semantic colors are reserved for notifications, links, and status indicators.
The secondary color is Dribbble Light Pink, #F8BBD0, and the accent is Dribbble Purple, #8A3FFC. 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 Dribbble's colors consistently when it generates UI.
Make something in the spirit of Dribbble
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.
