Alpha Color Picker Field

Overview

Description

ZealousWeb’s latest ExpressionEngine plugin ‘Alpha Color Picker Field’ is easy to use and compatible with channel entry, Grid, Fluid, and Relationship fields. It provides valuable output in HEX, RGB, and RGBA values.

Key Features:

  • Multiple color formats: Outputs colors in HEX, RGB, and RGBA.
  • Alpha (transparency) control: Adjust the opacity of colors via an intuitive alpha slider or field.
  • Flexible input: Users can either select a color using the picker or enter a color code manually with a # prefix.
  • Integration-friendly:
    • Grid field compatibility
    • Works with Fluid and Relationship fields
    • Compatible with Channel Forms
  • Easy setup: Straightforward installation into ExpressionEngine's add-ons and themes folders.
  • Modern compatibility: Supports PHP up to 8.2 and ExpressionEngine versions through 7.
  • Value add: Includes plugin zip and a 1-year subscription.
  • Support: Provides 30 days of support post-purchase (weekends and holidays included).

Plugin's purpose and benefits

  • Installation Steps (for EE4–EE7)
    • Download and extract the add-on ZIP file (recommended to use the latest version).
    • Copy:
      • Alpha_Color_Picker_Field > system > user > addons > alpha_color_picker_field → to your site’s system/user/addons/ folder.
      • Alpha_Color_Picker_Field > themes > user > alpha_color_picker_field → to your site’s themes/user/ folder.
    • Log in to the ExpressionEngine backend as Super Admin
    • Navigate to Developer → Add-Ons, and Install the Alpha Color Picker Field.
  • Using in Entries
    • In your Channel Entry form (or within a Grid/Fluid/Relationship field), select the Alpha Color Picker Field as the field type.
    • In the entry editor:
      • Click on the color picker to choose a color visually.
      • Or manually enter a color code (e.g., #FF5733).
      • Adjust the alpha (transparency) value using the slider or input field.
    • Switch output formats between HEX and RGBA if needed.
    • For testing, drag colors into the overlapping preview box to see how transparent layers blend.
  • Post-Installation Notes
    • The plugin stores color in formats suitable for CSS output (HEX, RGB, RGBA).
    • Ideal for styling dynamic content, theme previews, overlays, or anywhere visual transparency control is useful.
    • Compatibility is guaranteed only for supported ExpressionEngine versions and PHP; integration with third-party add-ons may require additional work and might incur extra service charges.
    • Compatible with the grid field.Alpha Color Picker Field works with Grid type of fields.
    • Compatible with the grid field.Alpha Color Picker Field works with Grid type of fields.
    • Compatible with Channel Forms.
      • Alpha Color Picker Field is also Compatible with Channel Forms.
    • Can select color, write, and adjust the Alpha value.Here we can insert another color hex to see the output of the color view, we can set the alpha value for that color as well as we can set the switch to Hex and Rgba value for the field.

Get Started

Quick setup instructions

Obtain the add-on package and extract the ZIP file to a temporary location.
Step 1
Download and Unzip
Obtain the add-on package and extract the ZIP file to a temporary location.
Upload the extracted files to the appropriate directory on your server (`system/user/addons` for EE5+ or `system/expressionengine/third_party` for EE4 and below).
Step 2
Upload Files
Upload the extracted files to the appropriate directory on your server (`system/user/addons` for EE5+ or `system/expressionengine/third_party` for EE4 and below).
Ensure directories are set to `755` and files to `644`.
Step 3
Set Permissions
Ensure directories are set to `755` and files to `644`.
Log in to the ExpressionEngine Control Panel, navigate to the
Step 4
Install via Control Panel
Log in to the ExpressionEngine Control Panel, navigate to the "Add-Ons" section, and click "Install" next to the uploaded add-on.
Configure the add-on as per the developer's instructions and verify its functionality.
Step 5
Configure and Verify
Configure the add-on as per the developer's instructions and verify its functionality.
Questions about our plugins?

How To Use & Features

We're sorry, an error has occurred while generating this content.

Get Support

FAQs

Change log

version 4.0.5

  • Compatibility of PHP Version 8.2.

version 4.0.4

  • Made addon compatible with PHP 8.2

version 4.0.3

  • Fixed MariaDB column length issue.

version 4.0.2

  • Fix JS and divider issues

version 4.0.1

  • Moved from License copy to Subscription copy and add-on will worked based on yearly subscription for the updates

version 4.0.0

  • Make it compatible with EE6
  • Solve issues regarding color picker

version 3.0.0

  • Supported to EE6
  • Updated copy with License activation

version 2.0.0

  • Initial Version

Get Premium Support

Request a Quote

Submit this form now and we will get back to you promptly!