×

HubSpot Guide: Change Text Color

/ CRM, Hubspot / By

HubSpot Guide: Change Text Color with CSS

Changing text color with CSS is a core skill for anyone styling pages, blog posts, or landing pages in a HubSpot-inspired workflow. By mastering a few key CSS properties, you can improve readability, create visual hierarchy, and keep your branding consistent across your site.

This tutorial walks through the most useful ways to change text color using CSS, mirroring best practices you would apply in a HubSpot content or CMS environment.

HubSpot Style Basics: CSS Color Options

Before you start writing CSS, you need to understand the main ways to define color values. These apply whether you are editing style sheets in a CMS like HubSpot or a standalone site.

  • Named colors — e.g., red, blue, black
  • Hex values — e.g., #000000 for black, #ff0000 for red
  • RGB — e.g., rgb(255, 0, 0)
  • RGBA (with transparency) — e.g., rgba(255, 0, 0, 0.7)
  • HSL / HSLA — hue, saturation, lightness formats

The key property for text color is:

color: #333333;

You will use color repeatedly in your style sheets, theme files, or custom modules, just as you would in a HubSpot design manager.

How to Change Text Color with CSS

There are three primary strategies used in any modern CMS, including a HubSpot-like setup:

  1. Target global HTML elements
  2. Use classes and IDs for finer control
  3. Apply inline styles as a last resort

1. Global Element Selectors in a HubSpot-Style Theme

Global selectors let you define a default text color for headings and paragraphs site-wide. This is ideal for enforcing brand guidelines in themes, templates, or HubSpot-like style sheets.

body {
  color: #333333;
}

h1, h2, h3, h4, h5, h6 {
  color: #111111;
}

p {
  color: #555555;
}

Place rules like these in your main CSS file or theme stylesheet so every page inherits a consistent base color scheme.

2. Using Classes for Reusable Text Styles

In a content management workflow similar to HubSpot, classes are the most flexible and maintainable way to control text color. You create a class once, then apply it wherever needed.

.text-primary {
  color: #1a73e8; /* Brand blue */
}

.text-secondary {
  color: #6b7280; /* Muted gray */
}

.text-accent {
  color: #ef4444; /* Accent red */
}

Example HTML usage:

<p class="text-primary">This paragraph uses the primary brand color.</p>
<span class="text-accent">This span highlights important text.</span>

This approach keeps your content editable while the design system remains centralized, just as it would in a HubSpot theme or custom module.

3. Using IDs for One-Off Text Color Needs

IDs are useful for single, unique elements that must have a specific text color, such as a hero heading or a promotional message.

#hero-heading {
  color: #0f172a;
}

#limited-offer {
  color: #b91c1c;
}

Example HTML:

<h1 id="hero-heading">Welcome to Our Site</h1>
<p id="limited-offer">Limited time offer ends soon!</p>

In a HubSpot-style content editor, you would typically control these via modules or template fields, but the CSS logic is the same.

HubSpot-Inspired Tips for Link and Hover Colors

Links and hover states are critical for user experience and branding. Most sites built with or inspired by HubSpot design patterns use distinctive link colors and hover effects.

Setting Link Colors

a {
  color: #1d4ed8; /* Default link color */
  text-decoration: none;
}

a:visited {
  color: #4b5563; /* Visited link color */
}

This ensures all links follow your brand palette, regardless of where they appear in your CMS or HubSpot-style modules.

Adding Hover and Focus Styles

a:hover, a:focus {
  color: #1e40af; /* Darker blue on hover */
  text-decoration: underline;
}

These hover and focus rules make links more accessible and interactive, which is especially important on conversion-focused HubSpot landing pages.

Inline Styles vs. Stylesheets in a HubSpot Workflow

Sometimes you may be tempted to change text color directly in the HTML. That is possible, but it should be used sparingly.

Inline Style Example

<p style="color: #10b981;">
  This paragraph uses an inline text color.
</p>

While this works, inline styles are harder to maintain and override. In larger projects or HubSpot-based campaigns, central style sheets and theme settings are preferred.

Why Stylesheets Are Better

  • Easier to update site-wide colors later
  • Cleaner HTML and templates
  • Consistent branding across all pages and modules
  • Better performance due to caching of CSS files

Reserve inline color styles for quick prototypes or one-off tests, and then move successful experiments into your main CSS or HubSpot theme settings.

Advanced HubSpot-Like Techniques for Text Color

Once your basic color system is in place, you can refine it with more advanced CSS techniques that align well with professional HubSpot-style design systems.

Using CSS Variables for Color Systems

CSS variables let you define your color palette in one place and reuse it everywhere, similar to design tokens in a HubSpot theme.

:root {
  --color-text-main: #111827;
  --color-text-muted: #6b7280;
  --color-brand-primary: #2563eb;
}

body {
  color: var(--color-text-main);
}

.muted {
  color: var(--color-text-muted);
}

.brand-link {
  color: var(--color-brand-primary);
}

If you later rebrand or adjust your palette, you only need to change the variable definitions, and all HubSpot-style templates and modules that reference them will update automatically.

Responsive Text Color Based on Background

Sometimes you design blocks with different background colors, like dark hero sections. In that case, you want contrasting text colors to maintain accessibility.

.section-dark {
  background-color: #0f172a;
  color: #f9fafb;
}

.section-dark h2,
.section-dark p {
  color: #e5e7eb;
}

This pattern is common in marketing pages and can be implemented easily in a HubSpot-like module system where each section type has its own class.

Applying These CSS Tips in HubSpot-Style Projects

Whether you manage a full CMS, a blog, or a series of landing pages, the principles above help you keep typography and colors consistent, just like a well-structured HubSpot implementation.

  • Define a core palette and document hex values
  • Create base styles for body, headings, and paragraphs
  • Use utility classes for brand, accent, and muted colors
  • Standardize link and hover colors across your site
  • Use CSS variables for scalable design systems

For deeper strategy on implementation and optimization, you can review the original HubSpot tutorial on changing text color with CSS here: HubSpot change text color CSS guide.

If you need expert help planning or auditing your CSS, SEO, or analytics setup, you can also consult specialists at Consultevo for technical and strategic guidance.

By combining these CSS practices with structured content and thoughtful design, you can deliver polished, brand-consistent experiences in any system modeled after HubSpot, while keeping your styles clean, maintainable, and easy to scale.

Need Help With Hubspot?

If you want expert help building, automating, or scaling your Hubspot , work with ConsultEvo, a team who has a decade of Hubspot experience.

Scale Hubspot

“`

Verified by MonsterInsights