[FEATURE] Render hex colour codes in Bash output

Preflight Checklist

• [x] I have searched existing requests and this feature hasn't been requested yet
• [x] This is a single feature request (not multiple features)

Problem Statement

When working with CSS, design systems, or colour configuration files, hex colour codes in Bash output are just plain text. I can't visually distinguish what #2A7B6F looks like versus #E8B86D without copying each value to an external tool.

Workflow example:

1. Ask Claude to search for colours: "Find all hex colours in this project"
2. Claude runs grep and returns 20+ hex codes
3. I see a wall of text like "#FF5733", "#2A7B6F", "#FAF8F5"
4. To understand what these colours actually are, I have to:

• Copy each hex code
• Paste into a browser colour picker or external CLI tool
• Mentally map back to the original output

This context-switching breaks flow, especially when comparing colours, reviewing design tokens, or debugging CSS variables. The hex values are meaningless strings until visualised.

Modern code editors (VS Code, JetBrains) solve this with inline colour swatches.
Terminal output in Claude Code has no equivalent - hex codes remain opaque text.

Proposed Solution

Automatically detect hex colour codes (#RRGGBB) in Bash tool output and render them with a background swatch of that colour.

Ideal UX:

1. Run any command that outputs hex colours: grep "#" styles.css
2. Hex codes render with coloured backgrounds inline
3. No user action required - automatic detection
4. Optional toggle: terminal.renderHexColors: true|false

Implementation: Apply 24-bit ANSI background colours (already supported) based on detected hex values, with black/white text chosen by luminance for contrast.

Alternative Solutions

1. pastel CLI: Requires explicit invocation per colour - doesn't help with grep/cat output containing multiple hex codes

1. Custom filter script: I built a Ruby script that pipes output through a hex detector. Works but requires manually piping every command, and can't integrate with Claude Code's Bash tool

1. grc (Generic Colouriser): Only applies static colours to regex matches, can't dynamically render the matched hex value as its actual colour

1. Copy to external tool: Current workaround - breaks flow entirely

Priority

High - Significant impact on productivity

Feature Category

Interactive mode (TUI)

Use Case Example

Scenario: Reviewing a design system's colour tokens

1. Ask Claude: "Show me all colour variables in the theme file"
2. Claude runs: grep -E "#[0-9A-Fa-f]{6}" src/theme.ts
3. Output:

primary: "#2A7B6F",
background: "#FAF8F5",
accent: "#E8B86D",
danger: "#DC143C",
... (15 more colours)

Current: I see 18 plain hex strings. To understand the palette, I'd need to check each colour individually in an external tool.

Desired: Each hex code displays with its actual colour as background. I can instantly see the teal primary, cream background, gold accent, and red danger colour - all without leaving Claude Code.

Additional Context

Similar features in other tools:

• VS Code: Inline colour swatches in CSS/SCSS/JSON files
• JetBrains IDEs: Colour preview in gutter and inline
• macOS colour picker: System-wide hex preview

Technical notes:

• 24-bit ANSI colours already render correctly in Claude Code
• This would be post-processing of plain text, not ANSI passthrough
• Luminance-based contrast calculation ensures readability

<img width="740" height="528" alt="Image" src="https://github.com/user-attachments/assets/e1f32c36-0061-4b99-b734-5b8e9fd3e86c" />