upp-color

Reusable color picker control for hexadecimal colors. It combines a direct hex input (RRGGBB) with an HSV visual picker (surface + hue slider), and emits normalized values for parent components.

When to Use

• You need a reusable color picker in forms or widget configuration panels.
• You want both manual hexadecimal editing and visual HSV interaction.
• You need a single normalized output contract (Changed) for integration with FormGroup/component state.

Demo

Source Code

HTML

<div class="demo-scroll-container">
    <upp-scrollable [scrollbar]="'y'">
        <div class="demo-content">
            <h2>upp-color</h2>
            <p class="demo-description">Reusable color picker with manual hex input and visual HSV selector.</p>

            <div class="demo-section">
                <upp-color
                    [label]="'Background color'"
                    [value]="bgColor"
                    [dataid]="'demo-color-bg'"
                    (Changed)="OnBackgroundChanged($event)"
                ></upp-color>
                <upp-color
                    [label]="'Foreground color'"
                    [value]="fgColor"
                    [dataid]="'demo-color-fg'"
                    (Changed)="OnForegroundChanged($event)"
                ></upp-color>
            </div>

            <div class="preview-card" [style.background]="BackgroundPreview" [style.color]="ForegroundPreview">
                <h3>Live preview</h3>
                <p>bg: {{ bgColor }} · fg: {{ fgColor }}</p>
            </div>
        </div>
    </upp-scrollable>
</div>

TypeScript

import { Component } from '@angular/core';
import { ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core';

@Component({
    selector: 'demo-upp-color',
    templateUrl: './demo-upp-color.html',
    styleUrls: ['../demo-common.scss', './demo-upp-color.scss'],
    changeDetection: ChangeDetectionStrategy.OnPush
})
export class DemoUppColorComponent {
    bgColor = '5663ff';
    fgColor = 'ffffff';

    constructor(private change: ChangeDetectorRef) {
    }

    OnBackgroundChanged(value: string | null): void {
        this.bgColor = String(value || '');
        this.change.markForCheck();
    }

    OnForegroundChanged(value: string | null): void {
        this.fgColor = String(value || '');
        this.change.markForCheck();
    }

    get BackgroundPreview(): string {
        return `#${this.bgColor.padEnd(6, '0').slice(0, 6)}`;
    }

    get ForegroundPreview(): string {
        return `#${this.fgColor.padEnd(6, '0').slice(0, 6)}`;
    }
}

SCSS

:host {
    display: block;
    height: 100vh;
}

.demo-section {
    padding: 8px 0;
}

.preview-card {
    margin-top: 10px;
    border-radius: 10px;
    padding: 14px;
    border: 1px solid rgba(var(--ion-color-medium-rgb), 0.35);
}

API Reference

upp-color

Selector: upp-color

Inputs

Name	Type	Default	Description
label	string	''	Label shown next to the color preview.
value	string | null	'#000000'	Current color value. Accepts RRGGBB or #RRGGBB; internally normalized.
dataid	string	'upp-color-input'	uppDataid value passed to the internal hex input for automation selectors.
placeholder	string	'RRGGBB'	Placeholder text shown in the hex input.

Outputs

Name	Type	Description
Changed	EventEmitter<string>	Emits the normalized hex value (without #) when the user edits via input or picker.