diff --git a/packages/uui-color-area/lib/uui-color-area.element.ts b/packages/uui-color-area/lib/uui-color-area.element.ts
index 48203c9bf..998eace0e 100644
--- a/packages/uui-color-area/lib/uui-color-area.element.ts
+++ b/packages/uui-color-area/lib/uui-color-area.element.ts
@@ -97,12 +97,16 @@ export class UUIColorAreaElement extends LitElement {
const parsed = colord(newVal);
if (parsed.isValid()) {
- const { h, s, l } = parsed.toHsl();
+ const { h, l, a } = parsed.toHsl();
+
+ // Update hue from parsed color, but when color is black, value from hue slider may be different from zero.
+ if (h !== 0) {
+ this.hue = h;
+ }
- this.hue = h;
- this.saturation = s;
this.lightness = l;
this.brightness = this.getBrightness(l);
+ this.alpha = a * 100;
}
} catch (e) {
// TODO: Should we log this?
diff --git a/packages/uui-color-picker/lib/uui-color-picker.element.ts b/packages/uui-color-picker/lib/uui-color-picker.element.ts
index 56024325b..cb77e03ee 100644
--- a/packages/uui-color-picker/lib/uui-color-picker.element.ts
+++ b/packages/uui-color-picker/lib/uui-color-picker.element.ts
@@ -360,15 +360,24 @@ export class UUIColorPickerElement extends LabelMixin('label', LitElement) {
}
setColor(colorString: string | HslaColor) {
- this._colord = new Colord(colorString);
+ const colord = new Colord(colorString);
- const { h, l, s, a } = this._colord.toHsl();
+ const { h, s, l, a } = colord.toHsl();
this.hue = h;
this.saturation = s;
this.lightness = l;
this.alpha = this.opacity ? a * 100 : 100;
+ const hslaColor = colorString as HslaColor;
+
+ // Workaround as hue isn't correct after changing hue slider, but Colord parse hue value as zero when color is black.
+ if (hslaColor && hslaColor.h) {
+ this.hue = hslaColor.h;
+ }
+
+ this._colord = colord;
+
this._syncValues();
this.dispatchEvent(
@@ -384,6 +393,23 @@ export class UUIColorPickerElement extends LabelMixin('label', LitElement) {
return this.uppercase ? string.toUpperCase() : string.toLowerCase();
}
+ /** Generates a hex string from HSL values. Hue must be 0-360. All other arguments must be 0-100. */
+ private getHexString(
+ hue: number,
+ saturation: number,
+ lightness: number,
+ alpha = 100
+ ) {
+ const color = colord(
+ `hsla(${hue}, ${saturation}%, ${lightness}%, ${alpha / 100})`
+ );
+ if (!color.isValid()) {
+ return '';
+ }
+
+ return color.toHex();
+ }
+
private _syncValues() {
this.inputValue = this.getFormattedValue(this.format);
this.value = this.inputValue;
@@ -400,6 +426,7 @@ export class UUIColorPickerElement extends LabelMixin('label', LitElement) {
aria-disabled=${this.disabled ? 'true' : 'false'}>
@@ -419,7 +446,11 @@ export class UUIColorPickerElement extends LabelMixin('label', LitElement) {
class="opacity-slider"
.value=${Math.round(this.alpha)}
type="opacity"
- .color=${this.value}
+ .color=${this.getHexString(
+ this.hue,
+ this.saturation,
+ this.lightness
+ )}
?disabled=${this.disabled}
@change=${this.handleAlphaChange}>
diff --git a/packages/uui-color-slider/lib/uui-color-slider.element.ts b/packages/uui-color-slider/lib/uui-color-slider.element.ts
index e205f6061..a1bdc810a 100644
--- a/packages/uui-color-slider/lib/uui-color-slider.element.ts
+++ b/packages/uui-color-slider/lib/uui-color-slider.element.ts
@@ -217,7 +217,7 @@ export class UUIColorSliderElement extends LabelMixin('label', LitElement) {
this.dispatchEvent(new UUIColorSliderEvent(UUIColorSliderEvent.CHANGE));
}
- get ccsPropCurrentValue() {
+ get cssPropCurrentValue() {
return this.value === 0
? this.vertical
? 100
@@ -257,7 +257,7 @@ export class UUIColorSliderElement extends LabelMixin('label', LitElement) {
${Math.round(this.value)}`;