It is not possible to set color using colorpicker

@lamp5, could you please share steps to reproduce?

I opened my configuration page on a site with Eu Cookie Compliance 1.5 and when I change the text or background colors to any valid hex value, I could perfectly save the settings without any problems and the banner and/or text color changed to reflect the new colors that I entered.

We can't accept your patch in #6 (the one numbered 3). You're removing the # that's in front of the color value, and that will cause 90000 sites that currently entered the color with no # in front to break. You're also removing a class identifier from the generated strings, which may also break somebody's site.

Thanks, that clears things up. I'll try to install the library and see how it works. Seems like there's been a change since Drupal 7.

For a workaround, try setting the colors without using the popup color picker library.

Make the hash sign as optional and strip it after saving. The user should still enter the color without the hash sign. However, if hash is added, e.g. by a user or by a colorpicker, it will be deleted during the saving.

We can use the Core's \Drupal\Component\Utility\Color::validateHex() method to validate the hexadecimal color. In this validation, Hash prefix is optional.

/**
 * Validates whether a hexadecimal color value is syntactically correct.
 *
 * @param $hex
 *   The hexadecimal string to validate. May contain a leading '#'. May use
 *   the shorthand notation (e.g., '123' for '112233').
 *
 * @return bool
 *   TRUE if $hex is valid or FALSE if it is not.
 */
public static function validateHex($hex) {
  // Must be a string.
  $valid = is_string($hex);
  // Hash prefix is optional.
  $hex = ltrim($hex, '#');
  // Must be either RGB or RRGGBB.
  $length = mb_strlen($hex);
  $valid = $valid && ($length === 3 || $length === 6);
  // Must be a valid hex value.
  $valid = $valid && ctype_xdigit($hex);
  return $valid;
}

@lamp5 Probably you can save the colors now. However I didn't test it using the colorpicker. Someone has to test this patch...

I'm not sure what will happen when you need to re-edit colors. After saving, the values ​​will be without the hash sign. Will colorpicker display the correct color then?

Looks good. Thanks for the patch. @lamp5, would you mind testing the patch?

Let's add the leading "#" in the form elements. It will be possible to use a colorpicker to set the colors.

For backward compatibility, colors are STILL stored without a hash sign.

1. Updating existing colors values to proper format (with a leading hash) is also fine. I added a new patch with the update.

2. Current regular expression (/^[0-9a-fA-F]{3,6}$/) allows values ​​with 4 or 5 characters (e.g. 'ffff' or '00000'') so I changed to /^#([0-9a-fA-F]{3}){1,2}$/.

See also Hexadecimal validation returns true if the color contains multiple hashes (e.g. '###FF0').

Thanks. Would you be able to review patch #17, @lamp5?

+++ b/eu_cookie_compliance.module
@@ -545,8 +549,8 @@ function _eu_cookie_compliance_extract_category_key_label_description($string) {
+  if (!empty($element['#value']) && !preg_match('/^#([0-9a-fA-F]{3}){1,2}$/', $element['#value'])) {
+    $form_state->setError($element, t('%name must be a valid hexadecimal value with a leading hash or empty.', ['%name' => $element['#title']]));
   }

Drupal Core has a utility class that validates hexadecimal values: \Drupal\Component\Utility\Color::validateHex(). I suggest we reuse that validation instead of writing our own.

Nice, yes, we should definitely use validateHex.

1. In validateHex() method hash prefix is optional. Colorpicker requires a leading hash so we must add the hash, when we display the form.

/**
 * Validates whether a hexadecimal color value is syntactically correct.
 *
 * @param $hex
 *   The hexadecimal string to validate. May contain a leading '#'. May use
 *   the shorthand notation (e.g., '123' for '112233').
 *
 * @return bool
 *   TRUE if $hex is valid or FALSE if it is not.
 */
public static function validateHex($hex) {
  if (!is_string($hex)) {
    return FALSE;
  }
  return preg_match('/^[#]?([0-9a-fA-F]{3}){1,2}$/', $hex) === 1;
}

2. See #15. This is a patch using \Drupal\Component\Utility\Color::validateHex().

3. IMO the \Drupal\Component\Utility\Color::validateHex() method is unnecessary here. This /^#([0-9a-fA-F]{3}){1,2}$/ regular expression is short and understandable.

4. We do not have any automatic tests in this module. Without testing, code maintenance will be more problematic if the hash is optional. If the hash is required, we do not have to worry about removing it or adding it while displaying or saving the form.

5. In older versions of Drupal (e.g. 8.6) there is an error Hexadecimal validation returns true if the color contains multiple hashes (e.g. '###FF0'). It will be introduced in the new version 8.7.4.

If we are having issues with Drupal versions prior to 8.6, I agree with @Krzysztof Domański here.
We can use the reg ex proposed in #17.

I'm going to double check that colorpicker works as expected in D7 and D8 and then will commit this patch later.

@Krzysztof Domański, I installed jquery_colorpicker version 1.4 (which is what composer gives by default if you don't specify :^2). Without applying your patch I had no problems saving the EU Cookie Compliance settings form, and the banner was shown with the proper colors.

I then did some searching.. If I can guess, you're probably using jquery_colorpicker version 2.0-rc1 and we have a problem.

The requirements of a # in front of the hex is a backwards-compatible breaking change in jquery_colorpicker 2.0, and we need to support both versions.

This issue needs work. Either we need to write a patch that removes the support for jquery_colorpicker, or our code for Drupal 8 needs some if/else to support both version 1 and 2. Possibly, stripping # if present after form submit and before saving would be the best option.

I haven't looked at the previous patches, so if there's code in comment 2, 3, 12 or 15 that works with both jquery_colorpicker 1.x and 2.x, please let me know and I'll take another look.

This issue have become outdated. I have no problems setting the color using jquery_colorpicker 8.x-2.0-rc1.

Feel free to reopen if you're still having these issues.

Reopening this issue as I was having issues with jquery_colorpicker 2.x after a reinstall.

Here's a patch that fixes the issue and that works with both version 1 and 2 of jQuery Color Picker.

@svenryen #27 worked like a charm. +1 for that.