Klarna color palette
FinanceKlarna's color identity is defined by its distinctive pink primary, complemented by soft neutrals and minimalist black and white. The palette is designed for clarity, approachability, and a playful yet professional tone in financial services.
klarna.comKlarna colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- Klarna PinkPrimary255, 179, 199
- Klarna BlackSecondary0, 0, 0
- Klarna WhiteAccent255, 255, 255
Surfaces
Page, cards and dividers.- Klarna Light GreyBackground246, 246, 246
- Klarna White SurfaceSurface255, 255, 255
- Klarna Border GreyBorder224, 224, 224
Text
Three tiers of copy.- Klarna Text BlackText0, 0, 0
- Klarna Text GreySecondary text110, 110, 110
- Klarna Muted GreyMuted text179, 179, 179
Semantic
Feedback and state colors.- Klarna Success GreenSuccess27, 196, 125
- Klarna Warning YellowWarning255, 184, 0
- Klarna Error RedError255, 79, 112
- Klarna Info BlueInfo58, 134, 255
Use Klarna's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
klarna-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #3A86FF;
--error: #FF4F70;
--accent: #FFFFFF;
--border: #E0E0E0;
--primary: #FFB3C7;
--success: #1BC47D;
--surface: #FFFFFF;
--warning: #FFB800;
--secondary: #000000;
--text-muted: #B3B3B3;
--background: #F6F6F6;
--text-primary: #000000;
--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
19.4:1
Pass
Text on surface
Needs 4.5:1 for body text
21.0:1
Pass
Secondary text on background
Needs 4.5:1 for body text
4.7:1
Pass
Secondary text on surface
Needs 4.5:1 for body text
5.1: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
2.1:1
Fail
Klarna gray and neutral colors
The quiet part of the Klarna palette: page background, card surfaces, dividers and the three text tones that sit on them. Click a value to copy it.
- Klarna Light GreyBackground
- HEX
- RGB
- HSL
- Klarna White SurfaceSurface
- HEX
- RGB
- HSL
- Klarna Border GreyBorder
- HEX
- RGB
- HSL
- Klarna Text BlackText
- HEX
- RGB
- HSL
- Klarna Text GreySecondary text
- HEX
- RGB
- HSL
- Klarna Muted GreyMuted text
- HEX
- RGB
- HSL
About Klarna's colors
Klarna's palette is built around a soft, playful pink, balanced by high-contrast black and white for clarity. The use of gentle greys and semantic colors supports accessibility and modern UI needs.
Primary pink is paired with black for brand recognition.
Neutrals provide a clean, minimal backdrop.
Semantic colors are reserved for status and feedback.
Psychology
The pink evokes friendliness and approachability, distinguishing Klarna in the finance sector. Black and white reinforce trust and simplicity.
Evolution
Klarna's palette has remained stable since its major rebrand in 2019, focusing on pink as the core identity. Minor adjustments have been made to neutrals and semantic tones for digital accessibility.
Where Klarna uses each color
- Primary
Used for main brand elements, call-to-action buttons, and highlights across the website and app.
- Secondary
Appears in navigation bars, headlines, and key UI components.
- Accent
Used for backgrounds, cards, and to provide contrast with the primary pink.
- Backgrounds
Light grey backgrounds are common in app screens and web pages for a soft, clean look.
- Text
Black is used for primary text, with grey tones for secondary and muted text elements.
- Semantic
Green, yellow, red, and blue are used for success, warning, error, and informational states respectively in UI feedback.
Klarna color questions
Hex codes, RGB values, neutrals and how to use the palette.
The official Klarna primary color hex code is #FFB3C7. This pink is central to the brand's visual identity.
Klarna Pink (#FFB3C7) in RGB is (255, 179, 199) and in CMYK is approximately (0, 30, 22, 0).
Klarna uses #000000 (Klarna Black) for text and key UI elements, and #F6F6F6 (Klarna Light Grey) for backgrounds. These neutrals ensure high contrast and readability.
Use #FFB3C7 for primary actions and highlights, with black and white for structure and contrast. Semantic colors like #1BC47D (Success Green) are reserved for status indicators and feedback.
The secondary color is Klarna Black, #000000, and the accent is Klarna White, #FFFFFF. 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 Klarna's colors consistently when it generates UI.
Make something in the spirit of Klarna
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.