jekyll-color-copy-tag

A Jekyll Liquid tag that renders clickable hex color copy buttons and paint swatches with copy-to-clipboard functionality. Uses WCAG contrast ratio math to automatically choose black or white text for optimal accessible contrast.

• No dependencies — includes its own SVG icons
• WCAG accessible — automatic contrast calculation
• Flexible sizing — three button sizes, configurable swatch dimensions, custom per-tag overrides
• Copy feedback — visual confirmation with background color change and icon swap
• Paint swatches — render clickable color chips with hex label positioned in corner

Add the gem to your Gemfile:

gem "jekyll-color-copy-tag"

Enable it in _config.yml:

plugins:
  - jekyll-color-copy-tag

That's it—the JavaScript is automatically injected into pages that use the tag.

Render clickable buttons in three sizes:

{% color_copy '#2BB3B1' %}        {# medium (default) #}
{% color_copy '#2BB3B1', sm %}    {# small #}
{% color_copy '#2BB3B1', lg %}    {# large #}

Text color is automatically chosen (black or white) based on WCAG contrast ratio math against the button background.

Render clickable color swatches with hex value displayed in the corner:

{% color_copy '#2BB3B1', swatch %}              {# uses config dimensions (default 100×100) #}
{% color_copy '#2BB3B1', swatch_150x150 %}     {# override to 150×150 #}
{% color_copy '#2BB3B1', swatch_200x100 %}     {# custom width×height #}

The hex label has semi-transparent background and adapts text color for readability on any swatch color.

Customize the copied-to-clipboard feedback color and default swatch dimensions in _config.yml:

color_copy:
  copied_color: "#2BB3B1"
  swatch_width: 100
  swatch_height: 100

• copied_color — Background color shown when button/swatch is clicked (defaults to #2BB3B1)
• swatch_width — Default paint swatch width in pixels (defaults to 100px)
• swatch_height — Default paint swatch height in pixels (defaults to 100px)

Override per-tag with swatch_WxH syntax: {% color_copy '#hex', swatch_200x150 %}

The plugin calculates relative luminance using the sRGB-to-linear conversion algorithm, then computes contrast ratios against both black (#000) and white (#fff). It selects whichever provides higher contrast, ensuring text is always readable per WCAG standards.

Clicking a button or swatch triggers JavaScript that:

1. Copies the hex value to clipboard
2. Temporarily changes background to the configured copied_color
3. Shows a checkmark icon (buttons show "✓ Copied", swatches show just the checkmark)
4. Restores original background and content after 1.2 seconds

Both icons are embedded as inline SVG from Bootstrap Icons:

• Copy icon (16×16 viewBox)
• Check icon (check-lg variant)

• Text color automatically selected for WCAG AAA contrast on all backgrounds
• Semantic HTML with title attributes
• No reliance on external icon libraries
• Works without JavaScript (buttons render but copy won't function)

MIT License

Icons from Bootstrap Icons (MIT License)