Checkout.com color palette
FinanceCheckout.com uses a distinctive blue-centric palette, emphasizing clarity and trust in the fintech space. The brand's color identity is anchored by its signature Checkout Blue, supported by a range of cool grays and accent blues for digital interfaces.
checkout.comCheckout.com colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- Checkout BluePrimary0, 87, 255
- Deep Checkout BlueSecondary0, 45, 106
- Checkout CyanAccent0, 224, 255
Surfaces
Page, cards and dividers.- Checkout WhiteBackground255, 255, 255
- Checkout Light GraySurface245, 247, 250
- Checkout Border GrayBorder227, 231, 237
Text
Three tiers of copy.- Checkout BlackText26, 26, 26
- Checkout GraySecondary text79, 91, 107
- Checkout Muted GrayMuted text138, 148, 166
Semantic
Feedback and state colors.- Checkout GreenSuccess0, 196, 140
- Checkout YellowWarning255, 214, 0
- Checkout RedError255, 59, 48
- Checkout BlueInfo0, 87, 255
Use Checkout.com's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
checkoutcom-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #0057FF;
--error: #FF3B30;
--accent: #00E0FF;
--border: #E3E7ED;
--primary: #0057FF;
--success: #00C48C;
--surface: #F5F7FA;
--warning: #FFD600;
--secondary: #002D6A;
--text-muted: #8A94A6;
--background: #FFFFFF;
--text-primary: #1A1A1A;
--text-secondary: #4F5B6B;
}Contrast and accessibility
Every text tone tested against every surface, per WCAG 2.1.
Text on background
Needs 4.5:1 for body text
17.4:1
Pass
Text on surface
Needs 4.5:1 for body text
16.2:1
Pass
Secondary text on background
Needs 4.5:1 for body text
6.9:1
Pass
Secondary text on surface
Needs 4.5:1 for body text
6.4:1
Pass
Muted text on background
Needs 3:1 for large text
3.1:1
Pass
Muted text on surface
Needs 3:1 for large text
2.8:1
Fail
Checkout.com background, border and text colors
The quiet part of the Checkout.com palette: page background, card surfaces, dividers and the three text tones that sit on them. Click a value to copy it.
- Checkout WhiteBackground
- HEX
- RGB
- HSL
- Checkout Light GraySurface
- HEX
- RGB
- HSL
- Checkout Border GrayBorder
- HEX
- RGB
- HSL
- Checkout BlackText
- HEX
- RGB
- HSL
- Checkout GraySecondary text
- HEX
- RGB
- HSL
- Checkout Muted GrayMuted text
- HEX
- RGB
- HSL
About Checkout.com's colors
Checkout.com's palette is built around a strong, vivid blue, supported by cool grays and bright accents. The system emphasizes clarity, trust, and modernity for digital finance applications.
Primary blue is complemented by deep navy and cyan accents.
Neutral grays provide balance and legibility.
Accent colors are reserved for status and interactive elements.
Psychology
Blue conveys trust, security, and professionalism, which are essential in fintech. The supporting cool tones reinforce a sense of reliability and clarity.
Evolution
Checkout.com's palette has remained consistent since its 2019 rebrand, focusing on blue and neutral tones. Minor adjustments have been made to gray values for improved accessibility.
Where Checkout.com uses each color
- Primary
Used for main navigation bars, primary buttons, and key highlights across the website and app.
- Secondary
Applied to headers, footers, and hover states for interactive elements.
- Accent
Used for call-to-action highlights, links, and interactive UI elements.
- Backgrounds
Checkout White and Light Gray are used for backgrounds in web and app screens.
- Text
Checkout Black is used for primary text, with Gray and Muted Gray for secondary and muted text.
- Semantic
Green, Yellow, and Red are used for success, warning, and error states in forms and notifications.
Checkout.com color questions
Hex codes, RGB values, neutrals and how to use the palette.
The official Checkout.com brand color is Checkout Blue, with the hex code #0057FF.
Checkout Blue (#0057FF) in RGB is (0, 87, 255). For CMYK, it is approximately (100, 66, 0, 0).
Checkout.com uses a range of grays, including Checkout Light Gray (#F5F7FA), Border Gray (#E3E7ED), and Muted Gray (#8A94A6), to provide structure and readability.
Primary blue (#0057FF) should be reserved for key actions and navigation, while grays and accents are used for backgrounds, borders, and status indicators. Consistent application ensures brand recognition and accessibility.
The secondary color is Deep Checkout Blue, #002D6A, and the accent is Checkout Cyan, #00E0FF. Together with the primary they make up the three brand colors at the top of this page.
5 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 Checkout.com's colors consistently when it generates UI.
Make something in the spirit of Checkout.com
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.