Tinder color palette
SocialTinder's color identity is defined by its signature pink-red gradient, supported by clean neutrals and subtle accent colors. The palette emphasizes warmth, approachability, and clarity across its digital platforms.
tinder.comTinder colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- Tinder FlamePrimary255, 107, 107
- Tinder PinkSecondary253, 41, 123
- Tinder GoldAccent255, 202, 40
Surfaces
Page, cards and dividers.- Tinder WhiteBackground255, 255, 255
- Tinder Light GraySurface247, 247, 248
- Tinder Border GrayBorder230, 230, 230
Text
Three tiers of copy.- Tinder CharcoalText34, 34, 34
- Tinder Medium GraySecondary text110, 110, 110
- Tinder Muted GrayMuted text189, 189, 189
Semantic
Feedback and state colors.- Tinder GreenSuccess76, 217, 100
- Tinder OrangeWarning255, 149, 0
- Tinder RedError255, 59, 48
- Tinder BlueInfo0, 122, 255
Use Tinder's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
tinder-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #007AFF;
--error: #FF3B30;
--accent: #FFCA28;
--border: #E6E6E6;
--primary: #FF6B6B;
--success: #4CD964;
--surface: #F7F7F8;
--warning: #FF9500;
--secondary: #FD297B;
--text-muted: #BDBDBD;
--background: #FFFFFF;
--text-primary: #222222;
--text-secondary: #6E6E6E;
}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.9:1
Pass
Text on surface
Needs 4.5:1 for body text
14.9: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.8:1
Pass
Muted text on background
Needs 3:1 for large text
1.9:1
Fail
Muted text on surface
Needs 3:1 for large text
1.8:1
Fail
Tinder gray and neutral colors
The quiet part of the Tinder palette: page background, card surfaces, dividers and the three text tones that sit on them. Click a value to copy it.
- Tinder WhiteBackground
- HEX
- RGB
- HSL
- Tinder Light GraySurface
- HEX
- RGB
- HSL
- Tinder Border GrayBorder
- HEX
- RGB
- HSL
- Tinder CharcoalText
- HEX
- RGB
- HSL
- Tinder Medium GraySecondary text
- HEX
- RGB
- HSL
- Tinder Muted GrayMuted text
- HEX
- RGB
- HSL
About Tinder's colors
Tinder's palette is built around a vibrant pink-red gradient, evoking energy and warmth. Neutral grays and whites provide balance and readability throughout the interface.
Primary and secondary colors form a gradient for branding and UI highlights.
Neutrals support content legibility and structure.
Accent colors are reserved for premium features and status indicators.
Psychology
The warm pink-red tones are associated with passion, excitement, and approachability, aligning with Tinder's brand purpose. Neutrals and accent colors create a modern, inviting environment.
Evolution
Tinder's core palette has remained stable since its early years, with the pink-red gradient becoming more prominent in recent redesigns. Neutrals and accent colors have been refined for clarity and accessibility.
Where Tinder uses each color
- Primary
Used for key branding elements, primary buttons, and the app icon.
- Secondary
Appears in gradients, onboarding screens, and promotional banners.
- Accent
Highlights premium features such as Tinder Gold and Plus.
- Backgrounds
Applied to main app backgrounds and card surfaces.
- Text
Tinder Charcoal is used for main text, with grays for secondary and muted text.
- Semantic
Green, orange, red, and blue are used for status indicators, notifications, and feedback messages.
Tinder color questions
Hex codes, RGB values, neutrals and how to use the palette.
The Tinder primary color hex code is #FF6B6B, known as Tinder Flame. This color is used for branding and primary actions.
Tinder Flame (#FF6B6B) in RGB is (255, 107, 107). For CMYK, it is approximately (0, 58, 58, 0).
Tinder uses #F7F7F8 (Tinder Light Gray), #E6E6E6 (Tinder Border Gray), #6E6E6E (Tinder Medium Gray), and #BDBDBD (Tinder Muted Gray) for backgrounds, borders, and text. These neutrals ensure readability and a clean UI.
Use Tinder Flame (#FF6B6B) for primary actions and branding, with secondary and accent colors for highlights and premium features. Neutrals and semantic colors should support content clarity and status feedback.
The secondary color is Tinder Pink, #FD297B, and the accent is Tinder Gold, #FFCA28. 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 Tinder's colors consistently when it generates UI.
Make something in the spirit of Tinder
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.
