×

HubSpot CSS Colors Guide

/ CRM, Hubspot / By

HubSpot CSS Colors Guide for Modern Websites

Designers who admire the Hubspot style of clean, consistent interfaces often want to master CSS colors so they can create similarly polished websites. This guide explains how CSS color values work, how to apply them in real projects, and how to choose accessible palettes that echo the clarity of professional design systems.

If you are building a brand style guide, refreshing a theme, or collaborating with developers, understanding CSS colors is essential. Below you will find practical examples using hex codes, RGB, HSL, and named colors, plus tips for accessibility and workflow.

Understanding CSS Color Values for HubSpot-Style Design

CSS supports several main color formats. You can mix and match these formats in one project as long as you stay consistent and organized.

Hex color codes

Hex codes are the most common way to define colors in CSS. They are written as a hash symbol followed by six or eight characters.

  • #RRGGBB — red, green, blue
  • #RRGGBBAA — red, green, blue, alpha (opacity)

Example usage:

body {
  background-color: #ffffff;
  color: #334155;
}

.button-primary {
  background-color: #2563eb;
  color: #ffffff;
}

Short hex codes are also allowed, where three or four characters are expanded by the browser:

h1 {
  color: #333;
}

.badge {
  background-color: #0f08; /* with transparency */
}

RGB and RGBA colors

RGB colors describe red, green, and blue as numbers between 0 and 255. RGBA adds an alpha channel (opacity) from 0 to 1.

.hero {
  background-color: rgb(15, 118, 110);
}

.hero-overlay {
  background-color: rgba(15, 23, 42, 0.8);
}

Use RGBA when you want a translucent overlay effect similar to high-end marketing pages.

HSL and HSLA colors

HSL can be easier than hex when you want flexible color systems that resemble what you see in enterprise tools like HubSpot.

  • Hue: degree on the color wheel (0–360)
  • Saturation: intensity (0%–100%)
  • Lightness: brightness (0%–100%)
.card {
  background-color: hsl(210, 40%, 98%);
  border: 1px solid hsl(210, 30%, 90%);
}

.card-title {
  color: hsl(222, 47%, 11%);
}

HSLA adds opacity just like RGBA:

.card-shadow {
  box-shadow: 0 10px 30px hsla(222, 47%, 11%, 0.2);
}

Named Colors vs. Custom Palettes in a HubSpot-Inspired System

CSS includes a list of named colors such as red, blue, or lightgray. These are quick to prototype with but too vague for serious brand work.

Why named colors are limited

  • They do not map to a specific brand identity.
  • They can be inconsistent across design tools.
  • They make it difficult to maintain design tokens.

Instead, define a custom palette that mirrors the discipline you see in marketing platforms and high-quality SaaS documentation.

Building a reusable CSS color palette

Start by declaring base colors and semantic roles.

:root {
  /* Brand */
  --color-brand: #0f766e;
  --color-brand-light: #5eead4;
  --color-brand-dark: #115e59;

  /* Neutrals */
  --color-bg: #f9fafb;
  --color-surface: #ffffff;
  --color-border: #e5e7eb;
  --color-text: #111827;
  --color-text-muted: #6b7280;

  /* States */
  --color-success: #16a34a;
  --color-warning: #f59e0b;
  --color-danger: #dc2626;
}

body {
  background-color: var(--color-bg);
  color: var(--color-text);
}

.button-primary {
  background-color: var(--color-brand);
  color: #ffffff;
}

Using CSS variables lets your team update colors once at the root, which is ideal for maintaining consistency at scale.

How to Apply CSS Colors Step by Step

The next steps outline how to move from a blank stylesheet to a polished design inspired by the clarity of systems used in professional tools such as HubSpot.

1. Audit your current styles

  • Search your CSS for raw color values like #000000 or rgb(0, 0, 0).
  • List every unique color you find.
  • Identify duplicates or slightly different shades that should be unified.

2. Define a minimal color system

Group your colors into functional roles, not just hex codes.

  • Primary, secondary, accent
  • Background, surface, border
  • Text strong, text muted, text on dark
  • Success, warning, danger

Create variables or utility classes for these roles to keep your CSS readable.

3. Replace hard-coded colors

  1. Pick a section of your site (navigation, hero, or footer).
  2. Swap each color for a variable, like var(--color-brand).
  3. Test after each small change to avoid regressions.

Over time your stylesheet will be driven by a coherent system, making it much easier to adjust themes or support dark mode.

4. Test color contrast and accessibility

Readable text is essential for user experience. Many modern marketing platforms, including HubSpot, emphasize accessibility and clear contrast.

  • Use a contrast checker to test foreground and background combinations.
  • Aim for at least WCAG AA: contrast ratio of 4.5:1 for body text.
  • Use larger font sizes and higher contrast for critical messages.

For more examples of CSS colors in action, you can review the original reference on this CSS color guide which inspired this how-to article.

Advanced CSS Color Techniques in a HubSpot-Like Workflow

Using gradients

Gradients can create depth and focus without overwhelming the layout.

.hero {
  background-image: linear-gradient(
    135deg,
    hsl(192, 91%, 36%),
    hsl(182, 84%, 40%)
  );
  color: #ffffff;
}

Combine gradients with subtle overlays for legible text:

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(15, 23, 42, 0.65),
    rgba(15, 23, 42, 0.1)
  );
}

Supporting dark mode

Dark mode is now common in dashboards, CRMs, and analytics tools.

@media (prefers-color-scheme: dark) {
  :root {
    --color-bg: #020617;
    --color-surface: #020617;
    --color-border: #1e293b;
    --color-text: #e5e7eb;
    --color-text-muted: #9ca3af;
  }
}

By swapping variable values inside the media query, your entire interface updates without rewriting components.

Practical Tips for Managing CSS Colors in Large Projects

Once your palette is in place, keep it maintainable with a few disciplined practices that echo robust systems found in tools like HubSpot.

  • Document every color in a simple style guide page.
  • Use semantic names such as --color-alert-danger, not --color-red1.
  • Limit the palette to avoid visual noise and inconsistency.
  • Review colors regularly as your brand evolves.

If you need expert help designing a scalable color system or auditing your CSS, agencies like Consultevo specialize in technical SEO and front-end optimization that work hand in hand with strong visual design.

Conclusion: Bring Professional Color Systems to Your Site

Mastering CSS colors gives you control over branding, accessibility, and user experience. By understanding hex, RGB, and HSL values, creating a reusable palette, and enforcing contrast rules, you can bring a level of polish to your site that aligns with the quality users expect from leading platforms.

Start by auditing your existing colors, define a small but flexible system, migrate your components step by step, and document everything. With these practices, your website will be easier to maintain, faster to iterate on, and far more consistent across pages, campaigns, and devices.

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