diff --git a/src/app/data-entries/color-picker/alpha/color-picker-alpha.component.html b/src/app/data-entries/color-picker/alpha/color-picker-alpha.component.html
new file mode 100644
index 000000000..ebd41ed54
--- /dev/null
+++ b/src/app/data-entries/color-picker/alpha/color-picker-alpha.component.html
@@ -0,0 +1,3 @@
+<div class="sample-container">
+    <igc-color-picker #colorPicker label="Pick a color" show-alpha value="rgba(25, 118, 210, 0.5)"></igc-color-picker>
+</div>
diff --git a/src/app/data-entries/color-picker/alpha/color-picker-alpha.component.scss b/src/app/data-entries/color-picker/alpha/color-picker-alpha.component.scss
new file mode 100644
index 000000000..f4cefbb18
--- /dev/null
+++ b/src/app/data-entries/color-picker/alpha/color-picker-alpha.component.scss
@@ -0,0 +1,13 @@
+.sample-container {
+    --ig-size: 2;
+
+    display: flex;
+    justify-content: center;
+    padding-block-start: 0.5rem;
+}
+
+igc-color-picker::part(picker) {
+    --picker-elevation: var(--ig-elevation-4);
+
+    margin-top: 0.5rem;
+}
diff --git a/src/app/data-entries/color-picker/alpha/color-picker-alpha.component.ts b/src/app/data-entries/color-picker/alpha/color-picker-alpha.component.ts
new file mode 100644
index 000000000..b9c1958d6
--- /dev/null
+++ b/src/app/data-entries/color-picker/alpha/color-picker-alpha.component.ts
@@ -0,0 +1,21 @@
+import { Component, CUSTOM_ELEMENTS_SCHEMA, ViewChild, ElementRef, AfterViewInit } from '@angular/core';
+import { defineComponents, IgcColorPickerComponent } from 'igniteui-webcomponents';
+
+defineComponents(IgcColorPickerComponent);
+
+@Component({
+    selector: 'app-color-picker-alpha',
+    styleUrls: ['./color-picker-alpha.component.scss'],
+    templateUrl: './color-picker-alpha.component.html',
+    imports: [],
+    schemas: [CUSTOM_ELEMENTS_SCHEMA]
+})
+
+export class ColorPickerAlphaComponent implements AfterViewInit {
+    @ViewChild('colorPicker', { static: true })
+    colorPicker!: ElementRef<IgcColorPickerComponent>;
+
+    ngAfterViewInit() {
+        this.colorPicker.nativeElement.toggle();
+    }
+}
diff --git a/src/app/data-entries/color-picker/format/color-picker-format.component.html b/src/app/data-entries/color-picker/format/color-picker-format.component.html
new file mode 100644
index 000000000..e0e0fbdc8
--- /dev/null
+++ b/src/app/data-entries/color-picker/format/color-picker-format.component.html
@@ -0,0 +1,3 @@
+<div class="sample-container">
+    <igc-color-picker #colorPicker format="rgb" label="Pick a color"></igc-color-picker>
+</div>
diff --git a/src/app/data-entries/color-picker/format/color-picker-format.component.scss b/src/app/data-entries/color-picker/format/color-picker-format.component.scss
new file mode 100644
index 000000000..f4cefbb18
--- /dev/null
+++ b/src/app/data-entries/color-picker/format/color-picker-format.component.scss
@@ -0,0 +1,13 @@
+.sample-container {
+    --ig-size: 2;
+
+    display: flex;
+    justify-content: center;
+    padding-block-start: 0.5rem;
+}
+
+igc-color-picker::part(picker) {
+    --picker-elevation: var(--ig-elevation-4);
+
+    margin-top: 0.5rem;
+}
diff --git a/src/app/data-entries/color-picker/format/color-picker-format.component.ts b/src/app/data-entries/color-picker/format/color-picker-format.component.ts
new file mode 100644
index 000000000..a867942a1
--- /dev/null
+++ b/src/app/data-entries/color-picker/format/color-picker-format.component.ts
@@ -0,0 +1,21 @@
+import { Component, CUSTOM_ELEMENTS_SCHEMA, ViewChild, ElementRef, AfterViewInit } from '@angular/core';
+import { defineComponents, IgcColorPickerComponent } from 'igniteui-webcomponents';
+
+defineComponents(IgcColorPickerComponent);
+
+@Component({
+    selector: 'app-color-picker-format',
+    styleUrls: ['./color-picker-format.component.scss'],
+    templateUrl: './color-picker-format.component.html',
+    imports: [],
+    schemas: [CUSTOM_ELEMENTS_SCHEMA]
+})
+
+export class ColorPickerFormatComponent implements AfterViewInit {
+    @ViewChild('colorPicker', { static: true })
+    colorPicker!: ElementRef<IgcColorPickerComponent>;
+
+    ngAfterViewInit() {
+        this.colorPicker.nativeElement.toggle();
+    } 
+}
diff --git a/src/app/data-entries/color-picker/input-sizes/color-picker-input-sizes.component.html b/src/app/data-entries/color-picker/input-sizes/color-picker-input-sizes.component.html
new file mode 100644
index 000000000..cc4d57f30
--- /dev/null
+++ b/src/app/data-entries/color-picker/input-sizes/color-picker-input-sizes.component.html
@@ -0,0 +1,14 @@
+<div class="sample-container">
+    <div>
+        <span>Small</span>
+        <igc-color-picker #colorPicker class="small-picker" mode="input" label="Pick a color"></igc-color-picker>
+    </div>
+    <div>
+        <span>Medium</span>
+        <igc-color-picker class="medium-picker" mode="input" label="Pick a color"></igc-color-picker>
+    </div>
+    <div>
+        <span>Large</span>
+        <igc-color-picker class="large-picker" mode="input" label="Pick a color"></igc-color-picker>
+    </div>
+</div>
diff --git a/src/app/data-entries/color-picker/input-sizes/color-picker-input-sizes.component.scss b/src/app/data-entries/color-picker/input-sizes/color-picker-input-sizes.component.scss
new file mode 100644
index 000000000..708377b7c
--- /dev/null
+++ b/src/app/data-entries/color-picker/input-sizes/color-picker-input-sizes.component.scss
@@ -0,0 +1,40 @@
+.small-picker {
+    --ig-size: var(--ig-size-small);
+}
+
+.medium-picker {
+    --ig-size: var(--ig-size-medium);
+}
+
+.large-picker {
+    --ig-size: var(--ig-size-large);
+}
+
+.sample-container {
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    gap: 2rem;
+    padding-block-start: 0.5rem;
+    font-family: "Aktiv Grotesk", sans-serif;
+}
+
+span {
+    display: block;
+    text-align: center;
+    margin-block-end: 1rem;
+    color: var(--ig-gray-600);
+}
+
+igc-color-picker::part(picker) {
+    --picker-elevation: var(--ig-elevation-4);
+
+    margin-top: 0.5rem;
+}
+
+@media (width < 450px) {
+    .sample-container {
+        flex-direction: column;
+        align-items: center;
+    }
+}
diff --git a/src/app/data-entries/color-picker/input-sizes/color-picker-input-sizes.component.ts b/src/app/data-entries/color-picker/input-sizes/color-picker-input-sizes.component.ts
new file mode 100644
index 000000000..04443afb1
--- /dev/null
+++ b/src/app/data-entries/color-picker/input-sizes/color-picker-input-sizes.component.ts
@@ -0,0 +1,21 @@
+import { Component, CUSTOM_ELEMENTS_SCHEMA, ViewChild, ElementRef, AfterViewInit } from '@angular/core';
+import { defineComponents, IgcColorPickerComponent } from 'igniteui-webcomponents';
+
+defineComponents(IgcColorPickerComponent);
+
+@Component({
+    selector: 'app-color-picker-input-sizes',
+    styleUrls: ['./color-picker-input-sizes.component.scss'],
+    templateUrl: './color-picker-input-sizes.component.html',
+    imports: [],
+    schemas: [CUSTOM_ELEMENTS_SCHEMA]
+})
+
+export class ColorPickerInputSizesComponent implements AfterViewInit {
+    @ViewChild('colorPicker', { static: true })
+    colorPicker!: ElementRef<IgcColorPickerComponent>;
+
+    ngAfterViewInit() {
+        this.colorPicker.nativeElement.toggle();
+    }
+}
diff --git a/src/app/data-entries/color-picker/input/color-picker-input.component.html b/src/app/data-entries/color-picker/input/color-picker-input.component.html
new file mode 100644
index 000000000..67554f034
--- /dev/null
+++ b/src/app/data-entries/color-picker/input/color-picker-input.component.html
@@ -0,0 +1,3 @@
+<div class="sample-container">
+    <igc-color-picker #colorPicker mode="input" label="Background"></igc-color-picker>
+</div>
diff --git a/src/app/data-entries/color-picker/input/color-picker-input.component.scss b/src/app/data-entries/color-picker/input/color-picker-input.component.scss
new file mode 100644
index 000000000..f4cefbb18
--- /dev/null
+++ b/src/app/data-entries/color-picker/input/color-picker-input.component.scss
@@ -0,0 +1,13 @@
+.sample-container {
+    --ig-size: 2;
+
+    display: flex;
+    justify-content: center;
+    padding-block-start: 0.5rem;
+}
+
+igc-color-picker::part(picker) {
+    --picker-elevation: var(--ig-elevation-4);
+
+    margin-top: 0.5rem;
+}
diff --git a/src/app/data-entries/color-picker/input/color-picker-input.component.ts b/src/app/data-entries/color-picker/input/color-picker-input.component.ts
new file mode 100644
index 000000000..161e442ff
--- /dev/null
+++ b/src/app/data-entries/color-picker/input/color-picker-input.component.ts
@@ -0,0 +1,21 @@
+import { Component, CUSTOM_ELEMENTS_SCHEMA, ViewChild, ElementRef, AfterViewInit } from '@angular/core';
+import { defineComponents, IgcColorPickerComponent } from 'igniteui-webcomponents';
+
+defineComponents(IgcColorPickerComponent);
+
+@Component({
+    selector: 'app-color-picker-input',
+    styleUrls: ['./color-picker-input.component.scss'],
+    templateUrl: './color-picker-input.component.html',
+    imports: [],
+    schemas: [CUSTOM_ELEMENTS_SCHEMA]
+})
+
+export class ColorPickerInputComponent implements AfterViewInit {
+    @ViewChild('colorPicker', { static: true })
+    colorPicker!: ElementRef<IgcColorPickerComponent>;
+
+    ngAfterViewInit() {
+        this.colorPicker.nativeElement.toggle();
+    } 
+}
diff --git a/src/app/data-entries/color-picker/overview/color-picker-overview.component.html b/src/app/data-entries/color-picker/overview/color-picker-overview.component.html
new file mode 100644
index 000000000..befe6c3b9
--- /dev/null
+++ b/src/app/data-entries/color-picker/overview/color-picker-overview.component.html
@@ -0,0 +1,34 @@
+<div class="sample-container">
+    <igx-card>
+        <igx-card-content>
+            <h2>Choose your interior color</h2>
+            <igx-select value="Satin" type="border">
+                <label igxLabel>Type of wall paints</label>
+                @for (item of paintTypes; track item) {
+                    <igx-select-item [value]="item">{{ item }}</igx-select-item>
+                }
+            </igx-select>
+            <igx-select value="3 litres" type="border">
+                <label igxLabel>Paint quantity</label>
+                @for (item of paintQuantities; track item) {
+                    <igx-select-item [value]="item">{{ item }}</igx-select-item>
+                }
+            </igx-select>
+            <div class="color-row">
+                <igc-color-picker #picker mode="input" value="#0598fa"></igc-color-picker>
+                <button igxIconButton="flat" (click)="resetColor()">
+                    <igx-icon>refresh</igx-icon>
+                </button>
+            </div>
+        </igx-card-content>
+        <igx-card-actions>
+            <button igxButton="flat" igxStart>Back</button>
+            <div class="stepper">
+                <span class="dot"></span>
+                <span class="dot"></span>
+                <span class="dot active"></span>
+            </div>
+            <button igxButton="flat" igxEnd>Confirm</button>
+        </igx-card-actions>
+    </igx-card>
+</div>
diff --git a/src/app/data-entries/color-picker/overview/color-picker-overview.component.scss b/src/app/data-entries/color-picker/overview/color-picker-overview.component.scss
new file mode 100644
index 000000000..df7e8a0f5
--- /dev/null
+++ b/src/app/data-entries/color-picker/overview/color-picker-overview.component.scss
@@ -0,0 +1,80 @@
+.sample-container {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding-block-start: 0.5rem;
+}
+
+igx-card {
+    --ig-size: 2;
+
+    width: 22rem;
+}
+
+h2 {
+    margin: 0 0 1rem;
+    font-size: 1.25rem;
+    color: var(--ig-gray-900);
+}
+
+igx-card-content {
+    display: flex;
+    flex-direction: column;
+    gap: 1.25rem;
+}
+
+igx-select {
+    width: 100%;
+}
+
+.color-row {
+    position: relative;
+}
+
+igc-color-picker {
+    width: 100%;
+}
+
+igc-color-picker::part(color-picker) {
+    width: 100%;
+    grid-template-columns: auto;
+}
+
+igc-color-picker::part(picker) {
+    --picker-elevation: var(--ig-elevation-12);
+}
+
+.igx-icon-button {
+    position: absolute;
+    right: 0.5rem;
+    top: 0.5rem;
+    z-index: 1;
+}
+
+igx-card-actions {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+}
+
+.stepper {
+    display: flex;
+    gap: 0.375rem;
+}
+
+.stepper .dot {
+    width: 0.375rem;
+    height: 0.375rem;
+    border-radius: 50%;
+    background: var(--ig-gray-300);
+}
+
+.stepper .dot.active {
+    background: var(--ig-secondary-500);
+}
+
+::ng-deep {
+    .igx-card-actions__end {
+        margin-inline-start: unset;
+    }
+}
diff --git a/src/app/data-entries/color-picker/overview/color-picker-overview.component.ts b/src/app/data-entries/color-picker/overview/color-picker-overview.component.ts
new file mode 100644
index 000000000..10d22cf96
--- /dev/null
+++ b/src/app/data-entries/color-picker/overview/color-picker-overview.component.ts
@@ -0,0 +1,41 @@
+import { Component, ElementRef, ViewChild, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { defineComponents, IgcColorPickerComponent } from 'igniteui-webcomponents';
+import { IgxCardComponent, IgxCardContentDirective, IgxCardActionsComponent } from 'igniteui-angular/card';
+import { IgxButtonDirective, IgxIconButtonDirective } from 'igniteui-angular/directives';
+import { IgxIconComponent } from 'igniteui-angular/icon';
+import { IgxSelectComponent, IgxSelectItemComponent } from 'igniteui-angular/select';
+import { IgxLabelDirective } from 'igniteui-angular/input-group';
+
+defineComponents(IgcColorPickerComponent);
+
+@Component({
+    selector: 'app-color-picker-overview',
+    styleUrls: ['./color-picker-overview.component.scss'],
+    templateUrl: './color-picker-overview.component.html',
+    imports: [
+        FormsModule,
+        IgxCardComponent,
+        IgxCardContentDirective,
+        IgxCardActionsComponent,
+        IgxButtonDirective,
+        IgxIconButtonDirective,
+        IgxIconComponent,
+        IgxSelectComponent,
+        IgxSelectItemComponent,
+        IgxLabelDirective
+    ],
+    schemas: [CUSTOM_ELEMENTS_SCHEMA]
+})
+
+export class ColorPickerOverviewComponent {
+    @ViewChild('picker', { static: true })
+    public picker!: ElementRef<IgcColorPickerComponent>;
+
+    public paintTypes = ['Matte', 'Satin', 'Eggshell', 'Gloss'];
+    public paintQuantities = ['1 litre', '3 litres', '5 litres', '10 litres'];
+
+    public resetColor(): void {
+        this.picker.nativeElement.value = '';
+    }
+}
diff --git a/src/app/data-entries/color-picker/reactive-form/color-picker-reactive-form.component.html b/src/app/data-entries/color-picker/reactive-form/color-picker-reactive-form.component.html
new file mode 100644
index 000000000..97f917eef
--- /dev/null
+++ b/src/app/data-entries/color-picker/reactive-form/color-picker-reactive-form.component.html
@@ -0,0 +1,45 @@
+<div class="sample-container">
+    <igx-card>
+        <igx-card-content>
+            <form #formRef [formGroup]="labelForm">
+                <h2>Create a label</h2>
+                <igx-input-group type="border">
+                    <label igxLabel for="labelName">Label name</label>
+                    <input igxInput id="labelName" name="name" formControlName="name" autocomplete="off" />
+                    @if (name.touched && name.invalid) {
+                        <igx-hint>A label name is required.</igx-hint>
+                    }
+                </igx-input-group>
+                <igc-color-picker
+                    formControlName="color"
+                    name="color"
+                    mode="input"
+                    label="Label color"
+                    required
+                    [swatches]="swatches"
+                    [invalid]="color.touched && color.invalid">
+                    <span slot="helper-text">Pick a swatch or select any color value.</span>
+                    <span slot="value-missing">A label color is required.</span>
+                </igc-color-picker>
+                <igc-color-picker
+                    formControlName="textColor"
+                    name="textColor"
+                    label="Text color"
+                    hide-formats>
+                </igc-color-picker>
+                <div class="preview">
+                    <span class="preview-caption">Preview</span>
+                    <span class="preview-label"
+                        [style.background]="labelForm.value.color || 'var(--ig-gray-200)'"
+                        [style.color]="labelForm.value.textColor || 'inherit'">
+                        {{ labelForm.value.name || 'Label' }}
+                    </span>
+                </div>
+                <div class="actions">
+                    <button igxButton="flat" type="button" (click)="onReset(formRef)">Reset</button>
+                    <button igxButton="contained" type="submit" [disabled]="labelForm.invalid">Create</button>
+                </div>
+            </form>
+        </igx-card-content>
+    </igx-card>
+</div>
diff --git a/src/app/data-entries/color-picker/reactive-form/color-picker-reactive-form.component.scss b/src/app/data-entries/color-picker/reactive-form/color-picker-reactive-form.component.scss
new file mode 100644
index 000000000..c5b1f896f
--- /dev/null
+++ b/src/app/data-entries/color-picker/reactive-form/color-picker-reactive-form.component.scss
@@ -0,0 +1,62 @@
+.sample-container {
+    --ig-size: 2;
+
+    display: flex;
+    justify-content: center;
+    padding-block-start: 0.5rem;
+}
+
+igx-card {
+    width: 24rem;
+}
+
+form {
+    display: flex;
+    flex-direction: column;
+    gap: 1.25rem;
+}
+
+h2 {
+    margin: 0;
+    font-size: 1.25rem;
+    color: var(--ig-gray-900);
+}
+
+igc-color-picker[mode="input"] {
+    width: 100%;
+}
+
+igc-color-picker[mode="input"]::part(color-picker) {
+    width: 100%;
+    grid-template-columns: auto;
+}
+
+igc-color-picker::part(picker) {
+    --picker-elevation: var(--ig-elevation-4);
+
+    margin-top: 0.5rem;
+}
+
+.preview {
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+}
+
+.preview-caption {
+    font-size: 0.875rem;
+    color: var(--ig-gray-600);
+}
+
+.preview-label {
+    padding: 0.25rem 0.75rem;
+    border-radius: 1rem;
+    font-size: 0.875rem;
+    font-weight: 600;
+}
+
+.actions {
+    display: flex;
+    justify-content: flex-end;
+    gap: 0.5rem;
+}
diff --git a/src/app/data-entries/color-picker/reactive-form/color-picker-reactive-form.component.ts b/src/app/data-entries/color-picker/reactive-form/color-picker-reactive-form.component.ts
new file mode 100644
index 000000000..a0a7fea1a
--- /dev/null
+++ b/src/app/data-entries/color-picker/reactive-form/color-picker-reactive-form.component.ts
@@ -0,0 +1,57 @@
+import { Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { FormControl, FormGroup, ReactiveFormsModule, Validators } from '@angular/forms';
+import { defineComponents, IgcColorPickerComponent } from 'igniteui-webcomponents';
+import { IgcFormControlDirective, IgxButtonDirective } from 'igniteui-angular/directives';
+import { IgxCardComponent, IgxCardContentDirective } from 'igniteui-angular/card';
+import { IgxHintDirective, IgxInputDirective, IgxInputGroupComponent, IgxLabelDirective } from 'igniteui-angular/input-group';
+
+defineComponents(IgcColorPickerComponent);
+
+interface LabelForm {
+    name: FormControl<string | null>;
+    color: FormControl<string | null>;
+    textColor: FormControl<string | null>;
+}
+
+const initialValue = { name: '', color: '', textColor: '#000000' };
+
+@Component({
+    selector: 'app-color-picker-reactive-form',
+    styleUrls: ['./color-picker-reactive-form.component.scss'],
+    templateUrl: './color-picker-reactive-form.component.html',
+    imports: [
+        ReactiveFormsModule,
+        IgcFormControlDirective,
+        IgxButtonDirective,
+        IgxCardComponent,
+        IgxCardContentDirective,
+        IgxInputGroupComponent,
+        IgxInputDirective,
+        IgxLabelDirective,
+        IgxHintDirective
+    ],
+    schemas: [CUSTOM_ELEMENTS_SCHEMA]
+})
+
+export class ColorPickerReactiveFormComponent {
+    public swatches = ['#d32f2f', '#f57c00', '#fbc02d', '#388e3c', '#1976d2', '#7b1fa2', '#455a64'];
+
+    public labelForm = new FormGroup<LabelForm>({
+        name: new FormControl(initialValue.name, Validators.required),
+        color: new FormControl(initialValue.color, Validators.required),
+        textColor: new FormControl(initialValue.textColor)
+    });
+
+    public get name() {
+        return this.labelForm.controls.name;
+    }
+
+    public get color() {
+        return this.labelForm.controls.color;
+    }
+
+    public onReset(form: HTMLFormElement): void {
+        form.reset();
+        this.labelForm.reset(initialValue);
+    }
+}
diff --git a/src/app/data-entries/color-picker/sizes/color-picker-sizes.component.html b/src/app/data-entries/color-picker/sizes/color-picker-sizes.component.html
new file mode 100644
index 000000000..11a68b6c1
--- /dev/null
+++ b/src/app/data-entries/color-picker/sizes/color-picker-sizes.component.html
@@ -0,0 +1,14 @@
+<div class="sample-container">
+    <div>
+        <span>Small</span>
+        <igc-color-picker #colorPicker class="small-picker" label="Pick a color"></igc-color-picker>
+    </div>
+    <div>
+        <span>Medium</span>
+        <igc-color-picker class="medium-picker" label="Pick a color"></igc-color-picker>
+    </div>
+    <div>
+        <span>Large</span>
+        <igc-color-picker class="large-picker" label="Pick a color"></igc-color-picker>
+    </div>
+</div>
diff --git a/src/app/data-entries/color-picker/sizes/color-picker-sizes.component.scss b/src/app/data-entries/color-picker/sizes/color-picker-sizes.component.scss
new file mode 100644
index 000000000..708377b7c
--- /dev/null
+++ b/src/app/data-entries/color-picker/sizes/color-picker-sizes.component.scss
@@ -0,0 +1,40 @@
+.small-picker {
+    --ig-size: var(--ig-size-small);
+}
+
+.medium-picker {
+    --ig-size: var(--ig-size-medium);
+}
+
+.large-picker {
+    --ig-size: var(--ig-size-large);
+}
+
+.sample-container {
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    gap: 2rem;
+    padding-block-start: 0.5rem;
+    font-family: "Aktiv Grotesk", sans-serif;
+}
+
+span {
+    display: block;
+    text-align: center;
+    margin-block-end: 1rem;
+    color: var(--ig-gray-600);
+}
+
+igc-color-picker::part(picker) {
+    --picker-elevation: var(--ig-elevation-4);
+
+    margin-top: 0.5rem;
+}
+
+@media (width < 450px) {
+    .sample-container {
+        flex-direction: column;
+        align-items: center;
+    }
+}
diff --git a/src/app/data-entries/color-picker/sizes/color-picker-sizes.component.ts b/src/app/data-entries/color-picker/sizes/color-picker-sizes.component.ts
new file mode 100644
index 000000000..9d0a203e9
--- /dev/null
+++ b/src/app/data-entries/color-picker/sizes/color-picker-sizes.component.ts
@@ -0,0 +1,21 @@
+import { Component, CUSTOM_ELEMENTS_SCHEMA, ViewChild, ElementRef, AfterViewInit } from '@angular/core';
+import { defineComponents, IgcColorPickerComponent } from 'igniteui-webcomponents';
+
+defineComponents(IgcColorPickerComponent);
+
+@Component({
+    selector: 'app-color-picker-sizes',
+    styleUrls: ['./color-picker-sizes.component.scss'],
+    templateUrl: './color-picker-sizes.component.html',
+    imports: [],
+    schemas: [CUSTOM_ELEMENTS_SCHEMA]
+})
+
+export class ColorPickerSizesComponent implements AfterViewInit {
+    @ViewChild('colorPicker', { static: true })
+    colorPicker!: ElementRef<IgcColorPickerComponent>;
+
+    ngAfterViewInit() {
+        this.colorPicker.nativeElement.toggle();
+    }
+}
diff --git a/src/app/data-entries/color-picker/states/color-picker-states.component.html b/src/app/data-entries/color-picker/states/color-picker-states.component.html
new file mode 100644
index 000000000..5ac47a4df
--- /dev/null
+++ b/src/app/data-entries/color-picker/states/color-picker-states.component.html
@@ -0,0 +1,14 @@
+<div class="sample-container">
+    <div>
+        <span>Default state</span>
+        <igc-color-picker #colorPicker label="Pick a color"></igc-color-picker>
+    </div>
+    <div>
+        <span>Invalid state</span>
+        <igc-color-picker [invalid]="invalid" required label="Pick a color" (igcInput)="onInput()"></igc-color-picker>
+    </div>
+    <div>
+        <span>Disabled state</span>
+        <igc-color-picker disabled label="Pick a color"></igc-color-picker>
+    </div>
+</div>
diff --git a/src/app/data-entries/color-picker/states/color-picker-states.component.scss b/src/app/data-entries/color-picker/states/color-picker-states.component.scss
new file mode 100644
index 000000000..37ab4063c
--- /dev/null
+++ b/src/app/data-entries/color-picker/states/color-picker-states.component.scss
@@ -0,0 +1,30 @@
+.sample-container {
+    --ig-size: 2;
+
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    gap: 2rem;
+    padding-block-start: 0.5rem;
+    font-family: "Aktiv Grotesk", sans-serif;
+}
+
+span {
+    display: block;
+    text-align: center;
+    margin-block-end: 1rem;
+    color: var(--ig-gray-600);
+}
+
+igc-color-picker::part(picker) {
+    --picker-elevation: var(--ig-elevation-4);
+
+    margin-top: 0.5rem;
+}
+
+@media (width < 450px) {
+    .sample-container {
+        flex-direction: column;
+        align-items: center;
+    }
+}
diff --git a/src/app/data-entries/color-picker/states/color-picker-states.component.ts b/src/app/data-entries/color-picker/states/color-picker-states.component.ts
new file mode 100644
index 000000000..1578339f8
--- /dev/null
+++ b/src/app/data-entries/color-picker/states/color-picker-states.component.ts
@@ -0,0 +1,27 @@
+import { Component, CUSTOM_ELEMENTS_SCHEMA, ViewChild, ElementRef, AfterViewInit } from '@angular/core';
+import { defineComponents, IgcColorPickerComponent } from 'igniteui-webcomponents';
+
+defineComponents(IgcColorPickerComponent);
+
+@Component({
+    selector: 'app-color-picker-states',
+    styleUrls: ['./color-picker-states.component.scss'],
+    templateUrl: './color-picker-states.component.html',
+    imports: [],
+    schemas: [CUSTOM_ELEMENTS_SCHEMA]
+})
+
+export class ColorPickerStatesComponent implements AfterViewInit {
+    public invalid = true;
+
+    public onInput(): void {
+        this.invalid = false;
+    }
+
+    @ViewChild('colorPicker', { static: true })
+    colorPicker!: ElementRef<IgcColorPickerComponent>;
+
+    ngAfterViewInit() {
+        this.colorPicker.nativeElement.toggle();
+    }
+}
diff --git a/src/app/data-entries/color-picker/styling/color-picker-styling.component.html b/src/app/data-entries/color-picker/styling/color-picker-styling.component.html
new file mode 100644
index 000000000..29b527c55
--- /dev/null
+++ b/src/app/data-entries/color-picker/styling/color-picker-styling.component.html
@@ -0,0 +1,57 @@
+<div class="sample-container">
+    <div class="editor-toolbar">
+        <div class="toolbar-group">
+            <span class="toolbar-group-label">Text</span>
+            <div class="toolbar-actions">
+                <button igxIconButton="flat" aria-label="Text color">
+                    <igx-icon>format_color_text</igx-icon>
+                </button>
+            </div>
+        </div>
+        <div class="toolbar-group">
+            <span class="toolbar-group-label">Alignment</span>
+            <div class="toolbar-actions">
+                <button igxIconButton="flat" aria-label="Justify">
+                    <igx-icon>format_align_justify</igx-icon>
+                </button>
+                <button igxIconButton="flat" aria-label="Align right">
+                    <igx-icon>format_align_right</igx-icon>
+                </button>
+                <button igxIconButton="flat" aria-label="Align center">
+                    <igx-icon>format_align_center</igx-icon>
+                </button>
+                <button igxIconButton="flat" aria-label="Align left">
+                    <igx-icon>format_align_left</igx-icon>
+                </button>
+            </div>
+        </div>
+        <div class="toolbar-group">
+            <span class="toolbar-group-label">Content</span>
+            <div class="toolbar-actions">
+                <button igxIconButton="flat" aria-label="Shapes">
+                    <igx-icon>category</igx-icon>
+                </button>
+                <button igxIconButton="flat" aria-label="Image">
+                    <igx-icon>image</igx-icon>
+                </button>
+                <button igxIconButton="flat" aria-label="Layout">
+                    <igx-icon>dashboard</igx-icon>
+                </button>
+            </div>
+        </div>
+        <div class="toolbar-group">
+            <span class="toolbar-group-label">Charts</span>
+            <div class="toolbar-actions">
+                <button igxIconButton="flat" aria-label="Bar chart">
+                    <igx-icon>bar_chart</igx-icon>
+                </button>
+            </div>
+        </div>
+        <div class="toolbar-group">
+            <span class="toolbar-group-label">Colors</span>
+            <div class="toolbar-actions">
+                <igc-color-picker mode="input" placeholder="Color"></igc-color-picker>
+            </div>
+        </div>
+    </div>
+</div>
diff --git a/src/app/data-entries/color-picker/styling/color-picker-styling.component.scss b/src/app/data-entries/color-picker/styling/color-picker-styling.component.scss
new file mode 100644
index 000000000..055ca3c76
--- /dev/null
+++ b/src/app/data-entries/color-picker/styling/color-picker-styling.component.scss
@@ -0,0 +1,16 @@
+@use "layout.scss";
+
+igc-color-picker {
+    --ig-color-picker-picker-background: #e6f2ff;
+    --ig-color-picker-picker-border-color: #a9b8cc;
+    --ig-color-picker-picker-border-radius: 1rem;
+    --ig-color-picker-picker-elevation: none;
+}
+
+igc-color-picker::part(anchor) {
+    border: 0.125rem solid #a9b8cc;
+}
+
+igc-color-picker::part(picker-canvas) {
+    border-radius: 0.25rem;
+}
diff --git a/src/app/data-entries/color-picker/styling/color-picker-styling.component.ts b/src/app/data-entries/color-picker/styling/color-picker-styling.component.ts
new file mode 100644
index 000000000..43903a85f
--- /dev/null
+++ b/src/app/data-entries/color-picker/styling/color-picker-styling.component.ts
@@ -0,0 +1,16 @@
+import { Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { defineComponents, IgcColorPickerComponent } from 'igniteui-webcomponents';
+import { IgxIconButtonDirective } from 'igniteui-angular/directives';
+import { IgxIconComponent } from 'igniteui-angular/icon';
+
+defineComponents(IgcColorPickerComponent);
+
+@Component({
+    selector: 'app-color-picker-styling',
+    styleUrls: ['./color-picker-styling.component.scss'],
+    templateUrl: './color-picker-styling.component.html',
+    imports: [IgxIconButtonDirective, IgxIconComponent],
+    schemas: [CUSTOM_ELEMENTS_SCHEMA]
+})
+
+export class ColorPickerStylingComponent {}
diff --git a/src/app/data-entries/color-picker/styling/layout.scss b/src/app/data-entries/color-picker/styling/layout.scss
new file mode 100644
index 000000000..6a8181ff0
--- /dev/null
+++ b/src/app/data-entries/color-picker/styling/layout.scss
@@ -0,0 +1,99 @@
+.sample-container {
+    --ig-size: 2;
+
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding-block-start: 0.5rem;
+}
+
+.editor-toolbar {
+    display: flex;
+    align-items: stretch;
+    gap: 0.5rem;
+    padding: 1rem;
+    border-radius: 1rem;
+    background: #00142b;
+    font-family: "Aktiv Grotesk", sans-serif;
+}
+
+.toolbar-group {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 0.5rem;
+}
+
+.toolbar-group-label {
+    font-size: 0.75rem;
+    font-weight: 600;
+    line-height: 1rem;
+    letter-spacing: 0.009375rem;
+    color: #d2dbe8;
+}
+
+.toolbar-actions {
+    border-radius: 0.5rem;
+    background: #556c86;
+}
+
+[igxIconButton] {
+    width: fit-content;
+    height: fit-content;
+    padding: 0.5rem;
+    --foreground: #fcfcfc;
+    --hover-foreground: #fff;
+}
+
+[igxIconButton] igx-icon {
+    --size: 0.875rem;
+    width: 1.6em;
+    height: 1.6em;
+    align-items: center;
+    justify-content: center;
+}
+
+.toolbar-group:nth-child(2) {
+    [igxIconButton]:nth-of-type(2) {
+        padding-inline: unset;
+    }
+
+    [igxIconButton]:nth-of-type(3) {
+        padding-inline-end: unset;
+    }
+}
+
+.toolbar-group:nth-child(3) [igxIconButton]:nth-of-type(2) {
+    padding-inline: unset;
+}
+
+igc-color-picker {
+    --ig-size: var(--ig-size-small);
+    --ig-input-group-border-color: transparent;
+    --ig-input-group-hover-border-color: rgb(255 255 255 / 15%);
+    --ig-input-group-focused-border-color: transparent;
+    --ig-input-group-border-border-radius: 0.5rem;
+    --ig-input-group-filled-text-color: #fff;
+    --ig-input-group-filled-text-hover-color: #fff;
+    --ig-input-group-focused-text-color: #fff;
+    --ig-input-group-placeholder-color: #fff;
+    --ig-input-group-hover-placeholder-color: #fff;
+    --ig-input-group-focus-placeholder-color: #fff;
+
+    width: 8.75rem;
+}
+
+igc-color-picker::part(picker) {
+    --ig-input-group-filled-text-color: var(--ig-gray-900);
+    --ig-input-group-filled-text-hover-color: var(--ig-gray-900);
+    --ig-input-group-focused-text-color: var(--ig-gray-900);
+    --ig-input-group-placeholder-color: var(--ig-gray-900);
+    --ig-input-group-hover-placeholder-color: var(--ig-gray-900);
+    --ig-input-group-focus-placeholder-color: var(--ig-gray-900);
+    --ig-input-group-border-color: var(--ig-gray-500);
+    --ig-input-group-hover-border-color: var(--ig-gray-500);
+    --ig-input-group-focused-border-color: var(--ig-gray-500);
+    --ig-input-group-border-border-radius: 0.25rem;
+
+    margin-top: 1.25rem;
+}
\ No newline at end of file
diff --git a/src/app/data-entries/color-picker/swatches/color-picker-swatches.component.html b/src/app/data-entries/color-picker/swatches/color-picker-swatches.component.html
new file mode 100644
index 000000000..8408e1d46
--- /dev/null
+++ b/src/app/data-entries/color-picker/swatches/color-picker-swatches.component.html
@@ -0,0 +1,4 @@
+<div class="sample-container">
+    <igc-color-picker #colorPicker1 label="Pick a color" [swatches]="oneLineSwatches"></igc-color-picker>
+    <igc-color-picker #colorPicker2 label="Pick a color" [swatches]="multiLineSwatches"></igc-color-picker>
+</div>
diff --git a/src/app/data-entries/color-picker/swatches/color-picker-swatches.component.scss b/src/app/data-entries/color-picker/swatches/color-picker-swatches.component.scss
new file mode 100644
index 000000000..b4ca3f0bb
--- /dev/null
+++ b/src/app/data-entries/color-picker/swatches/color-picker-swatches.component.scss
@@ -0,0 +1,14 @@
+.sample-container {
+    --ig-size: 2;
+
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    padding-block-start: 0.5rem;
+}
+
+igc-color-picker::part(picker) {
+    --picker-elevation: var(--ig-elevation-4);
+
+    margin-top: 0.5rem;
+}
\ No newline at end of file
diff --git a/src/app/data-entries/color-picker/swatches/color-picker-swatches.component.ts b/src/app/data-entries/color-picker/swatches/color-picker-swatches.component.ts
new file mode 100644
index 000000000..e2d803fc5
--- /dev/null
+++ b/src/app/data-entries/color-picker/swatches/color-picker-swatches.component.ts
@@ -0,0 +1,31 @@
+import { Component, CUSTOM_ELEMENTS_SCHEMA, ViewChild, ElementRef, AfterViewInit } from '@angular/core';
+import { defineComponents, IgcColorPickerComponent } from 'igniteui-webcomponents';
+
+defineComponents(IgcColorPickerComponent);
+
+@Component({
+    selector: 'app-color-picker-swatches',
+    styleUrls: ['./color-picker-swatches.component.scss'],
+    templateUrl: './color-picker-swatches.component.html',
+    imports: [],
+    schemas: [CUSTOM_ELEMENTS_SCHEMA]
+})
+
+export class ColorPickerSwatchesComponent implements AfterViewInit {
+    public oneLineSwatches = ['#f44336', '#e91e63', '#9c27b0', '#3f51b5', '#2196f3', '#4caf50'];
+
+    public multiLineSwatches = [
+        '#f44336', '#e91e63', '#9c27b0', '#3f51b5', '#2196f3', '#4caf50', '#ffeb3b', '#ff9800', '#795548', '#607d8b', '#ffffff', '#000000', '#0000ff', '#00ff00', '#ff00ff', '#00ffff', '#ff0000', '#ffff00', '#ff00ff', '#00ffff', '#c0c0c0', '#808080', '#800000', '#808000'
+    ];
+
+    @ViewChild('colorPicker1', { static: true })
+    colorPicker1!: ElementRef<IgcColorPickerComponent>;
+
+    @ViewChild('colorPicker2', { static: true })
+    colorPicker2!: ElementRef<IgcColorPickerComponent>;
+
+    ngAfterViewInit() {
+        this.colorPicker1.nativeElement.toggle();
+        this.colorPicker2.nativeElement.toggle();
+    }
+}
diff --git a/src/app/data-entries/color-picker/tailwind-styling/color-picker-tailwind-styling.component.html b/src/app/data-entries/color-picker/tailwind-styling/color-picker-tailwind-styling.component.html
new file mode 100644
index 000000000..85e1cf292
--- /dev/null
+++ b/src/app/data-entries/color-picker/tailwind-styling/color-picker-tailwind-styling.component.html
@@ -0,0 +1,62 @@
+<div class="sample-container">
+    <div class="theme-editor">
+        <div class="theme-editor-header">
+            <div>
+                <h2>Theme Editor</h2>
+                <p>Use the pickers to style the card.</p>
+            </div>
+            <button igxIconButton="flat" igxRipple aria-label="Reset theme" (click)="reset()">
+                <igx-icon>refresh</igx-icon>
+            </button>
+        </div>
+        <div class="swatches">
+            <div class="swatch-item">
+                <igc-color-picker
+                    class="!light-color-picker [--ig-color-picker-picker-background:#fff0eb] [--ig-color-picker-picker-border-color:#f95924] [--ig-color-picker-anchor-background-hover:#e9e9e914] [--ig-color-picker-picker-border-radius:0.5rem]"
+                    [value]="background" label="Background" (igcInput)="onBackgroundInput($event)">
+                    <span slot="helper-text">Card surface color</span>
+                </igc-color-picker>
+            </div>
+            <div class="swatch-item">
+                <igc-color-picker
+                    class="!light-color-picker [--ig-color-picker-picker-background:#fff0eb] [--ig-color-picker-picker-border-color:#f95924] [--ig-color-picker-anchor-background-hover:#e9e9e914] [--ig-color-picker-picker-border-radius:0.5rem]"
+                    [value]="text" size="small" label="Text" (igcInput)="onTextInput($event)">
+                    <span slot="helper-text" class="swatch-hint">Body &amp; heading color</span>
+                </igc-color-picker>
+            </div>
+            <div class="swatch-item">
+                <igc-color-picker
+                    class="!light-color-picker [--ig-color-picker-picker-background:#fff0eb] [--ig-color-picker-picker-border-color:#f95924] [--ig-color-picker-anchor-background-hover:#e9e9e914] [--ig-color-picker-picker-border-radius:0.5rem]"
+                    [value]="accent" size="small" label="Accent" (igcInput)="onAccentInput($event)">
+                    <span slot="helper-text" class="swatch-hint">Button &amp; tag color</span>
+                </igc-color-picker>
+            </div>
+            <div class="swatch-item">
+                <igc-color-picker
+                    class="!light-color-picker [--ig-color-picker-picker-background:#fff0eb] [--ig-color-picker-picker-border-color:#f95924] [--ig-color-picker-anchor-background-hover:#e9e9e914] [--ig-color-picker-picker-border-radius:0.5rem]"
+                    [value]="border" size="small" label="Border" (igcInput)="onBorderInput($event)">
+                    <span slot="helper-text" class="swatch-hint">Card edge color</span>
+                </igc-color-picker>
+            </div>
+            <div class="swatch-item disabled">
+                <igc-color-picker
+                    class="!light-color-picker [--ig-color-picker-picker-background:#fff0eb] [--ig-color-picker-picker-border-color:#f95924] [--ig-color-picker-anchor-background-hover:#e9e9e914] [--ig-color-picker-picker-border-radius:0.5rem]"
+                    disabled value="#7d91ab" size="small" label="Shadow (Pro)">
+                    <span slot="helper-text" class="swatch-hint">Upgrade to unlock</span>
+                </igc-color-picker>
+            </div>
+        </div>
+        <igx-card [style.--preview-bg]="background" [style.--preview-text]="text"
+            [style.--preview-accent]="accent" [style.--preview-border]="border">
+            <igx-card-content>
+                <igx-chip class="preview-chip">Design</igx-chip>
+                <h3 class="preview-title">Color Picker in Practice</h3>
+                <p class="preview-text">Pick colors above to see them applied live across every element of this card.</p>
+                <div class="preview-actions">
+                    <button igxButton="contained" igxRipple class="preview-primary">Read more</button>
+                    <button igxButton="outlined" igxRipple class="preview-secondary">Save</button>
+                </div>
+            </igx-card-content>
+        </igx-card>
+    </div>
+</div>
diff --git a/src/app/data-entries/color-picker/tailwind-styling/color-picker-tailwind-styling.component.scss b/src/app/data-entries/color-picker/tailwind-styling/color-picker-tailwind-styling.component.scss
new file mode 100644
index 000000000..b76c19079
--- /dev/null
+++ b/src/app/data-entries/color-picker/tailwind-styling/color-picker-tailwind-styling.component.scss
@@ -0,0 +1,176 @@
+igc-color-picker::part(copy),
+igc-color-picker::part(eye-dropper) {
+    --foreground: #c6451b;
+}
+
+igc-color-picker::part(picker) {
+    --ig-input-group-border-color: #f95924;
+    --ig-input-group-hover-border-color: #f95924;
+    --ig-input-group-focused-border-color: #f95924;
+
+    margin-top: 1.25rem;
+}
+
+igc-color-picker::part(buttons) {
+    gap: 0rem;
+}
+
+igc-color-picker {
+    --ig-color-picker-picker-elevation: none;
+}
+
+.sample-container {
+    --ig-size: 2;
+
+    display: flex;
+    height: fit-content;
+    max-width: 55rem;
+    margin-inline: auto;
+    padding-block-start: 0.5rem;
+}
+
+.theme-editor {
+    --ig-font-family: "Aktiv Grotesk", sans-serif;
+
+    width: 100%;
+    border-radius: 0.75rem;
+    border: 0.063rem solid;
+    padding: 1.5rem;
+    border-color: var(--ig-gray-200);
+    background: var(--ig-surface-500);
+}
+
+.theme-editor-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0.5rem 1rem;
+    border-bottom: 0.063rem solid;
+    border-color: var(--ig-gray-200);
+}
+
+.theme-editor-header h2 {
+    font-size: 1rem;
+    line-height: 1.5rem;
+    font-weight: 600;
+    margin: 0;
+    color: var(--ig-gray-900);
+    letter-spacing: 0.009rem;
+}
+
+.theme-editor-header p {
+    font-size: 0.875rem;
+    line-height: 1.25rem;
+    margin: 0.125rem 0 0;
+    color: var(--ig-gray-600);
+}
+
+.theme-editor-header igx-icon {
+    --size: 1.5rem;
+}
+
+.swatches {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 1.5rem;
+    padding: 1.5rem 1rem 1rem;
+}
+
+.swatch-item {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    max-width: 8.5rem;
+    width: 100%;
+}
+
+.swatch-item igc-color-picker {
+    --ig-color-picker-anchor-border-radius: 0.375rem;
+    --ig-color-picker-label-color: var(--ig-gray-900);
+}
+
+.swatch-item igc-color-picker::part(label) {
+    font-size: 0.875rem;
+    line-height: 1.25rem;
+    font-weight: 500;
+}
+
+igc-color-picker::part(anchor) {
+    --anchor-border-radius: 0.25rem;
+    --anchor-border-color: var(--ig-gray-600);
+    --swatch-preview-border-color: var(--ig-gray-300);
+}
+
+.swatch-item.disabled igc-color-picker {
+    --ig-color-picker-label-color-disabled: var(--ig-gray-400);
+}
+
+.swatch-item.disabled .swatch-hint {
+    color: var(--ig-gray-400);
+}
+
+.swatch-hint {
+    font-size: 0.75rem;
+    line-height: 1rem;
+    color: var(--ig-gray-600);
+}
+
+igx-card {
+    margin-block-start: 1rem;
+    border-radius: 0.5rem;
+    background: var(--preview-bg);
+    border: 0.063rem solid var(--preview-border);
+    box-shadow: var(--ig-elevation-4);
+}
+
+.preview-chip {
+    --ig-size: var(--ig-size-large);
+    --ig-chip-background: color-mix(in srgb, var(--preview-accent) 25%, transparent);
+    --ig-chip-hover-background: color-mix(in srgb, var(--preview-accent) 75%, transparent);
+    --ig-chip-text-color: var(--preview-accent);
+}
+
+.preview-primary,
+.preview-secondary {
+    --ig-size: var(--ig-size-medium);
+    text-transform: capitalize;
+}
+
+.preview-primary {
+    --background: var(--preview-accent);
+    --foreground: var(--preview-bg);
+    --hover-background: hsl(from var(--preview-accent) h s 40%);
+}
+
+.preview-secondary {
+    --foreground: var(--preview-accent);
+    --hover-foreground: hsl(from var(--preview-accent) h s 40%);
+    --border-color: var(--preview-accent);
+    --hover-border-color: hsl(from var(--preview-accent) h s 40%);
+    min-width: unset;
+}
+
+.preview-title,
+.preview-text {
+    color: var(--preview-text);
+}
+
+.preview-title {
+    font-size: 1rem;
+    line-height: 1.5rem;
+    font-weight: 600;
+    margin: 1rem 0 0.25rem;
+    letter-spacing: 0.009rem;
+}
+
+.preview-text {
+    font-size: 0.875rem;
+    line-height: 1.25rem;
+    font-weight: 500;
+}
+
+.preview-actions {
+    display: flex;
+    gap: 0.75rem;
+    margin-top: 1.25rem;
+}
diff --git a/src/app/data-entries/color-picker/tailwind-styling/color-picker-tailwind-styling.component.ts b/src/app/data-entries/color-picker/tailwind-styling/color-picker-tailwind-styling.component.ts
new file mode 100644
index 000000000..5223f3be7
--- /dev/null
+++ b/src/app/data-entries/color-picker/tailwind-styling/color-picker-tailwind-styling.component.ts
@@ -0,0 +1,60 @@
+import { Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { defineComponents, IgcColorPickerComponent } from 'igniteui-webcomponents';
+import { IgxCardComponent, IgxCardContentDirective } from 'igniteui-angular/card';
+import { IgxButtonDirective, IgxIconButtonDirective, IgxRippleDirective } from 'igniteui-angular/directives';
+import { IgxIconComponent } from 'igniteui-angular/icon';
+import { IgxChipComponent } from 'igniteui-angular/chips';
+
+defineComponents(IgcColorPickerComponent);
+
+const defaults = {
+    background: '#1a314a',
+    text: '#e5ebf3',
+    accent: '#f9592a',
+    border: '#00142b'
+};
+
+@Component({
+    selector: 'app-color-picker-tailwind-styling',
+    styleUrls: ['./color-picker-tailwind-styling.component.scss'],
+    templateUrl: './color-picker-tailwind-styling.component.html',
+    imports: [
+        IgxCardComponent,
+        IgxCardContentDirective,
+        IgxButtonDirective,
+        IgxIconButtonDirective,
+        IgxRippleDirective,
+        IgxIconComponent,
+        IgxChipComponent
+    ],
+    schemas: [CUSTOM_ELEMENTS_SCHEMA]
+})
+export class ColorPickerTailwindStylingComponent {
+    public background = defaults.background;
+    public text = defaults.text;
+    public accent = defaults.accent;
+    public border = defaults.border;
+
+    public onBackgroundInput(event: Event): void {
+        this.background = (event as CustomEvent<string>).detail;
+    }
+
+    public onTextInput(event: Event): void {
+        this.text = (event as CustomEvent<string>).detail;
+    }
+
+    public onAccentInput(event: Event): void {
+        this.accent = (event as CustomEvent<string>).detail;
+    }
+
+    public onBorderInput(event: Event): void {
+        this.border = (event as CustomEvent<string>).detail;
+    }
+
+    public reset(): void {
+        this.background = defaults.background;
+        this.text = defaults.text;
+        this.accent = defaults.accent;
+        this.border = defaults.border;
+    }
+}
diff --git a/src/app/data-entries/color-picker/value/color-picker-value.component.html b/src/app/data-entries/color-picker/value/color-picker-value.component.html
new file mode 100644
index 000000000..6c4d826ed
--- /dev/null
+++ b/src/app/data-entries/color-picker/value/color-picker-value.component.html
@@ -0,0 +1,3 @@
+<div class="sample-container">
+    <igc-color-picker #colorPicker value="#1976d2" label="Pick a color"></igc-color-picker>
+</div>
diff --git a/src/app/data-entries/color-picker/value/color-picker-value.component.scss b/src/app/data-entries/color-picker/value/color-picker-value.component.scss
new file mode 100644
index 000000000..3b5129b70
--- /dev/null
+++ b/src/app/data-entries/color-picker/value/color-picker-value.component.scss
@@ -0,0 +1,17 @@
+.sample-container {
+    --ig-size: 2;
+
+    display: flex;
+    justify-content: center;
+    padding-block-start: 0.5rem;
+}
+
+igc-color-picker::part(picker) {
+    --picker-elevation: var(--ig-elevation-4);
+
+    margin-top: 0.5rem;
+}
+
+:root {
+    overflow: auto;
+}
diff --git a/src/app/data-entries/color-picker/value/color-picker-value.component.ts b/src/app/data-entries/color-picker/value/color-picker-value.component.ts
new file mode 100644
index 000000000..310a70149
--- /dev/null
+++ b/src/app/data-entries/color-picker/value/color-picker-value.component.ts
@@ -0,0 +1,21 @@
+import { Component, CUSTOM_ELEMENTS_SCHEMA, ViewChild, ElementRef, AfterViewInit } from '@angular/core';
+import { defineComponents, IgcColorPickerComponent } from 'igniteui-webcomponents';
+
+defineComponents(IgcColorPickerComponent);
+
+@Component({
+    selector: 'app-color-picker-value',
+    styleUrls: ['./color-picker-value.component.scss'],
+    templateUrl: './color-picker-value.component.html',
+    imports: [],
+    schemas: [CUSTOM_ELEMENTS_SCHEMA]
+})
+
+export class ColorPickerValueComponent implements AfterViewInit {
+    @ViewChild('colorPicker', { static: true })
+    colorPicker!: ElementRef<IgcColorPickerComponent>;
+
+    ngAfterViewInit() {
+        this.colorPicker.nativeElement.toggle();
+    }
+}
diff --git a/src/app/data-entries/data-entries-routes-data.ts b/src/app/data-entries/data-entries-routes-data.ts
index c12dffbf4..eb06f3490 100644
--- a/src/app/data-entries/data-entries-routes-data.ts
+++ b/src/app/data-entries/data-entries-routes-data.ts
@@ -29,6 +29,18 @@ export const dataEntriesRoutesData = {
     "checkbox-sample-3": { displayName: "Indeterminate Checkbox", parentName: "Checkbox" },
     "checkbox-styling": { displayName: "Checkbox Styling", parentName: "Checkbox" },
     "checkbox-tailwind-styling": { displayName: "Checkbox Tailwind Styling", parentName: "Checkbox" },
+    "color-picker-overview": { displayName: "Overview", parentName: "Color Picker" },
+    "color-picker-value": { displayName: "Value", parentName: "Color Picker" },
+    "color-picker-input": { displayName: "Input Mode", parentName: "Color Picker" },
+    "color-picker-format": { displayName: "Format", parentName: "Color Picker" },
+    "color-picker-alpha": { displayName: "Alpha", parentName: "Color Picker" },
+    "color-picker-swatches": { displayName: "Swatches", parentName: "Color Picker" },
+    "color-picker-states": { displayName: "States", parentName: "Color Picker" },
+    "color-picker-sizes": { displayName: "Sizes", parentName: "Color Picker" },
+    "color-picker-input-sizes": { displayName: "Input Sizes", parentName: "Color Picker" },
+    "color-picker-styling": { displayName: "Color Picker Styling", parentName: "Color Picker" },
+    "color-picker-tailwind-styling": { displayName: "Color Picker Tailwind Styling", parentName: "Color Picker" },
+    "color-picker-reactive-form": { displayName: "Color Picker in Reactive Form", parentName: "Color Picker" },
     "dropdown-remote": { displayName: "Virtual Dropdown - Remote Data", parentName: "Dropdown" },
     "dropdown-virtual": { displayName: "Virtual Dropdown", parentName: "Dropdown" },
     "dropdown-menu": { displayName: "Dropdown as Menu", parentName: "Dropdown" },
diff --git a/src/app/data-entries/data-entries.routes.ts b/src/app/data-entries/data-entries.routes.ts
index 8132650c3..5a7a06e8b 100644
--- a/src/app/data-entries/data-entries.routes.ts
+++ b/src/app/data-entries/data-entries.routes.ts
@@ -28,6 +28,18 @@ import { CheckboxSample2Component } from './checkbox/checkbox-sample-2/checkbox-
 import { CheckboxSample3Component } from './checkbox/checkbox-sample-3/checkbox-sample-3.component';
 import { CheckboxStylingComponent } from './checkbox/checkbox-styling/checkbox-styling.component';
 import { CheckboxTailwindStylingComponent } from './checkbox/checkbox-tailwind-styling/checkbox-tailwind-styling.component';
+import { ColorPickerOverviewComponent } from './color-picker/overview/color-picker-overview.component';
+import { ColorPickerValueComponent } from './color-picker/value/color-picker-value.component';
+import { ColorPickerInputComponent } from './color-picker/input/color-picker-input.component';
+import { ColorPickerFormatComponent } from './color-picker/format/color-picker-format.component';
+import { ColorPickerAlphaComponent } from './color-picker/alpha/color-picker-alpha.component';
+import { ColorPickerSwatchesComponent } from './color-picker/swatches/color-picker-swatches.component';
+import { ColorPickerStatesComponent } from './color-picker/states/color-picker-states.component';
+import { ColorPickerSizesComponent } from './color-picker/sizes/color-picker-sizes.component';
+import { ColorPickerInputSizesComponent } from './color-picker/input-sizes/color-picker-input-sizes.component';
+import { ColorPickerStylingComponent } from './color-picker/styling/color-picker-styling.component';
+import { ColorPickerTailwindStylingComponent } from './color-picker/tailwind-styling/color-picker-tailwind-styling.component';
+import { ColorPickerReactiveFormComponent } from './color-picker/reactive-form/color-picker-reactive-form.component';
 import { dataEntriesRoutesData } from './data-entries-routes-data';
 import { DropDownRemoteComponent } from './dropdown/drop-down-remote-virtual/drop-down-remote.component';
 import { DropDownVirtualComponent } from './dropdown/drop-down-virtual/drop-down-virtual.component';
@@ -233,6 +245,66 @@ export const DataEntriesRoutes: Routes = [
         data: dataEntriesRoutesData['checkbox-tailwind-styling'],
         path: 'checkbox-tailwind-styling'
     },
+    {
+        component: ColorPickerOverviewComponent,
+        data: dataEntriesRoutesData['color-picker-overview'],
+        path: 'color-picker-overview'
+    },
+    {
+        component: ColorPickerValueComponent,
+        data: dataEntriesRoutesData['color-picker-value'],
+        path: 'color-picker-value'
+    },
+    {
+        component: ColorPickerInputComponent,
+        data: dataEntriesRoutesData['color-picker-input'],
+        path: 'color-picker-input'
+    },
+    {
+        component: ColorPickerFormatComponent,
+        data: dataEntriesRoutesData['color-picker-format'],
+        path: 'color-picker-format'
+    },
+    {
+        component: ColorPickerAlphaComponent,
+        data: dataEntriesRoutesData['color-picker-alpha'],
+        path: 'color-picker-alpha'
+    },
+    {
+        component: ColorPickerSwatchesComponent,
+        data: dataEntriesRoutesData['color-picker-swatches'],
+        path: 'color-picker-swatches'
+    },
+    {
+        component: ColorPickerStatesComponent,
+        data: dataEntriesRoutesData['color-picker-states'],
+        path: 'color-picker-states'
+    },
+    {
+        component: ColorPickerSizesComponent,
+        data: dataEntriesRoutesData['color-picker-sizes'],
+        path: 'color-picker-sizes'
+    },
+    {
+        component: ColorPickerInputSizesComponent,
+        data: dataEntriesRoutesData['color-picker-input-sizes'],
+        path: 'color-picker-input-sizes'
+    },
+    {
+        component: ColorPickerStylingComponent,
+        data: dataEntriesRoutesData['color-picker-styling'],
+        path: 'color-picker-styling'
+    },
+    {
+        component: ColorPickerTailwindStylingComponent,
+        data: dataEntriesRoutesData['color-picker-tailwind-styling'],
+        path: 'color-picker-tailwind-styling'
+    },
+    {
+        component: ColorPickerReactiveFormComponent,
+        data: dataEntriesRoutesData['color-picker-reactive-form'],
+        path: 'color-picker-reactive-form'
+    },
     {
         component: DropdownMenuComponent,
         data: dataEntriesRoutesData['dropdown-menu'],