Logo Color Management & File Naming

Managing logo color variants is a recurring source of client confusion. Browser rendering differences, inconsistent file naming, and undocumented gradient usage can all make technically correct files appear wrong to clients. This article captures best practices for avoiding these issues.

The Core Problem

Clients often perceive a color mismatch between logo variants even when the underlying vector files use identical brand-book colors. This typically stems from three causes:

1. Browser preview rendering — Chrome and other browsers do not render SVG/AI files with color-accurate previews. What looks like a color discrepancy in a file browser or web preview may not exist in the actual exported asset.
2. RGB vs. CMYK color space — Exported raster files (PNG, JPEG) may appear differently depending on the color profile used during export.
3. Uncalibrated client screens — Clients reviewing files on uncalibrated monitors will perceive color differences that don't exist in the files themselves.

Real example: During Bluepoint logo work, the "solid blue" and "gradient blue" variants appeared to have different blues in browser preview, but opening both in Illustrator confirmed the underlying colors were identical. The discrepancy was entirely a preview artifact. See ^[1] for context.

File Naming Conventions

Ambiguous file names are a primary driver of client confusion. When a file is named simply logo-blue.png, neither the client nor a future team member can tell whether it uses a gradient or a flat fill.

Rules

• Always include the fill type in the filename. Use suffixes like -gradient, -solid, or -flat.
• ✅ bluepoint-logo-blue-gradient.png
• ✅ bluepoint-logo-blue-solid.png
• ❌ bluepoint-logo-blue.png
• Include the background variant where relevant: -on-white, -on-dark, -transparent.
• Apply naming conventions consistently across all sub-brands. If a primary brand has both Bluepoint and Bluepoint ATM logos, both sets must follow the same naming scheme.

Managing Gradient vs. Solid Variants

Gradients are often used in practice before they are formally documented in a brand guide. This creates a gap where the gradient looks "right" to the client but has no official specification.

Recommended approach

1. Document the gradient in the brand guide as soon as it enters active use. Note the specific colors used at each gradient stop.
2. Update the solid/flat variant to use the most vibrant color from the gradient (typically the lighter or brighter stop) so that the flat version reads as visually consistent with the gradient version — even if they are technically different fills.
3. Do not alter approved website CSS colors to match logo file updates. Website colors and logo file colors are managed separately and changes to one do not require changes to the other.

Real example: Bluepoint's gradient logo used a vibrant blue that was not present in the brand guide's solid color palette. The resolution was to update the solid logo to use the brighter blue from the gradient, and to formally add the gradient specification to the brand guide. The website's existing dark/light blue CSS values were left unchanged.

Source of Truth: Design Assets Folder

Working files and final deliverables must be kept in separate locations.

• Working files live in the project folder during active development.
• Final, approved assets must be moved to the design assets folder before delivery or client access is granted.
• The design assets folder is the single source of truth. Any file pulled from this folder should be guaranteed to be the correct, approved version.
• Never share a project working folder directly with a client. Always ensure final assets are promoted to design assets first.

Checklist: Logo Delivery

Before delivering logo files to a client:

• [ ] All variants include fill type in filename (-gradient, -solid, -flat)
• [ ] Gradient specification is documented in the brand guide
• [ ] Solid variant color matches the brightest color in the gradient
• [ ] All sub-brand logos (e.g., ATM variant) have matching variant sets
• [ ] Final files are copied to the design assets folder
• [ ] Files have been opened in Illustrator (not just previewed in browser) to verify color accuracy before delivery

Related

• ^[1]
• ^[2]
• ^[3]