If you searched for an “ethereum color,” you probably do not need a design lecture. You need the right hex code, the logo colors, and a way to use them without making an interface, token page, wallet screen, or presentation look unofficial.
The short answer: the canonical Ethereum diamond logo is primarily grayscale, not purple or blue. The familiar blue Ethereum icon used across exchanges, wallets, and token lists is common in the ecosystem, but it should not be treated as the only official Ethereum logo treatment. Purple and blue tones are better understood as supporting Web3/Ethereum-adjacent design colors, not replacements for the original logo facets.
Use the official SVG whenever possible. Hex values are useful for UI systems, CSS variables, Figma libraries, token pages, and brand matching—but manually rebuilding the logo from color codes is easier to get wrong than most teams expect.
What are the official Ethereum logo hex codes?
The Ethereum diamond mark is made from multiple faceted gray tones. These are the core hex values commonly found in the canonical Ethereum logo artwork.
| Color role | Hex | RGB | Best use |
|---|---|---|---|
| Dark charcoal facet | #343434 |
52, 52, 52 |
Upper-left logo facet, dark UI accents |
| Dark gray facet | #3C3C3D |
60, 60, 61 |
Upper-right logo facet, text-safe dark gray |
| Medium gray facet | #8C8C8C |
140, 140, 140 |
Highlight facets, secondary icon detail |
| Near-black facet | #141414 |
20, 20, 20 |
Deep lower facet, high-emphasis dark areas |
| Onyx gray facet | #393939 |
57, 57, 57 |
Lower-right logo facet, dark surfaces |
The most practical way to use these colors is not to redraw the logo from scratch. Download the official SVG, preserve the geometry, and only use these hex values when you need supporting interface colors or when auditing whether a logo file has been altered.
The safest CSS variables
If you are building a design system, define the logo colors separately from your UI palette:
:root {
--eth-logo-charcoal: #343434;
--eth-logo-dark-gray: #3C3C3D;
--eth-logo-medium-gray: #8C8C8C;
--eth-logo-near-black: #141414;
--eth-logo-onyx: #393939;
--eth-ecosystem-blue: #627EEA;
--eth-muted-purple: #8A92B2;
}
Keep the naming honest. --eth-logo-* should refer to the actual mark. Blue and purple tokens should be labeled as ecosystem or interface colors unless your source asset explicitly defines them as part of a specific Ethereum brand system.
Is Ethereum purple, blue, or gray?
Ethereum is most accurately gray at the logo level.
The confusion comes from three different visual systems being mixed together:
| Visual context | Typical color | What it means |
|---|---|---|
| Official Ethereum diamond logo | Grays: #343434, #3C3C3D, #8C8C8C, #141414, #393939 |
Canonical faceted mark |
| Exchange and wallet token icons | Blue: #627EEA with white logo |
Common ETH asset icon style |
| Web3 landing pages and UI gradients | Purple, blue, lavender, indigo | Design language associated with crypto, not always official branding |
That distinction matters.
A wallet using a blue circle with a white Ethereum glyph is probably following a recognizable token-icon convention. A protocol claiming an official Ethereum Foundation partnership because it uses the Ethereum logo in blue and purple gradients is doing something different. The colors may look familiar, but color familiarity is not the same as endorsement.
Quick rule
Use gray for the Ethereum logo.
Use blue or purple for surrounding UI only when the design context makes it clear that Ethereum is a supported network, asset, or topic—not the owner or sponsor of the product.
Which Ethereum blue and purple tones are safest for UI design?
If you need blue or purple tones for a brand-safe Ethereum-related interface, use them as companion colors rather than logo replacements.
| Color | Hex | RGB | Recommended use | Caution |
|---|---|---|---|---|
| Ethereum ecosystem blue | #627EEA |
98, 126, 234 |
Token icon background, badges, selected network states, charts | Commonly used, but not a substitute for the grayscale logo |
| Muted Ethereum purple | #8A92B2 |
138, 146, 178 |
Subtle backgrounds, cards, gradients, documentation accents | Too low-contrast for small white text |
| Logo dark gray | #3C3C3D |
60, 60, 61 |
Headings, monochrome logo, high-contrast UI | Can feel heavy if overused |
| Logo medium gray | #8C8C8C |
140, 140, 140 |
Secondary icon facets, dividers, non-text decoration | Fails normal text contrast on white |
| Near-black | #141414 |
20, 20, 20 |
Dark mode surfaces, monochrome logo, footer backgrounds | Avoid placing dark logo on it without inversion |
A good Ethereum-related UI usually uses the official gray mark, then lets blue or purple carry interaction states: active chain, selected wallet, token badge, chart highlight, or callout background.
A bad one recolors the Ethereum logo into a neon gradient and assumes users will still read it as official.
How should the Ethereum logo be used on light and dark backgrounds?
The Ethereum logo is simple, but it is easy to damage visually. The most common problem is contrast: the lighter gray facets disappear on pale backgrounds, and the darker facets vanish on black surfaces.
| Background | Best logo treatment | Avoid |
|---|---|---|
| White or very light UI | Original grayscale logo or dark monochrome mark | Low-opacity gray logo |
| Dark gray or black UI | White monochrome logo or high-contrast inverted mark | Original dark grayscale logo without adjustment |
Ethereum blue #627EEA |
White logo | Full grayscale logo with low contrast |
| Purple or gradient background | White logo with enough clear space | Multicolor logo on busy gradients |
| Token icon circle | White logo on blue circle | Rebuilding the faceted logo at tiny sizes |
Recommended pairings
| Use case | Background | Logo/color choice | Why it works |
|---|---|---|---|
| Documentation header | White #FFFFFF |
Original grayscale logo | Looks canonical and avoids overbranding |
| Wallet network selector | Blue #627EEA |
White Ethereum glyph | Recognizable at small sizes |
| Dark mode footer | Near-black #141414 |
White monochrome logo | Better contrast than original dark facets |
| Analytics chart | White or dark UI | Blue #627EEA for ETH line |
Separates data visualization from logo usage |
| Conference slide | Dark purple gradient | White logo, large clear space | Strong visibility from a distance |
The smaller the logo appears, the less useful the original faceting becomes. At favicon, token-list, or mobile navigation sizes, a simple white glyph on a solid background is usually more legible than the full grayscale mark.
Are the gray logo colors accessible for text?
Not always.
Logo colors are not automatically safe for body text, buttons, or labels. A color can be official and still fail accessibility contrast requirements in a UI.
Approximate contrast guidance:
| Color | On white | On black | Practical recommendation |
|---|---|---|---|
#141414 |
Strong | Poor | Good for text on light backgrounds |
#343434 |
Strong | Poor | Good for headings and body text on white |
#3C3C3D |
Strong | Poor | Safe dark text color |
#393939 |
Strong | Poor | Safe dark text color |
#8C8C8C |
Weak for normal text | Strong | Use for decoration or large text only |
#627EEA |
Borderline for normal text | Strong | Better for buttons, icons, charts, and large text |
#8A92B2 |
Weak for normal text | Strong | Better as an accent or background tint |
For normal text on white, prefer #141414, #343434, #393939, or #3C3C3D.
Do not use #8C8C8C for small body copy on white. It may look refined in a design file, but it becomes hard to read on real devices, especially on lower-quality displays or in bright light.
Should you use the official SVG or recreate the Ethereum logo with hex codes?
Use the SVG unless you have a strong reason not to.
| Approach | Pros | Cons | Best for |
|---|---|---|---|
| Official SVG asset | Accurate geometry, correct facets, scalable, lightweight | Requires asset management | Websites, apps, docs, decks, design systems |
| PNG export | Easy to drop into tools, predictable rendering | Can blur, not ideal for dark/light variants | Slides, quick mockups, social posts |
| Manual rebuild from hex codes | Full control in design tools | Easy to distort proportions or facet order | Rare custom illustration work |
| Monochrome logo | High contrast, flexible, works at small sizes | Loses original faceted detail | Dark mode, favicons, badges, token icons |
The logo’s geometry matters as much as its colors. A slightly stretched Ethereum diamond looks amateur even if every hex code is correct.
Expert tip
If you need a custom color treatment, start with the official SVG and apply color overrides to the existing paths. Do not trace a low-resolution PNG. Tracing introduces uneven facets, incorrect angles, and tiny alignment errors that are obvious beside a real Ethereum logo.
How do Ethereum colors work in token icons and wallet UIs?
Wallets and exchanges often use a simplified ETH icon: white Ethereum glyph, blue circular background, sometimes using #627EEA.
That treatment is practical. It solves three problems:
- The icon stays recognizable at 16–32 px.
- The white glyph has strong contrast.
- The blue circle separates ETH from other grayscale assets.
A realistic wallet row might look like this:
| Element | Recommended color |
|---|---|
| ETH icon background | #627EEA |
| ETH glyph | #FFFFFF |
| Token symbol text | #141414 or #FFFFFF in dark mode |
| Secondary balance text | Avoid #8C8C8C on white unless large enough |
| Selected network state | Blue #627EEA or a darker accessible variant |
This is why the blue Ethereum icon feels “official” to many users. They see it in wallets, token lists, portfolio dashboards, and exchange interfaces. But in brand terms, it is better described as a widely recognized ecosystem convention.
How should Ethereum colors be used in charts, dashboards, and DeFi interfaces?
For analytics products, portfolio tools, DEX interfaces, bridge screens, and DeFi dashboards, the goal is clarity before decoration.
Ethereum colors should help users understand what they are looking at.
| Interface element | Good use of Ethereum color | Poor use |
|---|---|---|
| Network badge | Blue icon with ETH glyph | Large glowing Ethereum logo behind content |
| Gas fee label | Neutral gray text with ETH icon | Purple text that looks clickable but is not |
| ETH price chart | Blue line for ETH | Five Ethereum logo grays used as chart series |
| Bridge route | Ethereum badge on source/destination chain | Using Ethereum colors for unrelated chains |
| Swap confirmation | ETH icon next to asset amount | Ethereum logo as a decorative background watermark |
For example, if a user is swapping ETH to USDC, the Ethereum icon should identify the asset or chain. It should not compete with execution details such as price impact, gas, slippage, and route. Platforms such as switchfi.app automatically compare multiple liquidity sources before selecting an execution route; in that kind of interface, color should clarify the route and asset context rather than act as brand decoration.
What is the best Ethereum color palette for a design system?
A practical Ethereum-safe palette separates identity colors from interface colors.
| Token name | Hex | Role |
|---|---|---|
eth.logo.nearBlack |
#141414 |
Deep logo facet, dark text |
eth.logo.charcoal |
#343434 |
Logo facet, headings |
eth.logo.darkGray |
#3C3C3D |
Logo facet, UI text |
eth.logo.onyx |
#393939 |
Logo facet, dark UI |
eth.logo.mediumGray |
#8C8C8C |
Logo highlight, non-text decoration |
eth.ecosystem.blue |
#627EEA |
Token icon background, active states |
eth.ecosystem.purpleMuted |
#8A92B2 |
Subtle backgrounds, accents |
eth.base.white |
#FFFFFF |
Monochrome logo, negative space |
Suggested light-mode usage
| UI role | Color |
|---|---|
| Primary text | #141414 |
| Secondary text | #3C3C3D with opacity or a tested neutral |
| Logo | Official grayscale SVG |
| ETH badge | #627EEA background with white glyph |
| Divider | A lighter neutral, not raw #8C8C8C if too heavy |
| Accent card | Very light tint derived from #627EEA or #8A92B2 |
Suggested dark-mode usage
| UI role | Color |
|---|---|
| Background | #141414 or a tested dark neutral |
| Primary text | #FFFFFF |
| Logo | White monochrome Ethereum glyph |
| ETH badge | #627EEA background with white glyph |
| Muted text | Use a contrast-tested gray, not blindly #8C8C8C |
| Accent | #627EEA or muted purple, tested against the surface |
Do not force every Ethereum logo color into your interface palette. The logo has five grays because it is faceted artwork, not because your app needs five competing neutral tokens.
Pros and cons of using Ethereum’s original grayscale palette
| Pros | Cons |
|---|---|
| Most faithful to the canonical Ethereum logo | Can feel too neutral for modern app interfaces |
| Works well in documentation, reports, and professional materials | Lower logo facets may lose contrast on dark backgrounds |
| Avoids confusing Ethereum with a specific wallet, exchange, or token-list style | Less recognizable at tiny sizes than the blue circular ETH icon |
| Easy to combine with neutral typography | Medium gray is not reliable for small text on white |
| Less likely to imply unofficial branding changes | Requires care when placed on gradients or photos |
The grayscale palette is best for official-looking materials. The blue icon style is often better for product UI. Purple and blue accents are useful when you need a more contemporary Web3 feel, but they should not override logo accuracy.
Common mistakes with Ethereum colors
Mistake 1: Treating #627EEA as the only official Ethereum color
#627EEA is widely recognized, especially in token icons, but the canonical Ethereum diamond logo is grayscale. Use the blue carefully and label it correctly in your design system.
Mistake 2: Using logo gray as body text without checking contrast
#8C8C8C often looks elegant in Figma and weak in production. Test it on actual screens before using it for labels, captions, or secondary balances.
Mistake 3: Recoloring the Ethereum logo into a gradient
A gradient Ethereum logo may look good in a hero section, but it can reduce brand recognition and create confusion. If you need a gradient, put it behind the logo and keep the mark white or grayscale.
Mistake 4: Stretching or compressing the diamond
Incorrect proportions are more noticeable than slightly imperfect color. Always lock aspect ratio.
Mistake 5: Using Ethereum colors to imply endorsement
Showing Ethereum as a supported chain is fine. Designing a page so it looks like it is operated by Ethereum Foundation is not. Color, logo placement, and copy all contribute to that impression.
Mistake 6: Using the detailed logo at very small sizes
The faceted grayscale mark can become muddy below small icon sizes. For favicons, chain selectors, and token chips, a simplified white glyph on blue or dark background usually reads better.
Expert tips for brand-safe Ethereum design
Keep the logo separate from the UI palette
Your Ethereum logo asset should remain consistent. Your interface colors can be adapted for accessibility, dark mode, and product hierarchy.
Use monochrome versions intentionally
A white Ethereum logo on blue, black, or purple can be more legible than the original grayscale version. This is especially true in mobile apps and dashboards.
Test colors in the real environment
Ethereum colors behave differently in:
- OLED dark mode
- low-brightness mobile screens
- projected conference slides
- compressed social media images
- browser-rendered SVGs
- token-list icons at 24 px
A color that looks perfect in a desktop design tool may fail in production.
Do not overuse purple
Purple is strongly associated with Web3 design, but too much purple can make Ethereum-related content look generic. Use Ethereum’s grayscale mark and reserve purple for subtle support: gradients, panels, illustrations, or secondary accents.
Use blue for recognition, not decoration
Blue works best where users need fast recognition: ETH asset icons, selected Ethereum network states, chart series, and badges. If every button is Ethereum blue, the signal gets weaker.
Practical examples
Example 1: ETH token card on a white dashboard
A portfolio card shows ETH balance, price, and 24-hour change.
Recommended treatment:
| Element | Color choice |
|---|---|
| ETH icon | Blue #627EEA circle with white glyph |
| Token name | #141414 |
| Balance | #141414 |
| Secondary fiat value | Dark accessible gray, not raw low-contrast gray |
| Mini chart | #627EEA line |
This works because blue identifies ETH quickly while the content remains readable.
Example 2: Ethereum documentation page
A documentation page needs a professional, neutral feel.
Recommended treatment:
| Element | Color choice |
|---|---|
| Header logo | Official grayscale SVG |
| Body text | #141414 or #343434 |
| Links | Accessible blue, tested for contrast |
| Code blocks | Neutral dark/light theme |
| Decorative accents | Minimal muted purple or blue |
The official grayscale logo is the better choice here because documentation benefits from restraint and authority.
Example 3: Dark-mode DeFi transaction screen
A user is reviewing an ETH transaction in a dark interface.
Recommended treatment:
| Element | Color choice |
|---|---|
| Background | #141414 or similar dark surface |
| ETH logo | White glyph |
| Network badge | Blue #627EEA |
| Gas estimate | White primary text, muted secondary label |
| Warning states | Do not use Ethereum blue; use clear warning colors |
Do not use the original dark grayscale logo on a near-black background. It will disappear.
Example 4: Conference slide with Ethereum branding
A speaker needs a slide about Ethereum staking.
Recommended treatment:
| Element | Color choice |
|---|---|
| Background | Dark neutral or subtle purple gradient |
| Ethereum logo | White, large, with clear space |
| Main heading | White |
| Supporting text | High-contrast light gray |
| Data highlight | Blue #627EEA |
Slides are viewed at distance, often on imperfect projectors. High contrast matters more than preserving every logo facet.
Ethereum color checklist before publishing
Use this checklist before shipping a website, wallet screen, deck, or token page:
- Did you use the official Ethereum SVG where possible?
- Are the logo proportions unchanged?
- Are grayscale logo colors preserved unless there is a clear reason to use monochrome?
- Is
#627EEAused as an ecosystem/token UI color rather than falsely treated as the full official logo palette? - Does every text color pass contrast requirements?
- Is the logo visible on both light and dark backgrounds?
- Are purple and blue accents supporting the design instead of replacing the logo identity?
- Does the page avoid implying Ethereum Foundation endorsement?
- Does the icon remain recognizable at small sizes?
- Have SVG, PNG, and dark-mode versions been checked in production?
FAQ
What is the main Ethereum logo color?
The canonical Ethereum logo is not one flat color. It uses several grayscale facets, including #343434, #3C3C3D, #8C8C8C, #141414, and #393939.
What is the Ethereum blue hex code?
The commonly used Ethereum ecosystem blue is #627EEA. It is often used as a circular background for ETH token icons with a white Ethereum glyph.
Is #627EEA an official Ethereum color?
It is widely used across the Ethereum ecosystem, especially in token icons and wallet UIs. The original Ethereum diamond logo itself is grayscale, so #627EEA should be treated as an ecosystem/UI color unless your specific source asset defines it otherwise.
What is the Ethereum purple hex code?
A commonly used muted Ethereum-adjacent purple is #8A92B2. Use it as a supporting accent, not as a replacement for the official grayscale logo colors.
Can I use the Ethereum logo in white?
Yes, a white monochrome Ethereum logo is often the best choice on dark, blue, purple, or gradient backgrounds. It is also more legible at small sizes.
Can I recolor the Ethereum logo?
You can technically recolor SVG paths, but brand-safe usage usually means preserving the official grayscale or using a clean monochrome version. Avoid decorative gradients, shadows, and distorted proportions.
Why do wallets show Ethereum as a blue icon?
Blue token icons are easier to recognize at small sizes and provide strong contrast with a white Ethereum glyph. This is a practical UI convention, not necessarily the full official brand palette.
Which Ethereum color should I use for text?
For text on white, use darker colors such as #141414, #343434, #393939, or #3C3C3D. Avoid using #8C8C8C for small text on white because it may not provide enough contrast.
What color should I use for an ETH price chart?
#627EEA is a strong choice for ETH chart lines because users already associate it with Ethereum token icons. Keep the official logo separate from chart styling.
Is the Ethereum logo black or gray?
The faceted logo is gray, with near-black and medium-gray facets. A black or white monochrome version is commonly used when contrast or simplicity matters more than preserving the faceted artwork.
What background works best with the Ethereum logo?
White works well with the original grayscale logo. Dark, blue, or purple backgrounds usually work better with a white monochrome Ethereum logo.
Can I use Ethereum colors for my own crypto project?
You can use Ethereum-related colors to show Ethereum support or compatibility, but avoid creating confusion around ownership, endorsement, or affiliation. Your project should have its own distinct brand identity.
Key takeaways
- The canonical Ethereum logo palette is grayscale, not primarily purple or blue.
- Core logo hex codes include
#343434,#3C3C3D,#8C8C8C,#141414, and#393939. #627EEAis the widely recognized Ethereum ecosystem blue used in many ETH token icons.- Purple tones such as
#8A92B2are best used as supporting UI accents, not official logo colors. - Use the official SVG whenever possible instead of manually rebuilding the logo.
- For dark backgrounds, a white monochrome Ethereum logo is usually more legible than the full grayscale mark.
- Do not use medium gray logo colors for small text without checking contrast.
- Color should clarify Ethereum support, not imply endorsement.
Final Verdict
For brand-safe Ethereum design, use the official grayscale logo as the source of truth. The correct logo hex codes are the faceted grays: #343434, #3C3C3D, #8C8C8C, #141414, and #393939.
Use #627EEA when you need the familiar Ethereum blue for token icons, network badges, charts, or selected states. Use muted purple sparingly as a supporting design accent. Do not recolor the official logo unless contrast, size, or background treatment requires a clean monochrome version.
The safest workflow is simple: official SVG for the mark, tested colors for the interface, and clear separation between Ethereum identity and your product’s own brand.
