Crypto & Web3 Color Palette
Crypto and Web3 products need to look secure and serious enough to hold money, while still feeling native to the internet. The palette has to carry both trust and energy.
By Mohamed Farhan · Updated Oct 19, 2026
Crypto & Web3 overview
Revenue grew 12% this week. Three invoices are waiting for approval.
Graphite and amber: secure, valuable and easy to read on charts.
Why these colors work for crypto & web3
Dark bases are the norm because dashboards and charts are used for long sessions. Green and red are reserved for price movement, so brand colors should avoid both. Gold and amber signal value; cyan and violet signal technology.
Who you are designing for
Crypto users range from professional traders watching charts all day to newcomers buying for the first time. Both need to read balances and price movements instantly and to feel confident before confirming a transaction that cannot be reversed.
The four crypto & web3 palettes in detail
Cold Wallet. Graphite and amber: secure, valuable and easy to read on charts. The primary #F5A524 (close to goldenrod) carries dark button labels at 9.3:1, the accent #3DD6F5 (close to turquoise) handles highlights and badges, and body text #E9EDF2 on the #0E1116 surface reaches 16.1:1, which is AAA for body copy.
Ledger Light. A light, bank-like palette for exchanges targeting mainstream users. The primary #1747D1 (close to denim blue) carries white button labels at 7.3:1, the accent #F2B705 (close to gold) handles highlights and badges, and body text #0F172A on the #FFFFFF surface reaches 17.9:1, which is AAA for body copy.
Protocol. Deep navy with cyan for infrastructure and developer-facing protocols. The primary #4CC9F0 (close to turquoise) carries dark button labels at 9.8:1, the accent #F72585 (close to raspberry) handles highlights and badges, and body text #E6E9F5 on the #0B1026 surface reaches 15.5:1, which is AAA for body copy.
Mint Chain. Warm black and soft mint for NFT and creator platforms. The primary #A0F0C8 (close to seafoam green) carries dark button labels at 14.2:1, the accent #FF8A5B (close to coral) handles highlights and badges, and body text #F2F2F2 on the #121212 surface reaches 16.7:1, which is AAA for body copy.
What each primary color signals
Each palette leads with a different primary, and each one sends a slightly different message to crypto & web3 customers. Choosing between them is less about which looks best in isolation and more about which promise you want to make first.
Cold Wallet (#F5A524). Orange is warm, social and energetic. Earthy oranges (rust, terracotta, burnt orange) feel grounded and handmade; bright oranges feel playful and fast. Orange is a strong call-to-action color because it stands out against blue and neutral interfaces. Most mid oranges need dark text, not white, to pass contrast.
Ledger Light (#1747D1). Blue is the most trusted color in digital products. It signals stability, competence and calm, which is why banks, SaaS tools and health platforms default to it. Because so many products already use blue, the shade matters more than the hue. Pair it with an unexpected neutral or accent so the interface does not look like every other dashboard.
Protocol (#4CC9F0). Teal and cyan sit between blue's trust and green's freshness. They read as clear, clinical, modern and a little optimistic. Teal makes a strong primary for health, fintech and productivity tools. Check contrast carefully: mid teals often fail with white text at small sizes.
Mint Chain (#A0F0C8). Green reads as growth, health, money and calm. Muted greens feel natural and organic; saturated greens feel fresh and energetic. In interfaces green is already wired to mean success and confirmation, so if you use it as a brand color, pick a different hue (or a much darker shade) for success states so the two never get confused.
Contrast check
All four palettes at a glance
| Palette | Primary | Accent | Surface | Text | Text contrast |
|---|---|---|---|---|---|
| Cold Wallet | #F5A524 | #3DD6F5 | #0E1116 | #E9EDF2 | 16.1:1 |
| Ledger Light | #1747D1 | #F2B705 | #FFFFFF | #0F172A | 17.9:1 |
| Protocol | #4CC9F0 | #F72585 | #0B1026 | #E6E9F5 | 15.5:1 |
| Mint Chain | #A0F0C8 | #FF8A5B | #121212 | #F2F2F2 | 16.7:1 |
Export the Cold Wallet palette
:root {
--color-primary: #F5A524;
--color-accent: #3DD6F5;
--color-surface: #0E1116;
--color-muted: #1B2028;
--color-text: #E9EDF2;
}// tailwind.config.js
theme: {
extend: {
colors: {
primary: "#F5A524",
accent: "#3DD6F5",
surface: "#0E1116",
muted: "#1B2028",
ink: "#E9EDF2",
},
},
}Using color in crypto & web3 interfaces
- Keep pure green and red for price up and price down; never use them as brand colors.
- Add plus and minus signs or arrows to price changes so color-blind users can read them.
- Use tabular numbers for prices and balances so columns line up.
- Give confirmation screens (send, swap) a distinct, calm color so users slow down.
Avoid rainbow gradients across the whole interface and low-contrast grey-on-black text. Both hurt trust when real money is involved.
Common crypto & web3 color mistakes
- Green or red as the brand color. In trading products these already mean price up and price down. A green brand makes every header look like a gain.
- Low-contrast grey text on black. Common in dark crypto UIs, and a real problem when users are reading wallet addresses and amounts.
- Glowing gradients on confirmation screens. Irreversible actions need calm, clear screens that slow people down, not decorative effects.
How to build your own crypto & web3 palette
- Start with one primary. Pick the color that will carry buttons and key actions. For crypto & web3, the schemes above use colors like #F5A524, #1747D1, #4CC9F0, #A0F0C8. Check that it reaches at least 4.5:1 with its button label.
- Add one accent. The accent is for highlights, badges and secondary emphasis. It should contrast in hue with the primary, the way #3DD6F5 offsets #F5A524 in Cold Wallet.
- Choose a tinted surface. Instead of pure white, use a surface with a hint of your palette, like #0E1116. It reduces glare and makes the brand feel considered.
- Set a muted panel color. A slightly deeper neutral (for example #1B2028) separates cards, sidebars and table headers without borders.
- Pick a dark text color, not pure black. A deep, tinted neutral like #E9EDF2 keeps text readable while matching the rest of the palette. Then test every pairing against the WCAG contrast guideline.
A dark mode version
To build a dark theme from the Cold Wallet palette, flip the surface and text roles: #E9EDF2 becomes the background and #0E1116 becomes the text, which keeps the same 16.1:1 contrast. Use #3DD6F5 for buttons and links, since it reaches 1.5:1 against the dark surface, and lift panels one step lighter than the background instead of adding borders.
Avoid simply inverting every color. Saturated colors look more intense on dark backgrounds, so most dark themes slightly desaturate the accent and reserve the brightest version for small elements like focus rings and active states.
Color across your crypto & web3 brand
Marketing site. On the marketing site, a bold brand color and dark hero sections are fine, as long as trust signals (security, audits, regulation) are clearly visible and readable.
Product or app. In the trading or wallet interface, the brand color steps back. Green and red belong to price movement, neutral greys structure the data and the brand color marks primary actions only.
Emails and print. Transaction emails and push notifications should be plain and unambiguous: amounts, addresses and status in high-contrast text, with no decorative gradients that could look like phishing.
Accessibility checklist for crypto & web3 interfaces
- Body text reaches at least 4.5:1 against its background. In the palettes above, 4 of 4 text and surface pairs meet this out of the box.
- Buttons, inputs and icons reach at least 3:1 against their surroundings, as required by WCAG non-text contrast.
- Status, errors and selections are shown with an icon or label as well as color, following WCAG use of color.
- Focus states are visible on every interactive element, in a color that contrasts with both the surface and the primary.
- Charts and data use colors that remain distinguishable in grayscale, or add patterns and direct labels.
Crypto & Web3 color trends
Exchanges targeting mainstream users increasingly offer light, bank-like interfaces alongside dark trading views. Protocols and NFT platforms experiment with stronger identities, but successful ones keep the core transaction flow neutral and readable.
Generate a crypto & web3 UI in this palette
Inspo AI turns the Cold Wallet palette into a complete, responsive screen grounded in real crypto & web3 products.
Sources and further reading
- WCAG 2.1: Contrast (Minimum) · The W3C rule behind the 4.5:1 and 3:1 thresholds used on this page.
- WCAG 2.1: Non-text Contrast · Contrast requirements for buttons, borders and icons.
- WCAG 2.1: Use of Color · Why color should never be the only way information is shown.
- Tailwind CSS: Customizing colors · How to add a custom color scale to your theme.
Palettes for other industries
Questions people ask
Why do crypto apps use dark mode?
Traders watch charts for long periods, and dark backgrounds reduce glare and make price colors pop. Mainstream exchanges often offer a light mode too.
What color represents trust in crypto?
Deep blues and navy signal trust, while gold and amber signal value. Combine one of each for a secure but energetic feel.
Should a crypto brand use green?
Avoid using green as your main brand color in trading products because users read green as 'price up'. It is fine for non-trading Web3 brands.
Why do crypto brands use gold or orange?
Gold and amber suggest value and are associated with Bitcoin's orange identity. They also stand out on dark backgrounds.
Should crypto apps use light mode?
Offering both is best. Light mode helps newcomers and daytime use; dark mode suits active traders.
↘ Building Inspo AI | AI-Powered Design Research & Builder Platform | Design Engineer.