Omarchy Color Mixing Functions in Themes: How to Blend and Transform Colors

To blend colors in Omarchy themes, use three built‑in template helpers—{{ mix }}, {{ mix_strip }}, and {{ mix_rgb }}—which are powered by the mix_color() Bash function.

Omarchy's theming engine provides first‑class color manipulation tools that let theme authors generate dynamic palettes directly inside template files. This article covers every mixing function available, where they live in the codebase, and how to apply them in practice.

What Color Mixing Functions Are Available in Omarchy Themes?

Omarchy exposes three template helpers that wrap a single core implementation. Each serves a different output format requirement:

Helper	Return Format	Use Case
{{ mix <start> <end> <amount> }}	Hex color with # (e.g., #808080)	CSS properties, JSON color fields
{{ mix_strip <start> <end> <amount> }}	Hex string without # (e.g., 808080)	APIs or configurations that reject the # prefix
{{ mix_rgb <start> <end> <amount> }}	RGB tuple (e.g., 128,128,128)	Numeric channel interfaces, graphics libraries

All three helpers accept the same arguments: two hex colors (<start> and <end>) and a blend ratio (<amount>). The amount may be written as a percentage (15%) or a decimal (0.35). Integer percentages without the % symbol are also valid (e.g., 50).

Core Implementation: mix_color()

The mix_color() function in bin/omarchy-theme-set-templates (lines 20–31) performs the actual blending arithmetic. It parses the input hex values, computes the weighted average per channel, and formats the result according to the caller's needs. This single routine powers all three template helpers.

The same function appears in bin/omarchy-theme-color (lines 71–85), where Omarchy generates derived palette entries such as bright color variants when they are not explicitly defined in colors.toml.

Practical Examples in Template Files

Basic Helper Usage

# In any *.tpl theme file

{{ mix background foreground 15% }}        # → "#8a8a8a"

{{ mix_strip background accent 0.35 }}    # → "7a9bff"

{{ mix_rgb color0 color7 50 }}            # → "122,162,247"

Real‑World Template: pi.json.tpl

The default/themed/pi.json.tpl file demonstrates production usage of Omarchy color mixing functions:

{
  "selectedBackground": "{{ mix background accent 22% }}",
  "panel": "{{ mix background foreground 6% }}",
  "border": "{{ mix foreground background 30% }}",
  "mutedText": "{{ mix foreground background 34% }}"
}

This pattern creates subtle variations that maintain visual hierarchy without hard‑coding additional palette entries.

Generating Derived Colors in Scripts

The omarchy-theme-color utility uses mix_color() to ensure complete palettes even when themes define minimal color sets:

# From bin/omarchy-theme-color

[[ ${THEME_COLORS[bright_red]} ]] || \
  THEME_COLORS[bright_red]=$(mix_color "${THEME_COLORS[red]}" "#ffffff" 20%)

This fallback mechanism guarantees that bright_red and similar variants exist for downstream consumers.

Key Source Files

Understanding where these utilities live helps when extending Omarchy's theming system:

• docs/theming.md – Documents the three mixing helpers with usage guidelines (lines 146–155)
• bin/omarchy-theme-set-templates – Contains the canonical mix_color() implementation (lines 20–31)
• bin/omarchy-theme-color – Reimplements mix_color() for palette derivation (lines 71–85)
• default/themed/*.tpl – Demonstrates real‑world helper usage in generated theme artifacts

Summary

• Three helpers, one engine: mix, mix_strip, and mix_rgb all delegate to mix_color()
• Flexible amount syntax: Accept percentages (15%), decimals (0.35), or integers (50)
• Core locations: bin/omarchy-theme-set-templates for templates, bin/omarchy-theme-color for palette generation
• Zero dependencies: Pure Bash implementation, no external color libraries required

Frequently Asked Questions

Where is the mix_color() function defined in Omarchy?

The primary definition resides in bin/omarchy-theme-set-templates at lines 20–31. A duplicate implementation appears in bin/omarchy-theme-color at lines 71–85 to support palette derivation without template processing overhead.

Can I use decimal values instead of percentages in Omarchy color mixing?

Yes. The mix_color() parser accepts both forms interchangeably: {{ mix #ff0000 #0000ff 0.5 }} produces the same result as {{ mix #ff0000 #0000ff 50% }}.

What is the difference between mix and mix_strip in Omarchy themes?

mix returns a standard hex color with leading # (e.g., #808080), suitable for CSS and most JSON color fields. mix_strip omits the # prefix, producing 808080 for systems that parse hex strings as raw numeric values.

How does Omarchy generate bright color variants automatically?

When a theme lacks definitions for bright_* colors, bin/omarchy-theme-color blends each base color with white using mix_color() at a fixed ratio (typically 20%). This ensures consistent bright variants across all themes without manual curation.

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