Palette

Palette is a color-aware content element for presenting colors as structured, reusable cards or swatches. Instead of building an ordinary Grid and manually typing every color code, you select a color once and Palette can display the swatch, generate common web color formats and assign a readable English name.

It is useful whenever color is part of the information you need to communicate: brand guidelines, design systems, product variants, paint or material collections, interior and fashion palettes, UI kits, project style guides, or inspiration boards.

A regular Grid arranges generic content. Palette understands that every item represents a color. Each item has a real color value, optional HEX, RGBA, HSLA, CMYK and Pantone data, an optional generated color name, tags, content and links.

Palette also provides shared controls for how swatches and color values are displayed, so a complete color system can be updated consistently without configuring every card separately.

No. Palette is a presentation and documentation element. It does not overwrite YOOtheme style variables, recolor other elements or change a site's active theme palette.

You can link a swatch to a product, variation, download or another page, but Palette does not provide product-selection or theme-editing logic by itself.

• Publish a company brand palette with names and exact web values.
• Show product colors, finishes, fabrics, paints or materials.
• Document design tokens for a website or application.
• Create project mood boards and curated color collections.
• Present color variants that link to separate products or pages.
• Build searchable or filterable color libraries using tags.

Palette 2.0.0 requires:

• PHP: 8.2.0 or newer
• YOOtheme Pro: 5.0.53 or newer
• Joomla: 5.4.9 or newer, or WordPress: 7.1.3 or newer

A current browser is recommended for the Builder and frontend Grid, Slider, Filter and transition features.

1. Add the Palette element in YOOtheme Pro Builder.
2. Add a Palette item for every color you want to present.
3. Select the main Color in each item and optionally add a title, meta text, description, link, tags, CMYK or Pantone reference.
4. In the parent Palette settings, choose which fields should be visible and whether HEX, RGBA, HSLA and English color names should be generated automatically.
5. Choose a Grid or Slider layout, then style the swatch, values, text and links.

Each item can contain a primary color, HEX, RGBA, HSLA, CMYK and Pantone values, a title, meta text, rich content, a link and filter tags. It can also override the border color, text color mode, link text, link title and link ARIA label.

The primary color is required. An item without a valid color is omitted from frontend output instead of rendering an empty or broken swatch.

Palette accepts common CSS color input, including short and full HEX values, HEX with alpha, rgb(), rgba(), hsl(), hsla(), standard CSS color keywords and transparent.

Both comma-separated and modern space-separated RGB and HSL syntax are supported. Invalid or excessively long color input is rejected safely.

Select the main color once, then enable Generate HEX, Generate RGBA or Generate HSLA in the parent Palette settings. Palette converts the selected color and displays the enabled values automatically for every item.

Automatic generation is useful when one canonical color should produce consistent web-ready values. When generation is enabled, the generated value takes precedence over the corresponding manually entered item value.

Yes. Disable automatic generation for HEX, RGBA or HSLA when you need to display a specific authored value. The matching field becomes editable in every Palette item.

This is useful for documentation that must preserve a client-provided notation or a value that intentionally differs from the automatically normalized result.

Enable Generate color name in the Title settings. Palette compares the selected color in perceptual CIE Lab color space with a bundled modern color-name dataset and uses the nearest English name as the item title.

The dataset is loaded once and indexed for fast repeated lookups. Exact colors use their exact stored name; other colors receive the perceptually closest available name.

No. Generated names are descriptive English labels, not an official paint, Pantone, RAL or manufacturer reference. Several visually similar colors may resolve to the same nearest name.

Disable automatic naming and enter your own Title when a project requires a brand-approved, product-specific or localized name.

CMYK and Pantone are not generated automatically because reliable print conversion depends on color profiles, inks, paper, printing conditions and licensed reference systems. A simple browser conversion could present a misleading production value.

Enter approved CMYK and Pantone references manually when they are part of your brand or print documentation.

Palette normalizes the visible color to a stable opaque swatch. When the authored input contains alpha transparency, it is composited against white before the displayed HEX, RGBA, HSLA and generated name are calculated.

This keeps the swatch and its generated values consistent. If the original alpha value must be documented exactly, disable automatic generation and enter that reference manually in the appropriate item field.

The parent Display settings can show or hide the title, meta text, content, HEX, RGBA, HSLA, CMYK, Pantone and link for the complete Palette. Hidden values remain saved, so a field can be disabled temporarily without deleting item content.

Each visible color value has independent typography, color, HTML element, spacing, responsive visibility and position controls.

HEX, RGBA, HSLA, CMYK and Pantone values can appear over the swatch, above the content or below the content. The title can be displayed as an overlay, above the content or beside it, while meta text can appear above or below the title.

These positions can be combined to create compact swatches, detailed specification cards or editorial color presentations.

Set an automatic, pixel or percentage width and height, then choose the swatch alignment, border shape, box shadow, optional custom border and spacing. With automatic width, the color box fills the available card width; if no height is set, it keeps a square aspect ratio.

The color box can be placed above, below, left or right of the content, or between the title area and the remaining content.

Titles, metadata and color values can be placed directly over the swatch. Choose a light or dark text mode, overlay position and margin. Enable Display overlay on hover when the information should appear only while the swatch is hovered or keyboard-focused.

Hover overlays support fade, scale and directional slide transitions.

Yes. Add a link to the Palette item and choose whether to link the color box, title or a separate text/button action. Links support a new-window target and interactive YOOtheme toggles where applicable.

Global link text and styling can be shared by all items, while individual items may provide their own link text, title and ARIA label.

A plain color background has no readable text for assistive technology, so Palette assigns an accessible name to a linked swatch. It uses the item ARIA label first, followed by the global ARIA label, link title, item title and finally the normalized color value.

For the clearest result, enter a specific item ARIA label when the destination cannot be understood from the color name alone.

Yes. Add comma-separated Tags to Palette items and enable Filter in the parent settings. Filter navigation supports alphabetical or manual ordering, an optional All item, horizontal or side positions, responsive wrapping and standard YOOtheme filter transitions.

Use concise, consistent tags such as warm, cool, neutral, brand or accent.

Palette can be displayed as a responsive Grid or Slider. It supports breakpoint widths, independent gaps, alignment and dividers. Grid layouts also support Masonry and parallax options; Slider layouts support fixed or automatic item widths, sets, centering, finite mode, autoplay, dot navigation and slidenav controls.

These controls follow the corresponding native YOOtheme Pro layout behavior.

Yes. Palette item fields support YOOtheme Pro Dynamic Content, including the primary color, values, title, meta text, content, link, tags and item-specific styling data.

This makes Palette suitable for color libraries or product data maintained in articles, custom fields or other supported sources. The source still needs to provide a valid color value for every rendered item.

Yes. Enable Strip HTML / Limit to render the Content field as plain text and optionally set a character limit. A limit of 0 removes HTML without truncating the text.

The original editor content remains saved and unchanged; the option only affects rendered output.

Yes. Palette 2.0.0 includes product-owned labels, descriptions and options for 28 languages. This includes the color-generation, layout, filter, overlay, content and link controls instead of relying on incomplete native catalogs.

If a locale is unavailable, English is used as the fallback.

• Confirm that the item contains a valid primary Color; invalid or empty colors are not rendered.
• Check the parent Display settings for the title, color values, content and link.
• When a generated value is expected, enable both its Display option and its Generate option.
• If a filter hides the item, confirm that its tags match the active filter and manual order.
• Check responsive visibility, Grid or Slider breakpoints and overlay position settings.
• After installation or update, reload the Builder preview and clear stale site and browser caches.
• Recompile the active YOOtheme style if the element appears unstyled.