Adyen color palette
FinanceAdyen's color identity centers around a distinctive green, supported by a minimalist palette of neutral grays and black for clarity and professionalism. The palette is designed for high accessibility and brand recognition across digital and print applications.
adyen.comAdyen colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- Adyen GreenPrimary10, 191, 83
- Adyen NavySecondary0, 17, 44
- Adyen Light GreenAccent0, 229, 153
Surfaces
Page, cards and dividers.- Adyen WhiteBackground255, 255, 255
- Adyen Light GraySurface246, 248, 250
- Adyen Border GrayBorder229, 231, 235
Text
Three tiers of copy.- Adyen NavyText0, 17, 44
- Adyen Medium GraySecondary text107, 114, 128
- Adyen Muted GrayMuted text156, 163, 175
Semantic
Feedback and state colors.- Adyen GreenSuccess10, 191, 83
- Adyen YellowWarning255, 184, 0
- Adyen RedError255, 59, 48
- Adyen BlueInfo0, 144, 255
Use Adyen's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
adyen-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #0090FF;
--error: #FF3B30;
--accent: #00E599;
--border: #E5E7EB;
--primary: #0ABF53;
--success: #0ABF53;
--surface: #F6F8FA;
--warning: #FFB800;
--secondary: #00112C;
--text-muted: #9CA3AF;
--background: #FFFFFF;
--text-primary: #00112C;
--text-secondary: #6B7280;
}Contrast and accessibility
Every text tone tested against every surface, per WCAG 2.1.
Text on background
Needs 4.5:1 for body text
18.8:1
Pass
Text on surface
Needs 4.5:1 for body text
17.7:1
Pass
Secondary text on background
Needs 4.5:1 for body text
4.8:1
Pass
Secondary text on surface
Needs 4.5:1 for body text
4.5: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.4:1
Fail
Adyen background, border and text colors
The quiet part of the Adyen palette: page background, card surfaces, dividers and the three text tones that sit on them. Click a value to copy it.
- Adyen WhiteBackground
- HEX
- RGB
- HSL
- Adyen Light GraySurface
- HEX
- RGB
- HSL
- Adyen Border GrayBorder
- HEX
- RGB
- HSL
- Adyen NavyText
- HEX
- RGB
- HSL
- Adyen Medium GraySecondary text
- HEX
- RGB
- HSL
- Adyen Muted GrayMuted text
- HEX
- RGB
- HSL
About Adyen's colors
Adyen's palette uses a vibrant green as the anchor, paired with deep navy and neutral grays for contrast and clarity. The color system is designed for high legibility and a modern, trustworthy feel.
Primary green is complemented by navy for depth.
Neutral grays provide balance and hierarchy.
Accent green and blue are used for highlights and information.
Psychology
Green conveys growth, innovation, and trust—key values for a financial technology brand. The supporting dark and neutral tones reinforce professionalism and reliability.
Evolution
Adyen's core green has remained consistent since its early branding, ensuring strong recognition. The supporting palette has evolved to include more nuanced grays and a deeper navy for improved accessibility and digital clarity.
Where Adyen uses each color
- Primary
Used for primary actions, highlights, and the Adyen logo.
- Secondary
Appears in navigation bars, footers, and as a background for key sections.
- Accent
Used for hover states, secondary buttons, and subtle highlights.
- Backgrounds
White and light gray are used for page and card backgrounds.
- Text
Navy and medium gray are used for primary and secondary text throughout the UI.
- Semantic
Green, yellow, red, and blue are used for status indicators and notifications.
Adyen color questions
Hex codes, RGB values, neutrals and how to use the palette.
The Adyen primary color hex code is #0ABF53. This green is used for the logo and primary actions.
Adyen Green (#0ABF53) is RGB(10, 191, 83) and CMYK(95, 0, 67, 25). Use these values for accurate color reproduction in print and digital.
Adyen uses #00112C (Navy) for dark backgrounds and text, and #F6F8FA, #E5E7EB, #6B7280, and #9CA3AF for various gray UI elements. These ensure clarity and accessibility across interfaces.
Use Adyen Green (#0ABF53) for primary actions and highlights, navy for structural elements and text, and grays for backgrounds and borders. Accent and semantic colors are reserved for specific UI states and notifications.
The secondary color is Adyen Navy, #00112C, and the accent is Adyen Light Green, #00E599. 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 Adyen's colors consistently when it generates UI.
Make something in the spirit of Adyen
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.