What Color Formats Does Hallmark Recognize in Its Pre‑Flight Scan?

Hallmark recognizes six distinct color formats during pre-flight validation: CSS custom properties, hexadecimal, RGB/RGBA, HSL/HSLA, OKLCH, and named CSS colors.

Hallmark is an open-source design system validation tool from the Nutlope/hallmark repository that enforces perceptual consistency across digital projects. During its pre-flight scan, Hallmark parses source files to verify that all color specifications conform to supported formats before applying design system constraints documented in skills/hallmark/SKILL.md.

The Six Supported Color Formats

Hallmark's pre-flight scanner uses regular-expression based parsing to identify color values across your project. The tool recognizes the following formats:

CSS Custom Properties

Hallmark recognizes CSS custom properties using the var(--color-...) syntax, which serves as the primary pattern for referencing design tokens. The scanner detects this pattern in implementation files such as site/examples/najm/script.js at line 124:

note.style.color = "var(--color-accent-deep)";

Hexadecimal Colors

Standard hex literals in either long (#RRGGBB) or short (#RGB) notation are parsed from design token files. Hallmark extracts these values from stylesheets like site/css/tokens.css where color foundations are defined.

RGB and RGBA Functions

The scanner matches CSS rgb() and rgba() functions, extracting red, green, blue, and optional alpha channel values. These formats are validated using the same parsing routine that processes other functional color notations.

HSL and HSLA Functions

Using identical regular-expression logic as RGB parsing, Hallmark recognizes hsl() and hsla() functions for hue-saturation-lightness color definitions. This ensures consistent handling of all CSS functional color syntaxes.

OKLCH Perceptual Color Space

Hallmark favors the OKLCH color space for maintaining perceptual consistency across different display devices. The pre-flight scanner recognizes oklch() functions with lightness, chroma, and hue parameters, as implemented in the design language specifications.

Named CSS Colors

Standard CSS color names such as red, steelblue, or rebeccapurple are accepted during validation, providing backward compatibility with traditional web color definitions.

Where Hallmark Detects Colors

During the pre-flight phase, Hallmark scans specific file types to extract and validate color values. According to the source code analysis, the validator processes:

• Design documentation (design.md): Markdown files containing palette definitions and color specifications
• Token stylesheets (site/css/tokens.css): Centralized color token definitions where hex, RGB, and OKLCH values are declared
• Component cookbooks (skills/hallmark/references/component-cookbook.md): Reference files listing allowed color families and usage patterns
• Example implementations (site/examples/najm/script.js): JavaScript files demonstrating runtime color application via CSS custom properties

Pre-Flight Validation and Color Gates

After extracting color values, Hallmark validates them against skill-specific constraints documented in skills/hallmark/SKILL.md. These color gates enforce rules such as limiting pages to no more than three color families and requiring accent colors to maintain deep chroma values.

If the scanner encounters an unfamiliar format during analysis, Hallmark raises a pre-flight warning and requests the user rewrite the color in one of the supported forms. This ensures all colors in the project can be evaluated against the perceptual consistency standards defined in the Hallmark design language.

Summary

• Hallmark recognizes six color formats: CSS custom properties (var(--color-...)), hexadecimal (#RRGGBB), RGB/RGBA, HSL/HSLA, OKLCH, and named CSS colors
• The pre-flight scanner analyzes files including site/css/tokens.css, site/examples/najm/script.js, and skills/hallmark/references/component-cookbook.md
• Color values are validated against design system constraints called "color gates" that enforce perceptual consistency
• Unsupported formats trigger pre-flight warnings requiring conversion to recognized syntax

Frequently Asked Questions

What happens if Hallmark encounters an unsupported color format?

If the pre-flight scanner detects a color expressed in a format not listed among the six supported types, Hallmark will raise a pre-flight warning. The tool prompts you to rewrite the color value using one of the recognized formats—typically CSS custom properties, OKLCH, or hexadecimal—ensuring the color can be validated against the project's design gates.

Why does Hallmark prefer OKLCH over RGB or HSL?

Hallmark's design language favors OKLCH because it provides perceptual consistency across different display devices and lighting conditions. Unlike RGB or HSL, which can produce colors with varying perceived brightness, OKLCH's lightness component correlates directly with human perception, making it easier to enforce accessibility standards and maintain visual harmony.

Where should color tokens be defined in a Hallmark project?

Color tokens should be defined in site/css/tokens.css using the :root selector, typically utilizing hexadecimal, RGB, or OKLCH values. These tokens are then referenced throughout the project using CSS custom properties (e.g., var(--color-accent-deep)), as demonstrated in site/examples/najm/script.js at line 124.

How does Hallmark validate color usage across components?

Hallmark validates color usage by scanning component documentation in skills/hallmark/references/component-cookbook.md and implementation files. The tool checks extracted colors against constraints defined in skills/hallmark/SKILL.md, such as limiting the number of color families per page and ensuring accent colors meet deep chroma requirements for visual hierarchy.

{
  "mcpServers": {
    "instagit": {
      "command": "npx",
      "args": ["-y", "instagit@latest"]
    }
  }
}