Hinge color palette
SocialHinge's color identity is defined by a minimalist palette centered around its signature Hinge Purple, complemented by neutral grays and white for a clean, modern look. The palette is designed to be approachable and understated, reflecting the brand's focus on authenticity.
hinge.coHinge colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- Hinge PurplePrimary106, 27, 154
- Hinge WhiteSecondary255, 255, 255
- Hinge GoldAccent245, 166, 35
Surfaces
Page, cards and dividers.- Hinge Light GrayBackground250, 250, 250
- Hinge Surface GraySurface243, 243, 243
- Hinge Border GrayBorder224, 224, 224
Text
Three tiers of copy.- Hinge CharcoalText34, 34, 34
- Hinge Medium GraySecondary text110, 110, 110
- Hinge Muted GrayMuted text189, 189, 189
Semantic
Feedback and state colors.- Hinge Success GreenSuccess39, 174, 96
- Hinge Warning OrangeWarning242, 153, 74
- Hinge Error RedError235, 87, 87
- Hinge Info BlueInfo45, 156, 219
Use Hinge's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
hinge-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #2D9CDB;
--error: #EB5757;
--accent: #F5A623;
--border: #E0E0E0;
--primary: #6A1B9A;
--success: #27AE60;
--surface: #F3F3F3;
--warning: #F2994A;
--secondary: #FFFFFF;
--text-muted: #BDBDBD;
--background: #FAFAFA;
--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.2:1
Pass
Text on surface
Needs 4.5:1 for body text
14.3:1
Pass
Secondary text on background
Needs 4.5:1 for body text
4.9: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
1.8:1
Fail
Muted text on surface
Needs 3:1 for large text
1.7:1
Fail
Hinge gray and neutral colors
The quiet part of the Hinge palette: page background, card surfaces, dividers and the three text tones that sit on them. Click a value to copy it.
- Hinge Light GrayBackground
- HEX
- RGB
- HSL
- Hinge Surface GraySurface
- HEX
- RGB
- HSL
- Hinge Border GrayBorder
- HEX
- RGB
- HSL
- Hinge CharcoalText
- HEX
- RGB
- HSL
- Hinge Medium GraySecondary text
- HEX
- RGB
- HSL
- Hinge Muted GrayMuted text
- HEX
- RGB
- HSL
About Hinge's colors
Hinge's palette is built around a distinctive purple, paired with neutral grays and white for clarity and simplicity. Accent colors are used sparingly to highlight actions and statuses.
Purple is used for brand recognition and key actions.
Neutrals provide a clean, unobtrusive background.
Accent colors signal status and draw attention to important UI elements.
Psychology
Purple conveys creativity and uniqueness, aligning with Hinge's positioning as a relationship app that's different from others. The neutral tones foster a sense of calm and trust.
Evolution
Hinge's palette has remained stable since its 2019 rebrand, focusing on purple and neutrals. Minor adjustments have been made to accent and status colors for accessibility and clarity.
Where Hinge uses each color
- Primary
Hinge Purple is used for the logo, primary buttons, and key highlights in the app.
- Secondary
Hinge White is the main background for screens and cards.
- Accent
Hinge Gold is used for premium features and highlights.
- Backgrounds
Hinge Light Gray provides the general app background.
- Text
Hinge Charcoal is used for main text, with Medium and Muted Grays for secondary and disabled text.
- Semantic
Success Green, Warning Orange, Error Red, and Info Blue are used for status indicators and alerts.
Hinge color questions
Hex codes, RGB values, neutrals and how to use the palette.
The official Hinge brand color is Hinge Purple, with the hex code #6A1B9A.
Hinge Purple (#6A1B9A) in RGB is (106, 27, 154). For CMYK, it is approximately (31%, 82%, 0%, 40%).
Hinge uses a range of grays including Hinge Light Gray (#FAFAFA), Surface Gray (#F3F3F3), Border Gray (#E0E0E0), Medium Gray (#6E6E6E), and Muted Gray (#BDBDBD) for backgrounds, borders, and text.
Use Hinge Purple (#6A1B9A) for primary actions and branding, neutrals for backgrounds and surfaces, and accent/status colors for highlighting features or conveying status.
The secondary color is Hinge White, #FFFFFF, and the accent is Hinge Gold, #F5A623. 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 Hinge's colors consistently when it generates UI.
Make something in the spirit of Hinge
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.
