Standard Joomla XML Field Type - Color

The color field in Joomla XML forms adds a color selection element with support for manual code input and a visual palette. Values can be entered manually in HEX, RGB, or RGBA formats, or selected via the built-in interface. The returned data format and transparency support depend on the Joomla version and the alpha attribute setting.

Field Attributes

Below are the main attributes supported by the URL field type. Use them inside the <field> tag of your XML manifest.

Attribute	Type	Description
`name`	string	Required. Unique system identifier for the field. Used to retrieve the value in PHP ($input->get('name')).
`type`	string	Required. Must be set to color. Defines the field type and its behavior.
`label`	string	Field label visible to the user in the admin panel. Can be a language constant (e.g., COM_EXAMPLE_COLOR_LABEL).
`description`	string	Help text. In Joomla 3, it appears as a tooltip when hovering over the label; in J4/5/6, it is displayed below the field or in a popup.
`default`	string	Default value. It is recommended to specify the value in HEX (#RRGGBB) or RGBA format. If the format is invalid, the field will automatically fall back to #000000.
`alpha`	boolean	Enables transparency support (true/false). When set to true, the field returns the value in RGBA format. Completely ignored in Joomla 3. Defaults to false.
`format`	string	Format of the saved value: hex, rgb, rgba, or auto (default). In Joomla 4+, the alpha attribute takes precedence.
`validate`	string	Enables the validator. It is recommended to use validate="color", which validates the HEX or RGBA format on both server and client sides.
`filter`	string	Input data filter. Available options: string (default) provides basic sanitization by removing dangerous characters; color enforces strict color format validation, rejecting invalid values; raw applies no filtering (not recommended); unset ignores the field during form processing.
`class`	string	Additional CSS classes for the field wrapper. For example, class="my-color-field" for custom styling.
`required`	boolean	Makes the field required (true/false). Defaults to false.
`readonly`	boolean	Prevents editing of the value. The field is displayed, but users cannot change the color. Defaults to false.
`disabled`	boolean	Completely disables the field. The value is not submitted with the form and is not saved. Defaults to false.
`showon`	string	Conditional display of the field based on the values of other fields. For example, showon="enable_color:1". Available in Joomla 3.3+ and J4/5/6.

Visual Examples

Below are screenshots showing how the field appears in different Joomla versions and admin panel themes.

Joomla 3 Isis

Color field in Joomla 3.x settings (Isis admin template)

Classic field appearance in the Isis template.

Joomla 4 / 5 / 6 Cassiopeia (Light)

Visual appearance of the Color field in Joomla 4/5/6 (Cassiopeia admin template, light theme)

Modern Cassiopeia design. Light theme.

Joomla 4 / 5 / 6 Cassiopeia (Dark)

Visual appearance of the Color field in Joomla 4/5/6 (Cassiopeia admin template, dark theme)

Admin dark theme. High-contrast text and dark background.

XML Usage Example

Add this code inside your XML manifest tag. The type="color" attribute automatically enables a color palette for selection and validates the input for correct HEX and RGBA formatting.

<field
    name="my_color"
    type="color"
    label="Select Color"
    description="Use the palette or enter a value manually"/>

Retrieving Value in PHP

To retrieve the selected color in PHP, access the application's input object. Modern Joomla versions use the Factory class, while Joomla 3.x relies on legacy J prefixes. Regardless of the version, always filter input data to ensure security and data integrity before using the value in your templates.

// --- JOOMLA 4 / 5 / 6 (Modern) ---
use JoomlaCMSFactory;

// Get the input object via Factory (recommended MVC approach)
$input = Factory::getApplication()->input;

// getString() returns the value as a string; the filter removes invalid characters
$myColor = $input->getString('my_color', '#000000');

// Optional: Validate color format (protection against invalid data)
$myColor = preg_match('/^#([0-9A-F]{3}){1,2}$|^rgba?([^)]+)$/i', $myColor) 
    ? $myColor 
    : '#000000';


// --- JOOMLA 3.x (Legacy) ---
// J3 used JFactory or JRequest
$input = JFactory::getApplication()->input;
$myColor = $input->get('my_color', '#000000', 'string'); 

// OR using the legacy method (not recommended, but shown for completeness):
$myColor = JRequest::getVar('my_color', '#000000', 'get', 'string');


// --- PREPARING OUTPUT FOR HTML / CSS ---
// The color value is safe for insertion into style="" attributes after escaping
// For inline styles:
echo '<div style="background-color: ' . htmlspecialchars($myColor, ENT_COMPAT, 'UTF-8') . ';">Контент</div>';

// For passing to JS or data attributes:
echo '<div data-color="' . htmlspecialchars($myColor, ENT_QUOTES, 'UTF-8') . '">Контент</div>';

// If the color may contain RGBA and is used in a CSS variable:
$cssColor = htmlspecialchars($myColor, ENT_NOQUOTES, 'UTF-8');
echo '<style>:root { --main-color: ' . $cssColor . '; }</style>';

The code above demonstrates two approaches to retrieving data: the modern method for Joomla 4/5/6 and a backward-compatible version for Joomla 3. In both cases, a string filter is applied to sanitize input and remove potentially dangerous characters. Additionally, the example for newer versions includes format validation via a regular expression, ensuring the variable contains only valid HEX or RGBA values. Once retrieved, the data is safely escaped before being inserted into HTML attributes or CSS variables.

Tip: Never output a color value directly into a style="" attribute without prior escaping. Form-side validation protects against accidental errors but does not guarantee protection against tampered HTTP requests. Always use htmlspecialchars() when inserting values into CSS or data attributes. When working with the alpha channel (RGBA) in Joomla 4+, keep in mind that older browsers may ignore transparency — provide a fallback HEX background in your CSS to ensure correct display across all environments.

Common Pitfalls

Lack of transparency support in Joomla 3: The alpha="true" attribute is completely ignored in J3, where the field always returns a HEX value. When migrating code to J4+, explicitly check the returned format to avoid parsing errors.
Limitations of the native HTML5 color picker: The specification does not support the alpha channel. In Joomla 4/5/6, transparency is emulated via a JavaScript overlay, which may behave inconsistently when JavaScript is disabled or in older versions of Safari.
Limitations of the JInput filter: The getString() method or string filter only strips HTML tags but does not validate color syntax. Without additional server-side validation, arbitrary strings may be saved to the database, potentially breaking CSS rules.
Default value reset on format error: If an invalid value is specified in the default attribute (e.g., red, transparent, or an empty string), the field will automatically fall back to #000000. Always use valid HEX or RGBA values in your XML manifest.
Format conflict when enabling the alpha channel: If alpha="true" is enabled in an existing extension, previously saved HEX values are not automatically converted to RGBA. The interface will display the color without transparency, which may break the layout if the CSS expects the rgba() format.