U4-11257 - Color picker validation checks for invalid hex value - unable to add new color value

Created by Mikkel Mørch 20 Apr 2018, 08:22:30 Updated by Sebastiaan Janssen 02 Aug 2018, 06:55:15

Duplicates: U4-11253

Solution is Umbraco cloud: Umbraco version 7.8.2 assembly: 1.0.6676.26569

(Disclaimer: I am unaware whether this is fixed in newer versions of Umbraco)

Using a standard color picker with property editor alias: Umbraco.ColorPickerAlias

In an attempt to add a new color i choose a color from the picker and press 'Add' - then press save. I get the alert: 'Validation: The value #a77878 is not a valid hex color'

SOLUTION: In the Angular controller: Umbraco.PrevalueEditors.MultiColorPickerController

Find the config of Spectrum - then the property 'changes'

Here we have a function that fires on color change.

It attempts to trim the value of the hex color to go from #efefef to efefef --> so it trims the '#'

It does this with

$scope.newColor = color.toHexString().trimStart('#');

(line 10718 in umbraco.controller.js)

TrimStart somehow fails to trim the #.

So why not use standard js method to do this? like String.replace(...) method.

$scope.newColor = color.toHexString().replace('#', '');

so entire change method: change: function (color) { angularHelper.safeApply($scope, function () { $scope.newColor = color.toHexString().replace('#', ''); // #ff0000 }); },

This works ! (working scenario is to choose a color and add it without a label, then save succesfully)

I have no great explanation why


does not work. All i know is that it is not standard javascript.. so

string.replace('#', '')

would be nice in my opinion.


Sebastiaan Janssen 20 Apr 2018, 08:42:16

Hi Mikkel, this is due to a problem introduced in Chrome 66, we're working really hard on an update to be released soon!

Mikkel Mørch 20 Apr 2018, 08:49:51

Hi Sebastiaan. Thank you for quick answer! I will leave it in for now, and then when you release, it should be overwritten, and all will be good, I expect :-)


Dan Evans 13 Jul 2018, 12:35:01

I just tried adding a colour to an existing picker and it gives the same error but ADDS an extra # onto the value.

John Murphy 01 Aug 2018, 22:09:42

Hi, I'm also having the issue of it adding an extra # onto the value. Should I just be hacking something together similar to what Mikkel suggested?

Sebastiaan Janssen 02 Aug 2018, 06:55:15

@jmurphy@utimco.org This is fixed in later versions so you might want to do a quick upgrade to 7.8.3. Also see: http://issues.umbraco.org/issue/U4-11253

Priority: Normal

Type: Bug

State: Duplicate


Difficulty: Normal


Backwards Compatible: True

Fix Submitted:

Affected versions: 7.8.2

Due in version:


Story Points: