diff --git a/packages/components/package-lock.json b/packages/components/package-lock.json
index 0c41b9a91b..bbf591d762 100644
--- a/packages/components/package-lock.json
+++ b/packages/components/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "@labkey/components",
-  "version": "7.1.1",
+  "version": "7.2.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "@labkey/components",
-      "version": "7.1.1",
+      "version": "7.2.0",
       "license": "SEE LICENSE IN LICENSE.txt",
       "dependencies": {
         "@hello-pangea/dnd": "18.0.1",
diff --git a/packages/components/package.json b/packages/components/package.json
index 65e8c8bc11..be5e9a96e2 100644
--- a/packages/components/package.json
+++ b/packages/components/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@labkey/components",
-  "version": "7.1.1",
+  "version": "7.2.0",
   "description": "Components, models, actions, and utility functions for LabKey applications and pages",
   "sideEffects": false,
   "files": [
diff --git a/packages/components/releaseNotes/components.md b/packages/components/releaseNotes/components.md
index e31814bf10..97861c8f53 100644
--- a/packages/components/releaseNotes/components.md
+++ b/packages/components/releaseNotes/components.md
@@ -1,6 +1,15 @@
 # @labkey/components
 Components, models, actions, and utility functions for LabKey applications and pages
 
+###  version 7.2.0
+*Released*: 9 December 2025
+- Chart builder updates for series color scale options
+  - ChartColorInputs for single color geomOptions and series specific color and shape value map
+  - ChartConfig measuresOptions to store per series mapping object
+  - Hide and show color options based on selected chart type and measures
+  - ColorPickerInput update to use fixed position by default and new DEFAULT_COLORS constant
+  - Add LetterIcon for use with "Auto" set series values
+
 ###  version 7.1.1
 *Released*: 8 December 2025
 - Sample Amount/Units polish: part 2
diff --git a/packages/components/src/internal/components/chart/ChartBuilderModal.test.tsx b/packages/components/src/internal/components/chart/ChartBuilderModal.test.tsx
index 20e85ed3e6..082fa3c65c 100644
--- a/packages/components/src/internal/components/chart/ChartBuilderModal.test.tsx
+++ b/packages/components/src/internal/components/chart/ChartBuilderModal.test.tsx
@@ -117,16 +117,9 @@ describe('ChartBuilderModal', () => {
         expect(document.querySelectorAll('.chart-settings')).toHaveLength(1);
         expect(document.querySelectorAll('.chart-builder-modal__chart-preview')).toHaveLength(1);
         expect(document.querySelector('.modal-title').textContent).toBe(isNew ? 'Create Chart' : 'Edit Chart');
-        expect(document.querySelectorAll('.btn')).toHaveLength(canDelete ? 3 : 2);
+        expect(document.querySelectorAll('.btn:not(.color-picker__button)')).toHaveLength(canDelete ? 3 : 2);
         expect(document.querySelectorAll('.alert')).toHaveLength(0);
-
-        // TODO update this part of jest test
-        // hidden chart types are filtered out
-        // const chartTypeItems = document.querySelectorAll('.chart-builder-type');
-        // expect(chartTypeItems).toHaveLength(3);
-        // expect(chartTypeItems[0].textContent).toBe('Bar');
-        // expect(chartTypeItems[1].textContent).toBe('Scatter');
-        // expect(chartTypeItems[2].textContent).toBe('Line');
+        expect(document.querySelectorAll('.chart-settings__chart-type')).toHaveLength(isNew ? 1 : 0);
 
         expect(document.querySelectorAll('input[name="name"]')).toHaveLength(1);
         expect(document.querySelectorAll('input[name="shared"]')).toHaveLength(canShare ? 1 : 0);
@@ -291,7 +284,7 @@ describe('ChartBuilderModal', () => {
 
         // click delete button and verify confirm text / buttons
         await userEvent.click(document.querySelector('.btn-danger'));
-        const btnItems = document.querySelectorAll('.btn');
+        const btnItems = document.querySelectorAll('.btn:not(.color-picker__button)');
         expect(btnItems).toHaveLength(2);
         expect(btnItems[0].textContent).toBe('Cancel');
         expect(btnItems[1].textContent).toBe('Delete');
diff --git a/packages/components/src/internal/components/chart/ChartBuilderModal.tsx b/packages/components/src/internal/components/chart/ChartBuilderModal.tsx
index 9a2cb2a6ef..f7d77e3711 100644
--- a/packages/components/src/internal/components/chart/ChartBuilderModal.tsx
+++ b/packages/components/src/internal/components/chart/ChartBuilderModal.tsx
@@ -14,7 +14,6 @@ import { RequiresModelAndActions } from '../../../public/QueryModel/withQueryMod
 import { useServerContext } from '../base/ServerContext';
 import { hasPermissions } from '../base/models/User';
 
-import { Alert } from '../base/Alert';
 import { FormButtons } from '../../FormButtons';
 
 import { getContainerFilterForFolder } from '../../query/api';
@@ -354,13 +353,13 @@ export const ChartBuilderModal: FC<ChartBuilderModalProps> = memo(({ actions, mo
             onCancel={onCancel}
             title={savedChartModel ? 'Edit Chart' : 'Create Chart'}
         >
-            {error && <Alert>{error}</Alert>}
             <ChartSettingsPanel
                 allowInherit={allowInherit}
                 canShare={canShare}
                 chartConfig={chartConfig}
                 chartModel={chartModel}
                 chartType={selectedType}
+                error={error}
                 isNew={savedChartModel !== undefined}
                 model={model}
                 setChartConfig={setChartConfig}
diff --git a/packages/components/src/internal/components/chart/ChartColorInputs.test.tsx b/packages/components/src/internal/components/chart/ChartColorInputs.test.tsx
new file mode 100644
index 0000000000..6da5532218
--- /dev/null
+++ b/packages/components/src/internal/components/chart/ChartColorInputs.test.tsx
@@ -0,0 +1,258 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import { ChartConfig } from './models';
+import { LABKEY_VIS } from '../../constants';
+
+import { ChartColorInputs, SeriesOptionRenderer, ShapeOptionRenderer, showColorOption } from './ChartColorInputs';
+import { makeTestQueryModel } from '../../../public/QueryModel/testUtils';
+import { SchemaQuery } from '../../../public/SchemaQuery';
+
+LABKEY_VIS = {
+    Scale: {
+        ShapeMap: { circle: jest.fn },
+    },
+};
+
+describe('showColorOption', () => {
+    test('boxFillColor', () => {
+        expect(showColorOption({ renderType: 'bar_chart' } as ChartConfig, 'boxFillColor')).toBe(true);
+        expect(showColorOption({ renderType: 'box_plot' } as ChartConfig, 'boxFillColor')).toBe(true);
+        expect(showColorOption({ renderType: 'line_plot' } as ChartConfig, 'boxFillColor')).toBe(false);
+        expect(showColorOption({ renderType: 'scatter_plot' } as ChartConfig, 'boxFillColor')).toBe(false);
+        expect(showColorOption({ renderType: 'pie_chart' } as ChartConfig, 'boxFillColor')).toBe(false);
+
+        expect(
+            showColorOption(
+                { renderType: 'bar_chart', measures: { xSub: { name: 'test' } } } as ChartConfig,
+                'boxFillColor'
+            )
+        ).toBe(false);
+    });
+
+    test('colorPaletteScale', () => {
+        expect(showColorOption({ renderType: 'bar_chart' } as ChartConfig, 'colorPaletteScale')).toBe(false);
+        expect(showColorOption({ renderType: 'box_plot' } as ChartConfig, 'colorPaletteScale')).toBe(false);
+        expect(showColorOption({ renderType: 'line_plot' } as ChartConfig, 'colorPaletteScale')).toBe(false);
+        expect(showColorOption({ renderType: 'scatter_plot' } as ChartConfig, 'colorPaletteScale')).toBe(false);
+        expect(showColorOption({ renderType: 'pie_chart' } as ChartConfig, 'colorPaletteScale')).toBe(true);
+
+        expect(
+            showColorOption(
+                { renderType: 'line_plot', measures: { series: { name: 'test' } } } as ChartConfig,
+                'colorPaletteScale'
+            )
+        ).toBe(true);
+        expect(
+            showColorOption(
+                { renderType: 'bar_chart', measures: { xSub: { name: 'test' } } } as ChartConfig,
+                'colorPaletteScale'
+            )
+        ).toBe(true);
+        expect(
+            showColorOption(
+                { renderType: 'box_plot', measures: { color: { name: 'test' } } } as ChartConfig,
+                'colorPaletteScale'
+            )
+        ).toBe(true);
+        expect(
+            showColorOption(
+                { renderType: 'scatter_plot', measures: { color: { name: 'test' } } } as ChartConfig,
+                'colorPaletteScale'
+            )
+        ).toBe(true);
+    });
+
+    test('lineColor', () => {
+        expect(showColorOption({ renderType: 'bar_chart' } as ChartConfig, 'lineColor')).toBe(true);
+        expect(showColorOption({ renderType: 'box_plot' } as ChartConfig, 'lineColor')).toBe(true);
+        expect(showColorOption({ renderType: 'line_plot' } as ChartConfig, 'lineColor')).toBe(false);
+        expect(showColorOption({ renderType: 'scatter_plot' } as ChartConfig, 'lineColor')).toBe(false);
+        expect(showColorOption({ renderType: 'pie_chart' } as ChartConfig, 'lineColor')).toBe(false);
+
+        expect(
+            showColorOption(
+                { renderType: 'bar_chart', measures: { xSub: { name: 'test' } } } as ChartConfig,
+                'lineColor'
+            )
+        ).toBe(false);
+    });
+
+    test('pointFillColor', () => {
+        expect(showColorOption({ renderType: 'bar_chart' } as ChartConfig, 'pointFillColor')).toBe(false);
+        expect(showColorOption({ renderType: 'box_plot' } as ChartConfig, 'pointFillColor')).toBe(true);
+        expect(showColorOption({ renderType: 'line_plot' } as ChartConfig, 'pointFillColor')).toBe(true);
+        expect(showColorOption({ renderType: 'scatter_plot' } as ChartConfig, 'pointFillColor')).toBe(true);
+        expect(showColorOption({ renderType: 'pie_chart' } as ChartConfig, 'pointFillColor')).toBe(false);
+
+        expect(
+            showColorOption(
+                { renderType: 'line_plot', measures: { series: { name: 'test' } } } as ChartConfig,
+                'pointFillColor'
+            )
+        ).toBe(false);
+        expect(
+            showColorOption(
+                { renderType: 'box_plot', measures: { color: { name: 'test' } } } as ChartConfig,
+                'pointFillColor'
+            )
+        ).toBe(false);
+        expect(
+            showColorOption(
+                { renderType: 'scatter_plot', measures: { color: { name: 'test' } } } as ChartConfig,
+                'pointFillColor'
+            )
+        ).toBe(false);
+    });
+});
+
+describe('ShapeOptionRenderer', () => {
+    test('isValueRenderer false', () => {
+        render(<ShapeOptionRenderer isValueRenderer={false} name="circle" />);
+        expect(document.querySelectorAll('.chart-builder-type-option')).toHaveLength(1);
+        expect(document.querySelectorAll('.chart-builder-type-option--value')).toHaveLength(0);
+    });
+
+    test('isValueRenderer true', () => {
+        render(<ShapeOptionRenderer isValueRenderer name="circle" />);
+        expect(document.querySelectorAll('.chart-builder-type-option')).toHaveLength(1);
+        expect(document.querySelectorAll('.chart-builder-type-option--value')).toHaveLength(1);
+    });
+});
+
+describe('SeriesOptionRenderer', () => {
+    test('isValueRenderer false', () => {
+        render(<SeriesOptionRenderer isValueRenderer={false} name="series1" seriesOptionMap={{}} />);
+        expect(document.querySelectorAll('.chart-builder-type-option')).toHaveLength(1);
+        expect(document.querySelectorAll('.chart-builder-type-option--value')).toHaveLength(0);
+    });
+
+    test('isValueRenderer true', () => {
+        render(<SeriesOptionRenderer isValueRenderer name="series1" seriesOptionMap={{}} />);
+        expect(document.querySelectorAll('.chart-builder-type-option')).toHaveLength(1);
+        expect(document.querySelectorAll('.chart-builder-type-option--value')).toHaveLength(1);
+    });
+
+    test('without seriesOptionMap value', () => {
+        render(<SeriesOptionRenderer isValueRenderer name="series1" seriesOptionMap={{}} />);
+        expect(document.querySelector('.chart-builder-type-option').textContent).toBe('A series1');
+        expect(document.querySelectorAll('.color-icon__chip-small')).toHaveLength(0);
+        expect(document.querySelectorAll('i')).toHaveLength(0);
+        expect(document.querySelectorAll('.letter-icon')).toHaveLength(1);
+    });
+
+    test('with seriesOptionMap value', () => {
+        render(<SeriesOptionRenderer isValueRenderer name="series1" seriesOptionMap={{ series1: { color: 'red' } }} />);
+        expect(document.querySelector('.chart-builder-type-option').textContent).toBe(' series1');
+        expect(document.querySelectorAll('.color-icon__chip-small')).toHaveLength(1);
+        expect(document.querySelectorAll('i')).toHaveLength(1);
+        expect(document.querySelector('i').getAttribute('style')).toBe('background-color: red;');
+        expect(document.querySelectorAll('.letter-icon')).toHaveLength(0);
+    });
+});
+
+describe('ChartColorInputs', () => {
+    const model = makeTestQueryModel(new SchemaQuery('schema', 'query'), undefined, [], 0);
+
+    test('default bar chart', () => {
+        render(
+            <ChartColorInputs
+                chartConfig={{ renderType: 'bar_chart', geomOptions: {} } as ChartConfig}
+                model={model}
+                setChartConfig={jest.fn()}
+            />
+        );
+        expect(document.querySelectorAll('.row')).toHaveLength(1);
+        expect(document.querySelectorAll('.color-picker')).toHaveLength(2);
+        expect(document.querySelectorAll('.select-input')).toHaveLength(0);
+    });
+
+    test('default pie chart', () => {
+        render(
+            <ChartColorInputs
+                chartConfig={{ renderType: 'pie_chart', geomOptions: {} } as ChartConfig}
+                model={model}
+                setChartConfig={jest.fn()}
+            />
+        );
+        expect(document.querySelectorAll('.row')).toHaveLength(2);
+        expect(document.querySelectorAll('.color-picker')).toHaveLength(0);
+        expect(document.querySelectorAll('.select-input')).toHaveLength(1);
+    });
+
+    test('default box plot', () => {
+        render(
+            <ChartColorInputs
+                chartConfig={{ renderType: 'box_plot', geomOptions: {} } as ChartConfig}
+                model={model}
+                setChartConfig={jest.fn()}
+            />
+        );
+        expect(document.querySelectorAll('.row')).toHaveLength(1);
+        expect(document.querySelectorAll('.color-picker')).toHaveLength(3);
+        expect(document.querySelectorAll('.select-input')).toHaveLength(0);
+    });
+
+    test('default scatter plot', () => {
+        render(
+            <ChartColorInputs
+                chartConfig={{ renderType: 'scatter_plot', geomOptions: {} } as ChartConfig}
+                model={model}
+                setChartConfig={jest.fn()}
+            />
+        );
+        expect(document.querySelectorAll('.row')).toHaveLength(1);
+        expect(document.querySelectorAll('.color-picker')).toHaveLength(1);
+        expect(document.querySelectorAll('.select-input')).toHaveLength(0);
+    });
+
+    test('scatter plot with color', () => {
+        render(
+            <ChartColorInputs
+                chartConfig={
+                    {
+                        renderType: 'scatter_plot',
+                        geomOptions: {},
+                        measures: { color: { name: 'test' } },
+                    } as ChartConfig
+                }
+                model={model}
+                setChartConfig={jest.fn()}
+            />
+        );
+        expect(document.querySelectorAll('.row')).toHaveLength(2);
+        expect(document.querySelectorAll('.color-picker')).toHaveLength(0);
+        expect(document.querySelectorAll('.select-input')).toHaveLength(1);
+    });
+
+    test('default line plot', () => {
+        render(
+            <ChartColorInputs
+                chartConfig={{ renderType: 'line_plot', geomOptions: {} } as ChartConfig}
+                model={model}
+                setChartConfig={jest.fn()}
+            />
+        );
+        expect(document.querySelectorAll('.row')).toHaveLength(1);
+        expect(document.querySelectorAll('.color-picker')).toHaveLength(1);
+        expect(document.querySelectorAll('.select-input')).toHaveLength(0);
+    });
+
+    test('line plot with series', () => {
+        render(
+            <ChartColorInputs
+                chartConfig={
+                    {
+                        renderType: 'line_plot',
+                        geomOptions: {},
+                        measures: { series: { name: 'test' } },
+                    } as ChartConfig
+                }
+                model={model}
+                setChartConfig={jest.fn()}
+            />
+        );
+        expect(document.querySelectorAll('.row')).toHaveLength(2);
+        expect(document.querySelectorAll('.color-picker')).toHaveLength(0);
+        expect(document.querySelectorAll('.select-input')).toHaveLength(1);
+    });
+});
diff --git a/packages/components/src/internal/components/chart/ChartColorInputs.tsx b/packages/components/src/internal/components/chart/ChartColorInputs.tsx
new file mode 100644
index 0000000000..6ad57a187a
--- /dev/null
+++ b/packages/components/src/internal/components/chart/ChartColorInputs.tsx
@@ -0,0 +1,425 @@
+import React, { FC, memo, useCallback, useEffect, useMemo, useState } from 'react';
+import classNames from 'classnames';
+import { Utils } from '@labkey/api';
+import { ChartConfig, ChartConfigSetter, MeasureOption } from './models';
+import { ColorPickerInput } from '../forms/input/ColorPickerInput';
+import { COLOR_OPTIONS_PER_TYPE, COLOR_PALETTE_OPTIONS, SHAPE_OPTIONS } from './constants';
+import { SelectInput } from '../forms/input/SelectInput';
+import { selectDistinctRows } from '../../query/api';
+import { QueryModel } from '../../../public/QueryModel/QueryModel';
+import { ColorIcon } from '../base/ColorIcon';
+import { LABKEY_VIS } from '../../constants';
+import { RemoveEntityButton } from '../buttons/RemoveEntityButton';
+
+enum COLOR_OPTIONS {
+    BOX_FILL_COLOR = 'boxFillColor',
+    COLOR_PALETTE_SCALE = 'colorPaletteScale',
+    LINE_COLOR = 'lineColor',
+    POINT_FILL_COLOR = 'pointFillColor',
+}
+
+// export for jest testing
+export const showColorOption = function (chartConfig: ChartConfig, optionName: COLOR_OPTIONS): boolean {
+    const chartType = chartConfig.renderType;
+    const isBarChart = chartType === 'bar_chart';
+    const isBoxPlot = chartType === 'box_plot';
+    const isLinePlot = chartType === 'line_plot';
+    const isScatterPlot = chartType === 'scatter_plot';
+    const hasSeries = chartConfig.measures?.series !== undefined;
+    const hasXSub = chartConfig.measures?.xSub !== undefined;
+    const hasColor = chartConfig.measures?.color !== undefined;
+
+    switch (optionName) {
+        case COLOR_OPTIONS.BOX_FILL_COLOR:
+            return COLOR_OPTIONS_PER_TYPE.boxFillColor.indexOf(chartType) > -1 && (!isBarChart || !hasXSub); // bar chart if config has groupBy measure
+        case COLOR_OPTIONS.COLOR_PALETTE_SCALE:
+            return (
+                COLOR_OPTIONS_PER_TYPE.colorPaletteScale.indexOf(chartType) > -1 &&
+                (!isLinePlot || hasSeries) && // line plot if config has series measure
+                (!isBarChart || hasXSub) && // bar chart if config has groupBy measure
+                (!isBoxPlot || hasColor) && // box plot if config has color measure
+                (!isScatterPlot || hasColor) // scatter plot if config has color measure
+            );
+        case COLOR_OPTIONS.LINE_COLOR:
+            return COLOR_OPTIONS_PER_TYPE.lineColor.indexOf(chartType) > -1 && (!isBarChart || !hasXSub); // bar chart if config has groupBy measure
+        case COLOR_OPTIONS.POINT_FILL_COLOR:
+            return (
+                COLOR_OPTIONS_PER_TYPE.pointFillColor.indexOf(chartType) > -1 &&
+                (!isLinePlot || !hasSeries) && // line plot if config has series measure
+                (!isBoxPlot || !hasColor) && // box plot if config has color measure
+                (!isScatterPlot || !hasColor) // scatter plot if config has color measure
+            );
+        default:
+            return false;
+    }
+};
+
+interface ShapeOptionRendererProps {
+    isValueRenderer: boolean;
+    name: string;
+}
+
+// export for jest testing
+export const ShapeOptionRenderer: FC<ShapeOptionRendererProps> = memo(({ name, isValueRenderer }) => {
+    const size = 10;
+    const iconSize = name === 'diamond' ? size / 2.5 : size / 2;
+    const icon = LABKEY_VIS.Scale.ShapeMap[name](iconSize);
+    const className = classNames('chart-builder-type-option', { 'chart-builder-type-option--value': isValueRenderer });
+    return (
+        <span className={className} data-series-shape={name}>
+            <svg height={size} width={size}>
+                <path d={icon} transform={'translate(' + size / 2 + ',' + size / 2 + ')'} />
+            </svg>
+        </span>
+    );
+});
+ShapeOptionRenderer.displayName = 'ShapeOptionRenderer';
+
+function shapeOptionRenderer(option) {
+    return <ShapeOptionRenderer isValueRenderer={false} name={option.data.value} />;
+}
+
+function shapeValueRenderer(option) {
+    return <ShapeOptionRenderer isValueRenderer name={option.data.value} />;
+}
+
+interface SeriesOptionRendererProps {
+    isValueRenderer: boolean;
+    name: string;
+    seriesOptionMap: Record<string, Record<string, string>>;
+}
+
+// export for jest testing
+export const SeriesOptionRenderer: FC<SeriesOptionRendererProps> = memo(
+    ({ name, seriesOptionMap, isValueRenderer }) => {
+        const value = seriesOptionMap?.[name]?.color;
+        const className = classNames('chart-builder-type-option', {
+            'chart-builder-type-option--value': isValueRenderer,
+        });
+        return (
+            <span className={className} data-series-shape={name}>
+                {value && (
+                    <>
+                        <ColorIcon asSquare cls="color-icon__chip-small" value={value} /> {name}
+                    </>
+                )}
+                {!value && (
+                    <>
+                        <LetterIcon letter="A" /> {name}
+                    </>
+                )}
+            </span>
+        );
+    }
+);
+SeriesOptionRenderer.displayName = 'SeriesOptionRenderer';
+
+function seriesOptionRenderer(option, seriesOptionMap) {
+    return (
+        <SeriesOptionRenderer
+            isValueRenderer={option.type !== 'option'}
+            name={option.data.value}
+            seriesOptionMap={seriesOptionMap}
+        />
+    );
+}
+
+interface ChartColorInputsProps {
+    chartConfig: ChartConfig;
+    model: QueryModel;
+    setChartConfig: ChartConfigSetter;
+}
+
+export const ChartColorInputs: FC<ChartColorInputsProps> = memo(({ chartConfig, model, setChartConfig }) => {
+    const isBoxPlot = chartConfig.renderType === 'box_plot';
+    const isLinePlot = chartConfig.renderType === 'line_plot';
+
+    const boxFillColor =
+        chartConfig.geomOptions.boxFillColor === 'none' ? undefined : (chartConfig.geomOptions.boxFillColor as string);
+    const showBoxFillColor = useMemo(() => showColorOption(chartConfig, COLOR_OPTIONS.BOX_FILL_COLOR), [chartConfig]);
+    const lineColor = chartConfig.geomOptions.lineColor as string;
+    const showLineColor = useMemo(() => showColorOption(chartConfig, COLOR_OPTIONS.LINE_COLOR), [chartConfig]);
+    const pointFillColor = chartConfig.geomOptions.pointFillColor as string;
+    const showPointFillColor = useMemo(
+        () => showColorOption(chartConfig, COLOR_OPTIONS.POINT_FILL_COLOR),
+        [chartConfig]
+    );
+    const colorPaletteScale = chartConfig.geomOptions.colorPaletteScale;
+    const showColorPaletteScale = useMemo(
+        () => showColorOption(chartConfig, COLOR_OPTIONS.COLOR_PALETTE_SCALE),
+        [chartConfig]
+    );
+    const showSeriesLineStyle = isLinePlot && chartConfig.measures?.series !== undefined;
+    const showAnyColorOptions = showBoxFillColor || showLineColor || showPointFillColor;
+
+    const setGeomOptions = useCallback(
+        options => {
+            setChartConfig(current => ({
+                ...current,
+                geomOptions: { ...current.geomOptions, ...options },
+            }));
+        },
+        [setChartConfig]
+    );
+
+    const onColorPaletteChange = useCallback(
+        (_: never, value: string) => {
+            setGeomOptions({ colorPaletteScale: value });
+        },
+        [setGeomOptions]
+    );
+
+    const onColorChange = useCallback(
+        (name: string, value: string) => {
+            // value comes in as #FFFFFF from ColorPickerInput, but we want it without the #
+            if (value?.startsWith('#')) {
+                value = value.substring(1);
+            }
+            setGeomOptions({ [name]: value });
+        },
+        [setGeomOptions]
+    );
+    const onBoxFillColorChange = useCallback(
+        (_: never, value: string) => {
+            onColorChange(COLOR_OPTIONS.BOX_FILL_COLOR, value ?? 'none');
+        },
+        [onColorChange]
+    );
+    const onLineColorChange = useCallback(
+        (_: never, value: string) => {
+            onColorChange(COLOR_OPTIONS.LINE_COLOR, value);
+        },
+        [onColorChange]
+    );
+    const onPointFillColorChange = useCallback(
+        (_: never, value: string) => {
+            onColorChange(COLOR_OPTIONS.POINT_FILL_COLOR, value);
+        },
+        [onColorChange]
+    );
+
+    return (
+        <>
+            {showAnyColorOptions && (
+                <div className="form-group row">
+                    {showBoxFillColor && (
+                        <div className="col-xs-4">
+                            <label>Fill Color</label>
+                            <ColorPickerInput
+                                allowRemove={isBoxPlot}
+                                name={COLOR_OPTIONS.BOX_FILL_COLOR}
+                                onChange={onBoxFillColorChange}
+                                value={boxFillColor}
+                            />
+                        </div>
+                    )}
+                    {showLineColor && (
+                        <div className="col-xs-4">
+                            <label>Line Color</label>
+                            <ColorPickerInput name="lineColor" onChange={onLineColorChange} value={lineColor} />
+                        </div>
+                    )}
+                    {showPointFillColor && (
+                        <div className="col-xs-4">
+                            <label>{isLinePlot ? '' : 'Point '}Color</label>
+                            <ColorPickerInput
+                                name={COLOR_OPTIONS.POINT_FILL_COLOR}
+                                onChange={onPointFillColorChange}
+                                value={pointFillColor}
+                            />
+                        </div>
+                    )}
+                </div>
+            )}
+            {showColorPaletteScale && (
+                <div className="form-group row">
+                    <div className="col-xs-12">
+                        <label>Color Palette</label>
+                        <SelectInput
+                            clearable={false}
+                            containerClass="row"
+                            inputClass="col-xs-12"
+                            name={COLOR_OPTIONS.COLOR_PALETTE_SCALE}
+                            onChange={onColorPaletteChange}
+                            options={COLOR_PALETTE_OPTIONS}
+                            showLabel={false}
+                            value={colorPaletteScale}
+                        />
+                    </div>
+                </div>
+            )}
+            {showSeriesLineStyle && (
+                <SeriesLineStyleInput
+                    chartConfig={chartConfig}
+                    key={chartConfig.measures.series.fieldKey} // reset component state when series field changes
+                    model={model}
+                    setChartConfig={setChartConfig}
+                />
+            )}
+        </>
+    );
+});
+ChartColorInputs.displayName = 'ChartColorInputs';
+
+interface SeriesLineStyleInputProps {
+    chartConfig: ChartConfig;
+    model: QueryModel;
+    setChartConfig: ChartConfigSetter;
+}
+const SeriesLineStyleInput: FC<SeriesLineStyleInputProps> = memo(({ chartConfig, model, setChartConfig }) => {
+    const [distinctSeriesOptions, setDistinctSeriesOptions] = useState<{ label: string; value: string }[]>();
+    const [selectedSeries, setSelectedSeries] = useState<string>();
+    const [seriesOptionMap, setSeriesOptionMap] = useState<Record<string, MeasureOption>>(
+        chartConfig.measuresOptions?.series ?? {}
+    );
+
+    useEffect(() => {
+        const fetchDistinctSeries = async () => {
+            setDistinctSeriesOptions(undefined);
+            setSelectedSeries(undefined);
+
+            if (chartConfig.measures?.series) {
+                try {
+                    const response = await selectDistinctRows({
+                        schemaName: model.schemaQuery.schemaName,
+                        queryName: model.schemaQuery.queryName,
+                        viewName: model.schemaQuery.viewName,
+                        column: chartConfig.measures?.series.fieldKey,
+                    });
+
+                    // map response.values to SelectOption format
+                    const options = response.values.map(value => ({
+                        label: value === null ? 'n/a' : value.toString(),
+                        value: value === null ? 'n/a' : value.toString(),
+                    }));
+                    setDistinctSeriesOptions(options);
+                } catch (error) {
+                    console.error(error);
+                }
+            }
+        };
+
+        fetchDistinctSeries();
+    }, [model.schemaQuery, chartConfig.measures?.series]);
+
+    // call setChartConfig whenever seriesOptionMap changes
+    useEffect(() => {
+        setChartConfig(current => ({
+            ...current,
+            measuresOptions: {
+                ...current.measuresOptions,
+                series: seriesOptionMap,
+            },
+        }));
+    }, [seriesOptionMap, setChartConfig]);
+
+    const onSeriesSelectChange = useCallback((_: never, value: string) => {
+        setSelectedSeries(value);
+    }, []);
+
+    const onSeriesOptionChange = useCallback((series: string, optionName: string, value: any) => {
+        setSeriesOptionMap(prev => {
+            const seriesOptions = prev[series] || {};
+            const updatedSeriesOptions = { ...seriesOptions };
+            // if the value is undefined, remove the option from the seriesOptionMap
+            if (value === undefined) {
+                delete updatedSeriesOptions[optionName];
+            } else {
+                updatedSeriesOptions[optionName] = value;
+            }
+            // if the updatedSeriesOptions is empty, remove the series from the seriesOptionMap
+            if (Utils.isEmptyObj(updatedSeriesOptions)) {
+                const { [series]: _, ...rest } = prev;
+                return rest;
+            }
+            return {
+                ...prev,
+                [series]: updatedSeriesOptions,
+            };
+        });
+    }, []);
+
+    const onSeriesColorChange = useCallback(
+        (_: never, value: string) => {
+            onSeriesOptionChange(selectedSeries, 'color', value);
+        },
+        [onSeriesOptionChange, selectedSeries]
+    );
+
+    const onSeriesShapeChange = useCallback(
+        (_: never, value: string) => {
+            onSeriesOptionChange(selectedSeries, 'shape', value);
+        },
+        [onSeriesOptionChange, selectedSeries]
+    );
+
+    const onSeriesShapeRemove = useCallback(() => {
+        onSeriesOptionChange(selectedSeries, 'shape', undefined);
+    }, [onSeriesOptionChange, selectedSeries]);
+
+    const seriesValueRenderer = useCallback(option => seriesOptionRenderer(option, seriesOptionMap), [seriesOptionMap]);
+
+    if (!distinctSeriesOptions) {
+        return null;
+    }
+
+    return (
+        <>
+            <div className="form-group row">
+                <div className="col-xs-12">
+                    <label>Line Color and Style</label>
+                    <SelectInput
+                        containerClass="row"
+                        inputClass="col-xs-12"
+                        menuPlacement="top"
+                        onChange={onSeriesSelectChange}
+                        optionRenderer={seriesValueRenderer}
+                        options={distinctSeriesOptions}
+                        placeholder="Select a series to set options..."
+                        showLabel={false}
+                        value={selectedSeries}
+                        valueRenderer={seriesValueRenderer}
+                    />
+                </div>
+            </div>
+            {selectedSeries && (
+                <div className="row">
+                    <div className="col-xs-4">
+                        <div>Color</div>
+                        <ColorPickerInput
+                            allowRemove
+                            name="seriesColor"
+                            onChange={onSeriesColorChange}
+                            placeholder="Auto"
+                            value={seriesOptionMap[selectedSeries]?.color}
+                        />
+                    </div>
+                    <div className="col-xs-8">
+                        <div>Shape</div>
+                        <SelectInput
+                            clearable={false}
+                            containerClass="inline-block"
+                            inputClass=""
+                            menuPlacement="top"
+                            onChange={onSeriesShapeChange}
+                            optionRenderer={shapeOptionRenderer}
+                            options={SHAPE_OPTIONS}
+                            placeholder="Auto"
+                            value={seriesOptionMap[selectedSeries]?.shape}
+                            valueRenderer={shapeValueRenderer}
+                        />
+                        {seriesOptionMap[selectedSeries]?.shape && (
+                            <RemoveEntityButton labelClass="color-picker__remove" onClick={onSeriesShapeRemove} />
+                        )}
+                    </div>
+                </div>
+            )}
+        </>
+    );
+});
+SeriesLineStyleInput.displayName = 'SeriesLineStyleInput';
+
+const LetterIcon: FC<{ letter: string }> = ({ letter }) => {
+    return <div className="letter-icon">{letter}</div>;
+};
+LetterIcon.displayName = 'LetterIcon';
diff --git a/packages/components/src/internal/components/chart/ChartFieldOption.tsx b/packages/components/src/internal/components/chart/ChartFieldOption.tsx
index 69051d62f2..20f3bc8f83 100644
--- a/packages/components/src/internal/components/chart/ChartFieldOption.tsx
+++ b/packages/components/src/internal/components/chart/ChartFieldOption.tsx
@@ -54,6 +54,7 @@ export const ChartFieldOption: FC<OwnProps> = memo(props => {
             setScale(DEFAULT_SCALE_VALUES);
             setChartConfig(current => {
                 let geomOptions = current.geomOptions;
+                const measuresOptions = current.measuresOptions;
                 const measures = { ...current.measures };
                 const scales = { ...current.scales };
                 const labels = { ...current.labels };
@@ -78,7 +79,12 @@ export const ChartFieldOption: FC<OwnProps> = memo(props => {
                     geomOptions = { ...geomOptions, trendlineType };
                 }
 
-                const updatedConfig = { ...current, geomOptions, measures, labels };
+                // reset the measureOptions.series when field changes
+                if (name === 'series' && measuresOptions.series !== undefined) {
+                    delete measuresOptions.series;
+                }
+
+                const updatedConfig = { ...current, geomOptions, measures, measuresOptions, labels };
 
                 if (selectedType.name === 'bar_chart') {
                     updatedConfig.labels.y = getBarChartAxisLabel(updatedConfig, current);
diff --git a/packages/components/src/internal/components/chart/ChartSettingsPanel.tsx b/packages/components/src/internal/components/chart/ChartSettingsPanel.tsx
index 28d7694721..115c71802c 100644
--- a/packages/components/src/internal/components/chart/ChartSettingsPanel.tsx
+++ b/packages/components/src/internal/components/chart/ChartSettingsPanel.tsx
@@ -1,4 +1,5 @@
 import React, { ChangeEvent, FC, memo, useCallback, useMemo, useState } from 'react';
+import classNames from 'classnames';
 import {
     BaseChartModel,
     BaseChartModelSetter,
@@ -16,9 +17,10 @@ import { ChartFieldOption } from './ChartFieldOption';
 import { QueryModel } from '../../../public/QueryModel/QueryModel';
 import { TrendlineOption } from './TrendlineOption';
 import { deepCopyChartConfig, hasTrendline } from './utils';
-import classNames from 'classnames';
 import { useEnterEscape } from '../../../public/useEnterEscape';
 import { ChartLabelInput } from './ChartLabelInput';
+import { ChartColorInputs } from './ChartColorInputs';
+import { Alert } from '../base/Alert';
 
 function changedIntValue(strVal: string, currentVal: number): [value: number, changed: boolean] {
     strVal = strVal.trim();
@@ -257,6 +259,7 @@ interface Props {
     chartConfig: ChartConfig;
     chartModel: BaseChartModel;
     chartType: ChartTypeInfo;
+    error: string;
     isNew: boolean;
     model: QueryModel;
     setChartConfig: ChartConfigSetter;
@@ -264,8 +267,18 @@ interface Props {
 }
 
 export const ChartSettingsPanel: FC<Props> = memo(props => {
-    const { allowInherit, canShare, chartConfig, chartType, chartModel, isNew, model, setChartConfig, setChartModel } =
-        props;
+    const {
+        allowInherit,
+        canShare,
+        chartConfig,
+        chartType,
+        chartModel,
+        error,
+        isNew,
+        model,
+        setChartConfig,
+        setChartModel,
+    } = props;
     const showTrendline = hasTrendline(chartType);
     const fields = chartType.fields.filter(f => f.name !== 'trendline');
 
@@ -315,6 +328,7 @@ export const ChartSettingsPanel: FC<Props> = memo(props => {
 
     return (
         <div className="chart-settings">
+            {error && <Alert>{error}</Alert>}
             <h4>Settings</h4>
             <div>
                 <label>Name *</label>
@@ -378,6 +392,7 @@ export const ChartSettingsPanel: FC<Props> = memo(props => {
                 value={chartConfig?.labels?.subtitle}
             />
             <SizeInputs height={chartConfig.height} setChartConfig={setChartConfig} width={chartConfig.width} />
+            <ChartColorInputs chartConfig={chartConfig} model={model} setChartConfig={setChartConfig} />
         </div>
     );
 });
diff --git a/packages/components/src/internal/components/chart/constants.ts b/packages/components/src/internal/components/chart/constants.ts
index a92d60e7cb..eeb55ea396 100644
--- a/packages/components/src/internal/components/chart/constants.ts
+++ b/packages/components/src/internal/components/chart/constants.ts
@@ -19,3 +19,25 @@ export const AGGREGATE_METHODS = [
     { label: 'Mean', value: 'MEAN' },
     { label: 'Median', value: 'MEDIAN' },
 ];
+
+// see vis/src/scale.js for options
+export const COLOR_PALETTE_OPTIONS = [
+    { label: 'Light (Default)', value: 'ColorDiscrete' },
+    { label: 'Dark', value: 'DarkColorDiscrete' },
+];
+
+// see vis/src/scale.js for options
+export const SHAPE_OPTIONS = [
+    { label: 'Circle', value: 'circle' },
+    { label: 'Diamond', value: 'diamond' },
+    { label: 'Square', value: 'square' },
+    { label: 'Triangle', value: 'triangle' },
+    { label: 'Cross', value: 'x' },
+];
+
+export const COLOR_OPTIONS_PER_TYPE = {
+    boxFillColor: ['bar_chart', 'box_plot'],
+    colorPaletteScale: ['bar_chart', 'box_plot', 'line_plot', 'scatter_plot', 'pie_chart'],
+    lineColor: ['bar_chart', 'box_plot'],
+    pointFillColor: ['box_plot', 'line_plot', 'scatter_plot'],
+};
diff --git a/packages/components/src/internal/components/chart/models.ts b/packages/components/src/internal/components/chart/models.ts
index a06fdbb90b..4f898787f4 100644
--- a/packages/components/src/internal/components/chart/models.ts
+++ b/packages/components/src/internal/components/chart/models.ts
@@ -7,12 +7,19 @@ export interface ChartLabels {
     y?: string;
 }
 
+export interface MeasureOption {
+    color?: string;
+    shape?: string;
+    // lineType?: string;
+}
+
 export interface ChartConfig {
     geomOptions: Record<string, boolean | number | string>;
     gridLinesVisible: string;
     height?: number;
     labels: ChartLabels;
     measures: Record<string, Record<string, any>>; // TODO: we can probably do better than any
+    measuresOptions?: Record<string, Record<string, MeasureOption>>; // map from measures to the options for the distinct values of that measure
     pointType: string;
     renderType: string;
     scales: Record<string, ScaleType>;
diff --git a/packages/components/src/internal/components/chart/utils.ts b/packages/components/src/internal/components/chart/utils.ts
index 53a6f42418..3587dcf5ee 100644
--- a/packages/components/src/internal/components/chart/utils.ts
+++ b/packages/components/src/internal/components/chart/utils.ts
@@ -145,6 +145,7 @@ export function deepCopyChartConfig(chartConfig: ChartConfig, chartType = 'bar_c
             height: 500,
             labels: {},
             measures: {},
+            measuresOptions: {},
             pointType: 'all',
             renderType: chartType,
             scales: {},
@@ -156,6 +157,7 @@ export function deepCopyChartConfig(chartConfig: ChartConfig, chartType = 'bar_c
         geomOptions: { ...chartConfig.geomOptions },
         labels: { ...chartConfig.labels },
         measures: { ...chartConfig.measures },
+        measuresOptions: { ...chartConfig.measuresOptions },
         scales: { ...chartConfig.scales },
     };
 }
diff --git a/packages/components/src/internal/components/domainproperties/samples/__snapshots__/SampleTypePropertiesPanel.test.tsx.snap b/packages/components/src/internal/components/domainproperties/samples/__snapshots__/SampleTypePropertiesPanel.test.tsx.snap
index f44c73838a..c0fbacf3d4 100644
--- a/packages/components/src/internal/components/domainproperties/samples/__snapshots__/SampleTypePropertiesPanel.test.tsx.snap
+++ b/packages/components/src/internal/components/domainproperties/samples/__snapshots__/SampleTypePropertiesPanel.test.tsx.snap
@@ -224,14 +224,19 @@ exports[`SampleTypePropertiesPanel appPropertiesOnly 1`] = `
             >
               <div
                 class="color-picker"
+                data-name="labelColor"
               >
                 <button
                   class="color-picker__button btn btn-default"
                   type="button"
                 >
-                  None
+                  <span
+                    class="color-picker__placeholder"
+                  >
+                    None
+                  </span>
                   <i
-                    class="fa fa-caret-down"
+                    class="fa fa-lg fa-angle-down"
                   />
                 </button>
                 <div
@@ -489,14 +494,19 @@ exports[`SampleTypePropertiesPanel appPropertiesOnly 1`] = `
           >
             <div
               class="color-picker"
+              data-name="labelColor"
             >
               <button
                 class="color-picker__button btn btn-default"
                 type="button"
               >
-                None
+                <span
+                  class="color-picker__placeholder"
+                >
+                  None
+                </span>
                 <i
-                  class="fa fa-caret-down"
+                  class="fa fa-lg fa-angle-down"
                 />
               </button>
               <div
diff --git a/packages/components/src/internal/components/forms/input/ColorPickerInput.test.tsx b/packages/components/src/internal/components/forms/input/ColorPickerInput.test.tsx
index 3d95dda462..13f22ed08d 100644
--- a/packages/components/src/internal/components/forms/input/ColorPickerInput.test.tsx
+++ b/packages/components/src/internal/components/forms/input/ColorPickerInput.test.tsx
@@ -6,33 +6,39 @@ import { ColorPickerInput } from './ColorPickerInput';
 
 describe('ColorPickerInput', () => {
     test('default props', () => {
-        const { container } = render(<ColorPickerInput value="#000000" onChange={jest.fn} />);
+        const { container } = render(<ColorPickerInput onChange={jest.fn} value="#000000" />);
         expect(container).toMatchSnapshot();
     });
 
     test('without value', () => {
-        const { container } = render(<ColorPickerInput value={undefined} onChange={jest.fn} />);
+        const { container } = render(<ColorPickerInput onChange={jest.fn} value={undefined} />);
         expect(container).toMatchSnapshot();
     });
 
     test('with button text', () => {
-        const { container } = render(<ColorPickerInput value="#000000" text="Select color..." onChange={jest.fn} />);
+        const { container } = render(<ColorPickerInput onChange={jest.fn} text="Select color..." value="#000000" />);
         expect(container).toMatchSnapshot();
     });
 
+    test('with placeholder', () => {
+        render(<ColorPickerInput onChange={jest.fn} placeholder="Auto" value={undefined} />);
+        expect(document.querySelector('.color-picker__button')?.textContent).toBe('Auto');
+        expect(document.querySelectorAll('.color-picker__placeholder')).toHaveLength(1);
+    });
+
     test('showPicker', async () => {
-        const { container } = render(<ColorPickerInput value="#000000" onChange={jest.fn} />);
+        const { container } = render(<ColorPickerInput onChange={jest.fn} value="#000000" />);
         await userEvent.click(document.querySelector('.color-picker__button'));
         expect(container).toMatchSnapshot();
     });
 
     test('allowRemove', () => {
-        const { container } = render(<ColorPickerInput value="#000000" onChange={jest.fn} allowRemove />);
+        const { container } = render(<ColorPickerInput allowRemove onChange={jest.fn} value="#000000" />);
         expect(container).toMatchSnapshot();
     });
 
     test('disabled', () => {
-        const { container } = render(<ColorPickerInput value="#000000" onChange={jest.fn} disabled />);
+        const { container } = render(<ColorPickerInput disabled onChange={jest.fn} value="#000000" />);
         expect(container).toMatchSnapshot();
     });
 });
diff --git a/packages/components/src/internal/components/forms/input/ColorPickerInput.tsx b/packages/components/src/internal/components/forms/input/ColorPickerInput.tsx
index cbd7d79a5f..17f246ad78 100644
--- a/packages/components/src/internal/components/forms/input/ColorPickerInput.tsx
+++ b/packages/components/src/internal/components/forms/input/ColorPickerInput.tsx
@@ -1,22 +1,89 @@
-import React, { FC, memo, useCallback, useState } from 'react';
+import React, { FC, memo, useCallback, useRef, useState } from 'react';
 import { ColorResult, CompactPicker } from 'react-color';
 import classNames from 'classnames';
 
 import { ColorIcon } from '../../base/ColorIcon';
 import { RemoveEntityButton } from '../../buttons/RemoveEntityButton';
 
+const DEFAULT_COLORS = [
+    '#FFFFFF',
+    '#F07575',
+    '#F4AE71',
+    '#F0E075',
+    '#E3F075',
+    '#A8E477',
+    '#7FF0C3',
+    '#81C6E9',
+    '#AC8EEB',
+    '#D983EC',
+    '#EE96BC',
+    '#D6C1A4',
+    '#BFBFBF',
+    '#EA4545',
+    '#EC7812',
+    '#E3C919',
+    '#BCCF17',
+    '#6BC026',
+    '#1ADB8E',
+    '#269BD6',
+    '#7C4DE0',
+    '#B921DB',
+    '#E1478A',
+    '#BB9868',
+    '#808080',
+    '#D11717',
+    '#D26B10',
+    '#DCB118',
+    '#A9B314',
+    '#589E1F',
+    '#16BB79',
+    '#2084B6',
+    '#5B25D0',
+    '#961BB1',
+    '#B81E61',
+    '#8D6C3F',
+    '#404040',
+    '#A11212',
+    '#AF590D',
+    '#AA8813',
+    '#868E10',
+    '#4A841A',
+    '#13A067',
+    '#1B6E98',
+    '#481DA5',
+    '#7C1692',
+    '#95184E',
+    '#745934',
+    '#000000',
+    '#7C0E0E',
+    '#8A460A',
+    '#8A6E0F',
+    '#6C730D',
+    '#396614',
+    '#108456',
+    '#175E82',
+    '#351579',
+    '#651278',
+    '#72133C',
+    '#634C2C',
+];
+
 interface Props {
     allowRemove?: boolean;
     colors?: string[];
     disabled?: boolean;
     name?: string;
     onChange: (name: string, value: string) => void;
+    placeholder?: string;
     text?: string;
     value: string;
 }
 
 export const ColorPickerInput: FC<Props> = memo(props => {
-    const { allowRemove, colors, disabled, name, onChange, text, value } = props;
+    const { allowRemove, colors = DEFAULT_COLORS, disabled, name, onChange, text, value, placeholder = 'None' } = props;
+    const buttonRef = useRef<HTMLButtonElement | null>(null);
+    const [fixedTop, setFixedTop] = useState<number>();
+    const [fixedLeft, setFixedLeft] = useState<number>();
     const [showPicker, setShowPicker] = useState<boolean>(false);
     const onChangeComplete = useCallback(
         (color?: ColorResult) => {
@@ -28,32 +95,54 @@ export const ColorPickerInput: FC<Props> = memo(props => {
         onChangeComplete();
     }, [onChangeComplete]);
     const togglePicker = useCallback(() => {
+        if (buttonRef.current) {
+            const rect = buttonRef.current.getBoundingClientRect();
+            setFixedTop(rect.bottom + 5);
+            setFixedLeft(rect.left);
+        }
+
         setShowPicker(s => !s);
     }, []);
 
+    // if value doesn't start with '#', add it
+    const value_ = value && !value.startsWith('#') ? `#${value}` : value;
+
+    const compactPicker = <CompactPicker color={value_} colors={colors} onChangeComplete={onChangeComplete} />;
+
     return (
-        <div className="color-picker">
+        <div className="color-picker" data-name={name}>
             <button
-                type="button"
                 className="color-picker__button btn btn-default"
-                onClick={togglePicker}
                 disabled={disabled}
+                onClick={togglePicker}
+                ref={buttonRef}
+                type="button"
             >
-                {text ? text : value ? <ColorIcon cls="color-picker__chip-small" asSquare value={value} /> : 'None'}
-                <i className={classNames('fa', { 'fa-caret-up': showPicker, 'fa-caret-down': !showPicker })} />
+                {text ? (
+                    text
+                ) : value ? (
+                    <ColorIcon asSquare cls="color-picker__chip-small" value={value_} />
+                ) : (
+                    <span className="color-picker__placeholder">{placeholder}</span>
+                )}
+                <i className={classNames('fa fa-lg', { 'fa-angle-up': showPicker, 'fa-angle-down': !showPicker })} />
             </button>
 
-            {text !== undefined && <ColorIcon cls="color-picker__chip" asSquare value={value} />}
+            {text !== undefined && <ColorIcon asSquare cls="color-picker__chip" value={value_} />}
 
-            {allowRemove && value && !disabled && (
-                <RemoveEntityButton onClick={onRemove} labelClass="color-picker__remove" />
+            {allowRemove && value_ && !disabled && (
+                <RemoveEntityButton labelClass="color-picker__remove" onClick={onRemove} />
             )}
 
             <div className="color-picker__picker">
                 {showPicker && (
                     <>
                         <div className="color-picker__mask" onClick={togglePicker} />
-                        <CompactPicker onChangeComplete={onChangeComplete} color={value} colors={colors} />
+                        {fixedTop && fixedLeft ? (
+                            <div style={{ position: 'fixed', top: fixedTop, left: fixedLeft }}>{compactPicker}</div>
+                        ) : (
+                            compactPicker
+                        )}
                     </>
                 )}
             </div>
diff --git a/packages/components/src/internal/components/forms/input/__snapshots__/ColorPickerInput.test.tsx.snap b/packages/components/src/internal/components/forms/input/__snapshots__/ColorPickerInput.test.tsx.snap
index 8834b7215d..4defd4bba3 100644
--- a/packages/components/src/internal/components/forms/input/__snapshots__/ColorPickerInput.test.tsx.snap
+++ b/packages/components/src/internal/components/forms/input/__snapshots__/ColorPickerInput.test.tsx.snap
@@ -14,7 +14,7 @@ exports[`ColorPickerInput allowRemove 1`] = `
         style="background-color: rgb(0, 0, 0);"
       />
       <i
-        class="fa fa-caret-down"
+        class="fa fa-lg fa-angle-down"
       />
     </button>
     <div
@@ -49,7 +49,7 @@ exports[`ColorPickerInput default props 1`] = `
         style="background-color: rgb(0, 0, 0);"
       />
       <i
-        class="fa fa-caret-down"
+        class="fa fa-lg fa-angle-down"
       />
     </button>
     <div
@@ -74,7 +74,7 @@ exports[`ColorPickerInput disabled 1`] = `
         style="background-color: rgb(0, 0, 0);"
       />
       <i
-        class="fa fa-caret-down"
+        class="fa fa-lg fa-angle-down"
       />
     </button>
     <div
@@ -98,7 +98,7 @@ exports[`ColorPickerInput showPicker 1`] = `
         style="background-color: rgb(0, 0, 0);"
       />
       <i
-        class="fa fa-caret-up"
+        class="fa fa-lg fa-angle-up"
       />
     </button>
     <div
@@ -123,20 +123,20 @@ exports[`ColorPickerInput showPicker 1`] = `
             <div>
               <span>
                 <div
-                  style="background: rgb(77, 77, 77); height: 15px; width: 15px; cursor: pointer; position: relative; outline: none; float: left; margin-right: 5px; margin-bottom: 5px;"
+                  style="background: rgb(255, 255, 255); height: 15px; width: 15px; cursor: pointer; position: relative; outline: none; float: left; margin-right: 5px; margin-bottom: 5px; box-shadow: inset 0 0 0 1px #ddd;"
                   tabindex="0"
-                  title="#4D4D4D"
+                  title="#FFFFFF"
                 >
                   <div
-                    style="position: absolute; top: 5px; right: 5px; bottom: 5px; left: 5px; background: rgb(255, 255, 255); border-radius: 50%; opacity: 0;"
+                    style="position: absolute; top: 5px; right: 5px; bottom: 5px; left: 5px; background: rgb(0, 0, 0); border-radius: 50%; opacity: 0;"
                   />
                 </div>
               </span>
               <span>
                 <div
-                  style="background: rgb(153, 153, 153); height: 15px; width: 15px; cursor: pointer; position: relative; outline: none; float: left; margin-right: 5px; margin-bottom: 5px;"
+                  style="background: rgb(240, 117, 117); height: 15px; width: 15px; cursor: pointer; position: relative; outline: none; float: left; margin-right: 5px; margin-bottom: 5px;"
                   tabindex="0"
-                  title="#999999"
+                  title="#F07575"
                 >
                   <div
                     style="position: absolute; top: 5px; right: 5px; bottom: 5px; left: 5px; background: rgb(0, 0, 0); border-radius: 50%; opacity: 0;"
@@ -145,9 +145,9 @@ exports[`ColorPickerInput showPicker 1`] = `
               </span>
               <span>
                 <div
-                  style="background: rgb(255, 255, 255); height: 15px; width: 15px; cursor: pointer; position: relative; outline: none; float: left; margin-right: 5px; margin-bottom: 5px; box-shadow: inset 0 0 0 1px #ddd;"
+                  style="background: rgb(244, 174, 113); height: 15px; width: 15px; cursor: pointer; position: relative; outline: none; float: left; margin-right: 5px; margin-bottom: 5px;"
                   tabindex="0"
-                  title="#FFFFFF"
+                  title="#F4AE71"
                 >
                   <div
                     style="position: absolute; top: 5px; right: 5px; bottom: 5px; left: 5px; background: rgb(0, 0, 0); border-radius: 50%; opacity: 0;"
@@ -156,20 +156,31 @@ exports[`ColorPickerInput showPicker 1`] = `
               </span>
               <span>
                 <div
-                  style="background: rgb(244, 78, 59); height: 15px; width: 15px; cursor: pointer; position: relative; outline: none; float: left; margin-right: 5px; margin-bottom: 5px;"
+                  style="background: rgb(240, 224, 117); height: 15px; width: 15px; cursor: pointer; position: relative; outline: none; float: left; margin-right: 5px; margin-bottom: 5px;"
                   tabindex="0"
-                  title="#F44E3B"
+                  title="#F0E075"
                 >
                   <div
-                    style="position: absolute; top: 5px; right: 5px; bottom: 5px; left: 5px; background: rgb(255, 255, 255); border-radius: 50%; opacity: 0;"
+                    style="position: absolute; top: 5px; right: 5px; bottom: 5px; left: 5px; background: rgb(0, 0, 0); border-radius: 50%; opacity: 0;"
+                  />
+                </div>
+              </span>
+              <span>
+                <div
+                  style="background: rgb(227, 240, 117); height: 15px; width: 15px; cursor: pointer; position: relative; outline: none; float: left; margin-right: 5px; margin-bottom: 5px;"
+                  tabindex="0"
+                  title="#E3F075"
+                >
+                  <div
+                    style="position: absolute; top: 5px; right: 5px; bottom: 5px; left: 5px; background: rgb(0, 0, 0); border-radius: 50%; opacity: 0;"
                   />
                 </div>
               </span>
               <span>
                 <div
-                  style="background: rgb(254, 146, 0); height: 15px; width: 15px; cursor: pointer; position: relative; outline: none; float: left; margin-right: 5px; margin-bottom: 5px;"
+                  style="background: rgb(168, 228, 119); height: 15px; width: 15px; cursor: pointer; position: relative; outline: none; float: left; margin-right: 5px; margin-bottom: 5px;"
                   tabindex="0"
-                  title="#FE9200"
+                  title="#A8E477"
                 >
                   <div
                     style="position: absolute; top: 5px; right: 5px; bottom: 5px; left: 5px; background: rgb(0, 0, 0); border-radius: 50%; opacity: 0;"
@@ -178,9 +189,9 @@ exports[`ColorPickerInput showPicker 1`] = `
               </span>
               <span>
                 <div
-                  style="background: rgb(252, 220, 0); height: 15px; width: 15px; cursor: pointer; position: relative; outline: none; float: left; margin-right: 5px; margin-bottom: 5px;"
+                  style="background: rgb(127, 240, 195); height: 15px; width: 15px; cursor: pointer; position: relative; outline: none; float: left; margin-right: 5px; margin-bottom: 5px;"
                   tabindex="0"
-                  title="#FCDC00"
+                  title="#7FF0C3"
                 >
                   <div
                     style="position: absolute; top: 5px; right: 5px; bottom: 5px; left: 5px; background: rgb(0, 0, 0); border-radius: 50%; opacity: 0;"
@@ -189,9 +200,9 @@ exports[`ColorPickerInput showPicker 1`] = `
               </span>
               <span>
                 <div
-                  style="background: rgb(219, 223, 0); height: 15px; width: 15px; cursor: pointer; position: relative; outline: none; float: left; margin-right: 5px; margin-bottom: 5px;"
+                  style="background: rgb(129, 198, 233); height: 15px; width: 15px; cursor: pointer; position: relative; outline: none; float: left; margin-right: 5px; margin-bottom: 5px;"
                   tabindex="0"
-                  title="#DBDF00"
+                  title="#81C6E9"
                 >
                   <div
                     style="position: absolute; top: 5px; right: 5px; bottom: 5px; left: 5px; background: rgb(0, 0, 0); border-radius: 50%; opacity: 0;"
@@ -200,9 +211,9 @@ exports[`ColorPickerInput showPicker 1`] = `
               </span>
               <span>
                 <div
-                  style="background: rgb(164, 221, 0); height: 15px; width: 15px; cursor: pointer; position: relative; outline: none; float: left; margin-right: 5px; margin-bottom: 5px;"
+                  style="background: rgb(172, 142, 235); height: 15px; width: 15px; cursor: pointer; position: relative; outline: none; float: left; margin-right: 5px; margin-bottom: 5px;"
                   tabindex="0"
-                  title="#A4DD00"
+                  title="#AC8EEB"
                 >
                   <div
                     style="position: absolute; top: 5px; right: 5px; bottom: 5px; left: 5px; background: rgb(0, 0, 0); border-radius: 50%; opacity: 0;"
@@ -211,9 +222,9 @@ exports[`ColorPickerInput showPicker 1`] = `
               </span>
               <span>
                 <div
-                  style="background: rgb(104, 204, 202); height: 15px; width: 15px; cursor: pointer; position: relative; outline: none; float: left; margin-right: 5px; margin-bottom: 5px;"
+                  style="background: rgb(217, 131, 236); height: 15px; width: 15px; cursor: pointer; position: relative; outline: none; float: left; margin-right: 5px; margin-bottom: 5px;"
                   tabindex="0"
-                  title="#68CCCA"
+                  title="#D983EC"
                 >
                   <div
                     style="position: absolute; top: 5px; right: 5px; bottom: 5px; left: 5px; background: rgb(0, 0, 0); border-radius: 50%; opacity: 0;"
@@ -222,9 +233,9 @@ exports[`ColorPickerInput showPicker 1`] = `
               </span>
               <span>
                 <div
-                  style="background: rgb(115, 216, 255); height: 15px; width: 15px; cursor: pointer; position: relative; outline: none; float: left; margin-right: 5px; margin-bottom: 5px;"
+                  style="background: rgb(238, 150, 188); height: 15px; width: 15px; cursor: pointer; position: relative; outline: none; float: left; margin-right: 5px; margin-bottom: 5px;"
                   tabindex="0"
-                  title="#73D8FF"
+                  title="#EE96BC"
                 >
                   <div
                     style="position: absolute; top: 5px; right: 5px; bottom: 5px; left: 5px; background: rgb(0, 0, 0); border-radius: 50%; opacity: 0;"
@@ -233,9 +244,9 @@ exports[`ColorPickerInput showPicker 1`] = `
               </span>
               <span>
                 <div
-                  style="background: rgb(174, 161, 255); height: 15px; width: 15px; cursor: pointer; position: relative; outline: none; float: left; margin-right: 5px; margin-bottom: 5px;"
+                  style="background: rgb(214, 193, 164); height: 15px; width: 15px; cursor: pointer; position: relative; outline: none; float: left; margin-right: 5px; margin-bottom: 5px;"
                   tabindex="0"
-                  title="#AEA1FF"
+                  title="#D6C1A4"
                 >
                   <div
                     style="position: absolute; top: 5px; right: 5px; bottom: 5px; left: 5px; background: rgb(0, 0, 0); border-radius: 50%; opacity: 0;"
@@ -244,9 +255,9 @@ exports[`ColorPickerInput showPicker 1`] = `
               </span>
               <span>
                 <div
-                  style="background: rgb(253, 161, 255); height: 15px; width: 15px; cursor: pointer; position: relative; outline: none; float: left; margin-right: 5px; margin-bottom: 5px;"
+                  style="background: rgb(191, 191, 191); height: 15px; width: 15px; cursor: pointer; position: relative; outline: none; float: left; margin-right: 5px; margin-bottom: 5px;"
                   tabindex="0"
-                  title="#FDA1FF"
+                  title="#BFBFBF"
                 >
                   <div
                     style="position: absolute; top: 5px; right: 5px; bottom: 5px; left: 5px; background: rgb(0, 0, 0); border-radius: 50%; opacity: 0;"
@@ -255,15 +266,125 @@ exports[`ColorPickerInput showPicker 1`] = `
               </span>
               <span>
                 <div
-                  style="background: rgb(51, 51, 51); height: 15px; width: 15px; cursor: pointer; position: relative; outline: none; float: left; margin-right: 5px; margin-bottom: 5px;"
+                  style="background: rgb(234, 69, 69); height: 15px; width: 15px; cursor: pointer; position: relative; outline: none; float: left; margin-right: 5px; margin-bottom: 5px;"
                   tabindex="0"
-                  title="#333333"
+                  title="#EA4545"
                 >
                   <div
                     style="position: absolute; top: 5px; right: 5px; bottom: 5px; left: 5px; background: rgb(255, 255, 255); border-radius: 50%; opacity: 0;"
                   />
                 </div>
               </span>
+              <span>
+                <div
+                  style="background: rgb(236, 120, 18); height: 15px; width: 15px; cursor: pointer; position: relative; outline: none; float: left; margin-right: 5px; margin-bottom: 5px;"
+                  tabindex="0"
+                  title="#EC7812"
+                >
+                  <div
+                    style="position: absolute; top: 5px; right: 5px; bottom: 5px; left: 5px; background: rgb(0, 0, 0); border-radius: 50%; opacity: 0;"
+                  />
+                </div>
+              </span>
+              <span>
+                <div
+                  style="background: rgb(227, 201, 25); height: 15px; width: 15px; cursor: pointer; position: relative; outline: none; float: left; margin-right: 5px; margin-bottom: 5px;"
+                  tabindex="0"
+                  title="#E3C919"
+                >
+                  <div
+                    style="position: absolute; top: 5px; right: 5px; bottom: 5px; left: 5px; background: rgb(0, 0, 0); border-radius: 50%; opacity: 0;"
+                  />
+                </div>
+              </span>
+              <span>
+                <div
+                  style="background: rgb(188, 207, 23); height: 15px; width: 15px; cursor: pointer; position: relative; outline: none; float: left; margin-right: 5px; margin-bottom: 5px;"
+                  tabindex="0"
+                  title="#BCCF17"
+                >
+                  <div
+                    style="position: absolute; top: 5px; right: 5px; bottom: 5px; left: 5px; background: rgb(0, 0, 0); border-radius: 50%; opacity: 0;"
+                  />
+                </div>
+              </span>
+              <span>
+                <div
+                  style="background: rgb(107, 192, 38); height: 15px; width: 15px; cursor: pointer; position: relative; outline: none; float: left; margin-right: 5px; margin-bottom: 5px;"
+                  tabindex="0"
+                  title="#6BC026"
+                >
+                  <div
+                    style="position: absolute; top: 5px; right: 5px; bottom: 5px; left: 5px; background: rgb(0, 0, 0); border-radius: 50%; opacity: 0;"
+                  />
+                </div>
+              </span>
+              <span>
+                <div
+                  style="background: rgb(26, 219, 142); height: 15px; width: 15px; cursor: pointer; position: relative; outline: none; float: left; margin-right: 5px; margin-bottom: 5px;"
+                  tabindex="0"
+                  title="#1ADB8E"
+                >
+                  <div
+                    style="position: absolute; top: 5px; right: 5px; bottom: 5px; left: 5px; background: rgb(0, 0, 0); border-radius: 50%; opacity: 0;"
+                  />
+                </div>
+              </span>
+              <span>
+                <div
+                  style="background: rgb(38, 155, 214); height: 15px; width: 15px; cursor: pointer; position: relative; outline: none; float: left; margin-right: 5px; margin-bottom: 5px;"
+                  tabindex="0"
+                  title="#269BD6"
+                >
+                  <div
+                    style="position: absolute; top: 5px; right: 5px; bottom: 5px; left: 5px; background: rgb(255, 255, 255); border-radius: 50%; opacity: 0;"
+                  />
+                </div>
+              </span>
+              <span>
+                <div
+                  style="background: rgb(124, 77, 224); height: 15px; width: 15px; cursor: pointer; position: relative; outline: none; float: left; margin-right: 5px; margin-bottom: 5px;"
+                  tabindex="0"
+                  title="#7C4DE0"
+                >
+                  <div
+                    style="position: absolute; top: 5px; right: 5px; bottom: 5px; left: 5px; background: rgb(255, 255, 255); border-radius: 50%; opacity: 0;"
+                  />
+                </div>
+              </span>
+              <span>
+                <div
+                  style="background: rgb(185, 33, 219); height: 15px; width: 15px; cursor: pointer; position: relative; outline: none; float: left; margin-right: 5px; margin-bottom: 5px;"
+                  tabindex="0"
+                  title="#B921DB"
+                >
+                  <div
+                    style="position: absolute; top: 5px; right: 5px; bottom: 5px; left: 5px; background: rgb(255, 255, 255); border-radius: 50%; opacity: 0;"
+                  />
+                </div>
+              </span>
+              <span>
+                <div
+                  style="background: rgb(225, 71, 138); height: 15px; width: 15px; cursor: pointer; position: relative; outline: none; float: left; margin-right: 5px; margin-bottom: 5px;"
+                  tabindex="0"
+                  title="#E1478A"
+                >
+                  <div
+                    style="position: absolute; top: 5px; right: 5px; bottom: 5px; left: 5px; background: rgb(255, 255, 255); border-radius: 50%; opacity: 0;"
+                  />
+                </div>
+              </span>
+              <span>
+                <div
+                  style="background: rgb(187, 152, 104); height: 15px; width: 15px; cursor: pointer; position: relative; outline: none; float: left; margin-right: 5px; margin-bottom: 5px;"
+                  tabindex="0"
+                  title="#BB9868"
+                >
+                  <div
+                    style="position: absolute; top: 5px; right: 5px; bottom: 5px; left: 5px; background: rgb(0, 0, 0); border-radius: 50%; opacity: 0;"
+                  />
+                </div>
+              </span>
               <span>
                 <div
                   style="background: rgb(128, 128, 128); height: 15px; width: 15px; cursor: pointer; position: relative; outline: none; float: left; margin-right: 5px; margin-bottom: 5px;"
@@ -277,20 +398,20 @@ exports[`ColorPickerInput showPicker 1`] = `
               </span>
               <span>
                 <div
-                  style="background: rgb(204, 204, 204); height: 15px; width: 15px; cursor: pointer; position: relative; outline: none; float: left; margin-right: 5px; margin-bottom: 5px;"
+                  style="background: rgb(209, 23, 23); height: 15px; width: 15px; cursor: pointer; position: relative; outline: none; float: left; margin-right: 5px; margin-bottom: 5px;"
                   tabindex="0"
-                  title="#cccccc"
+                  title="#D11717"
                 >
                   <div
-                    style="position: absolute; top: 5px; right: 5px; bottom: 5px; left: 5px; background: rgb(0, 0, 0); border-radius: 50%; opacity: 0;"
+                    style="position: absolute; top: 5px; right: 5px; bottom: 5px; left: 5px; background: rgb(255, 255, 255); border-radius: 50%; opacity: 0;"
                   />
                 </div>
               </span>
               <span>
                 <div
-                  style="background: rgb(211, 49, 21); height: 15px; width: 15px; cursor: pointer; position: relative; outline: none; float: left; margin-right: 5px; margin-bottom: 5px;"
+                  style="background: rgb(210, 107, 16); height: 15px; width: 15px; cursor: pointer; position: relative; outline: none; float: left; margin-right: 5px; margin-bottom: 5px;"
                   tabindex="0"
-                  title="#D33115"
+                  title="#D26B10"
                 >
                   <div
                     style="position: absolute; top: 5px; right: 5px; bottom: 5px; left: 5px; background: rgb(255, 255, 255); border-radius: 50%; opacity: 0;"
@@ -299,9 +420,9 @@ exports[`ColorPickerInput showPicker 1`] = `
               </span>
               <span>
                 <div
-                  style="background: rgb(226, 115, 0); height: 15px; width: 15px; cursor: pointer; position: relative; outline: none; float: left; margin-right: 5px; margin-bottom: 5px;"
+                  style="background: rgb(220, 177, 24); height: 15px; width: 15px; cursor: pointer; position: relative; outline: none; float: left; margin-right: 5px; margin-bottom: 5px;"
                   tabindex="0"
-                  title="#E27300"
+                  title="#DCB118"
                 >
                   <div
                     style="position: absolute; top: 5px; right: 5px; bottom: 5px; left: 5px; background: rgb(0, 0, 0); border-radius: 50%; opacity: 0;"
@@ -310,9 +431,9 @@ exports[`ColorPickerInput showPicker 1`] = `
               </span>
               <span>
                 <div
-                  style="background: rgb(252, 196, 0); height: 15px; width: 15px; cursor: pointer; position: relative; outline: none; float: left; margin-right: 5px; margin-bottom: 5px;"
+                  style="background: rgb(169, 179, 20); height: 15px; width: 15px; cursor: pointer; position: relative; outline: none; float: left; margin-right: 5px; margin-bottom: 5px;"
                   tabindex="0"
-                  title="#FCC400"
+                  title="#A9B314"
                 >
                   <div
                     style="position: absolute; top: 5px; right: 5px; bottom: 5px; left: 5px; background: rgb(0, 0, 0); border-radius: 50%; opacity: 0;"
@@ -321,9 +442,20 @@ exports[`ColorPickerInput showPicker 1`] = `
               </span>
               <span>
                 <div
-                  style="background: rgb(176, 188, 0); height: 15px; width: 15px; cursor: pointer; position: relative; outline: none; float: left; margin-right: 5px; margin-bottom: 5px;"
+                  style="background: rgb(88, 158, 31); height: 15px; width: 15px; cursor: pointer; position: relative; outline: none; float: left; margin-right: 5px; margin-bottom: 5px;"
                   tabindex="0"
-                  title="#B0BC00"
+                  title="#589E1F"
+                >
+                  <div
+                    style="position: absolute; top: 5px; right: 5px; bottom: 5px; left: 5px; background: rgb(255, 255, 255); border-radius: 50%; opacity: 0;"
+                  />
+                </div>
+              </span>
+              <span>
+                <div
+                  style="background: rgb(22, 187, 121); height: 15px; width: 15px; cursor: pointer; position: relative; outline: none; float: left; margin-right: 5px; margin-bottom: 5px;"
+                  tabindex="0"
+                  title="#16BB79"
                 >
                   <div
                     style="position: absolute; top: 5px; right: 5px; bottom: 5px; left: 5px; background: rgb(0, 0, 0); border-radius: 50%; opacity: 0;"
@@ -332,9 +464,97 @@ exports[`ColorPickerInput showPicker 1`] = `
               </span>
               <span>
                 <div
-                  style="background: rgb(104, 188, 0); height: 15px; width: 15px; cursor: pointer; position: relative; outline: none; float: left; margin-right: 5px; margin-bottom: 5px;"
+                  style="background: rgb(32, 132, 182); height: 15px; width: 15px; cursor: pointer; position: relative; outline: none; float: left; margin-right: 5px; margin-bottom: 5px;"
+                  tabindex="0"
+                  title="#2084B6"
+                >
+                  <div
+                    style="position: absolute; top: 5px; right: 5px; bottom: 5px; left: 5px; background: rgb(255, 255, 255); border-radius: 50%; opacity: 0;"
+                  />
+                </div>
+              </span>
+              <span>
+                <div
+                  style="background: rgb(91, 37, 208); height: 15px; width: 15px; cursor: pointer; position: relative; outline: none; float: left; margin-right: 5px; margin-bottom: 5px;"
+                  tabindex="0"
+                  title="#5B25D0"
+                >
+                  <div
+                    style="position: absolute; top: 5px; right: 5px; bottom: 5px; left: 5px; background: rgb(255, 255, 255); border-radius: 50%; opacity: 0;"
+                  />
+                </div>
+              </span>
+              <span>
+                <div
+                  style="background: rgb(150, 27, 177); height: 15px; width: 15px; cursor: pointer; position: relative; outline: none; float: left; margin-right: 5px; margin-bottom: 5px;"
+                  tabindex="0"
+                  title="#961BB1"
+                >
+                  <div
+                    style="position: absolute; top: 5px; right: 5px; bottom: 5px; left: 5px; background: rgb(255, 255, 255); border-radius: 50%; opacity: 0;"
+                  />
+                </div>
+              </span>
+              <span>
+                <div
+                  style="background: rgb(184, 30, 97); height: 15px; width: 15px; cursor: pointer; position: relative; outline: none; float: left; margin-right: 5px; margin-bottom: 5px;"
+                  tabindex="0"
+                  title="#B81E61"
+                >
+                  <div
+                    style="position: absolute; top: 5px; right: 5px; bottom: 5px; left: 5px; background: rgb(255, 255, 255); border-radius: 50%; opacity: 0;"
+                  />
+                </div>
+              </span>
+              <span>
+                <div
+                  style="background: rgb(141, 108, 63); height: 15px; width: 15px; cursor: pointer; position: relative; outline: none; float: left; margin-right: 5px; margin-bottom: 5px;"
+                  tabindex="0"
+                  title="#8D6C3F"
+                >
+                  <div
+                    style="position: absolute; top: 5px; right: 5px; bottom: 5px; left: 5px; background: rgb(255, 255, 255); border-radius: 50%; opacity: 0;"
+                  />
+                </div>
+              </span>
+              <span>
+                <div
+                  style="background: rgb(64, 64, 64); height: 15px; width: 15px; cursor: pointer; position: relative; outline: none; float: left; margin-right: 5px; margin-bottom: 5px;"
+                  tabindex="0"
+                  title="#404040"
+                >
+                  <div
+                    style="position: absolute; top: 5px; right: 5px; bottom: 5px; left: 5px; background: rgb(255, 255, 255); border-radius: 50%; opacity: 0;"
+                  />
+                </div>
+              </span>
+              <span>
+                <div
+                  style="background: rgb(161, 18, 18); height: 15px; width: 15px; cursor: pointer; position: relative; outline: none; float: left; margin-right: 5px; margin-bottom: 5px;"
+                  tabindex="0"
+                  title="#A11212"
+                >
+                  <div
+                    style="position: absolute; top: 5px; right: 5px; bottom: 5px; left: 5px; background: rgb(255, 255, 255); border-radius: 50%; opacity: 0;"
+                  />
+                </div>
+              </span>
+              <span>
+                <div
+                  style="background: rgb(175, 89, 13); height: 15px; width: 15px; cursor: pointer; position: relative; outline: none; float: left; margin-right: 5px; margin-bottom: 5px;"
+                  tabindex="0"
+                  title="#AF590D"
+                >
+                  <div
+                    style="position: absolute; top: 5px; right: 5px; bottom: 5px; left: 5px; background: rgb(255, 255, 255); border-radius: 50%; opacity: 0;"
+                  />
+                </div>
+              </span>
+              <span>
+                <div
+                  style="background: rgb(170, 136, 19); height: 15px; width: 15px; cursor: pointer; position: relative; outline: none; float: left; margin-right: 5px; margin-bottom: 5px;"
                   tabindex="0"
-                  title="#68BC00"
+                  title="#AA8813"
                 >
                   <div
                     style="position: absolute; top: 5px; right: 5px; bottom: 5px; left: 5px; background: rgb(0, 0, 0); border-radius: 50%; opacity: 0;"
@@ -343,9 +563,31 @@ exports[`ColorPickerInput showPicker 1`] = `
               </span>
               <span>
                 <div
-                  style="background: rgb(22, 165, 165); height: 15px; width: 15px; cursor: pointer; position: relative; outline: none; float: left; margin-right: 5px; margin-bottom: 5px;"
+                  style="background: rgb(134, 142, 16); height: 15px; width: 15px; cursor: pointer; position: relative; outline: none; float: left; margin-right: 5px; margin-bottom: 5px;"
+                  tabindex="0"
+                  title="#868E10"
+                >
+                  <div
+                    style="position: absolute; top: 5px; right: 5px; bottom: 5px; left: 5px; background: rgb(255, 255, 255); border-radius: 50%; opacity: 0;"
+                  />
+                </div>
+              </span>
+              <span>
+                <div
+                  style="background: rgb(74, 132, 26); height: 15px; width: 15px; cursor: pointer; position: relative; outline: none; float: left; margin-right: 5px; margin-bottom: 5px;"
+                  tabindex="0"
+                  title="#4A841A"
+                >
+                  <div
+                    style="position: absolute; top: 5px; right: 5px; bottom: 5px; left: 5px; background: rgb(255, 255, 255); border-radius: 50%; opacity: 0;"
+                  />
+                </div>
+              </span>
+              <span>
+                <div
+                  style="background: rgb(19, 160, 103); height: 15px; width: 15px; cursor: pointer; position: relative; outline: none; float: left; margin-right: 5px; margin-bottom: 5px;"
                   tabindex="0"
-                  title="#16A5A5"
+                  title="#13A067"
                 >
                   <div
                     style="position: absolute; top: 5px; right: 5px; bottom: 5px; left: 5px; background: rgb(255, 255, 255); border-radius: 50%; opacity: 0;"
@@ -354,9 +596,9 @@ exports[`ColorPickerInput showPicker 1`] = `
               </span>
               <span>
                 <div
-                  style="background: rgb(0, 156, 224); height: 15px; width: 15px; cursor: pointer; position: relative; outline: none; float: left; margin-right: 5px; margin-bottom: 5px;"
+                  style="background: rgb(27, 110, 152); height: 15px; width: 15px; cursor: pointer; position: relative; outline: none; float: left; margin-right: 5px; margin-bottom: 5px;"
                   tabindex="0"
-                  title="#009CE0"
+                  title="#1B6E98"
                 >
                   <div
                     style="position: absolute; top: 5px; right: 5px; bottom: 5px; left: 5px; background: rgb(255, 255, 255); border-radius: 50%; opacity: 0;"
@@ -365,9 +607,9 @@ exports[`ColorPickerInput showPicker 1`] = `
               </span>
               <span>
                 <div
-                  style="background: rgb(123, 100, 255); height: 15px; width: 15px; cursor: pointer; position: relative; outline: none; float: left; margin-right: 5px; margin-bottom: 5px;"
+                  style="background: rgb(72, 29, 165); height: 15px; width: 15px; cursor: pointer; position: relative; outline: none; float: left; margin-right: 5px; margin-bottom: 5px;"
                   tabindex="0"
-                  title="#7B64FF"
+                  title="#481DA5"
                 >
                   <div
                     style="position: absolute; top: 5px; right: 5px; bottom: 5px; left: 5px; background: rgb(255, 255, 255); border-radius: 50%; opacity: 0;"
@@ -376,9 +618,31 @@ exports[`ColorPickerInput showPicker 1`] = `
               </span>
               <span>
                 <div
-                  style="background: rgb(250, 40, 255); height: 15px; width: 15px; cursor: pointer; position: relative; outline: none; float: left; margin-right: 5px; margin-bottom: 5px;"
+                  style="background: rgb(124, 22, 146); height: 15px; width: 15px; cursor: pointer; position: relative; outline: none; float: left; margin-right: 5px; margin-bottom: 5px;"
                   tabindex="0"
-                  title="#FA28FF"
+                  title="#7C1692"
+                >
+                  <div
+                    style="position: absolute; top: 5px; right: 5px; bottom: 5px; left: 5px; background: rgb(255, 255, 255); border-radius: 50%; opacity: 0;"
+                  />
+                </div>
+              </span>
+              <span>
+                <div
+                  style="background: rgb(149, 24, 78); height: 15px; width: 15px; cursor: pointer; position: relative; outline: none; float: left; margin-right: 5px; margin-bottom: 5px;"
+                  tabindex="0"
+                  title="#95184E"
+                >
+                  <div
+                    style="position: absolute; top: 5px; right: 5px; bottom: 5px; left: 5px; background: rgb(255, 255, 255); border-radius: 50%; opacity: 0;"
+                  />
+                </div>
+              </span>
+              <span>
+                <div
+                  style="background: rgb(116, 89, 52); height: 15px; width: 15px; cursor: pointer; position: relative; outline: none; float: left; margin-right: 5px; margin-bottom: 5px;"
+                  tabindex="0"
+                  title="#745934"
                 >
                   <div
                     style="position: absolute; top: 5px; right: 5px; bottom: 5px; left: 5px; background: rgb(255, 255, 255); border-radius: 50%; opacity: 0;"
@@ -398,9 +662,9 @@ exports[`ColorPickerInput showPicker 1`] = `
               </span>
               <span>
                 <div
-                  style="background: rgb(102, 102, 102); height: 15px; width: 15px; cursor: pointer; position: relative; outline: none; float: left; margin-right: 5px; margin-bottom: 5px;"
+                  style="background: rgb(124, 14, 14); height: 15px; width: 15px; cursor: pointer; position: relative; outline: none; float: left; margin-right: 5px; margin-bottom: 5px;"
                   tabindex="0"
-                  title="#666666"
+                  title="#7C0E0E"
                 >
                   <div
                     style="position: absolute; top: 5px; right: 5px; bottom: 5px; left: 5px; background: rgb(255, 255, 255); border-radius: 50%; opacity: 0;"
@@ -409,20 +673,20 @@ exports[`ColorPickerInput showPicker 1`] = `
               </span>
               <span>
                 <div
-                  style="background: rgb(179, 179, 179); height: 15px; width: 15px; cursor: pointer; position: relative; outline: none; float: left; margin-right: 5px; margin-bottom: 5px;"
+                  style="background: rgb(138, 70, 10); height: 15px; width: 15px; cursor: pointer; position: relative; outline: none; float: left; margin-right: 5px; margin-bottom: 5px;"
                   tabindex="0"
-                  title="#B3B3B3"
+                  title="#8A460A"
                 >
                   <div
-                    style="position: absolute; top: 5px; right: 5px; bottom: 5px; left: 5px; background: rgb(0, 0, 0); border-radius: 50%; opacity: 0;"
+                    style="position: absolute; top: 5px; right: 5px; bottom: 5px; left: 5px; background: rgb(255, 255, 255); border-radius: 50%; opacity: 0;"
                   />
                 </div>
               </span>
               <span>
                 <div
-                  style="background: rgb(159, 5, 0); height: 15px; width: 15px; cursor: pointer; position: relative; outline: none; float: left; margin-right: 5px; margin-bottom: 5px;"
+                  style="background: rgb(138, 110, 15); height: 15px; width: 15px; cursor: pointer; position: relative; outline: none; float: left; margin-right: 5px; margin-bottom: 5px;"
                   tabindex="0"
-                  title="#9F0500"
+                  title="#8A6E0F"
                 >
                   <div
                     style="position: absolute; top: 5px; right: 5px; bottom: 5px; left: 5px; background: rgb(255, 255, 255); border-radius: 50%; opacity: 0;"
@@ -431,9 +695,9 @@ exports[`ColorPickerInput showPicker 1`] = `
               </span>
               <span>
                 <div
-                  style="background: rgb(196, 81, 0); height: 15px; width: 15px; cursor: pointer; position: relative; outline: none; float: left; margin-right: 5px; margin-bottom: 5px;"
+                  style="background: rgb(108, 115, 13); height: 15px; width: 15px; cursor: pointer; position: relative; outline: none; float: left; margin-right: 5px; margin-bottom: 5px;"
                   tabindex="0"
-                  title="#C45100"
+                  title="#6C730D"
                 >
                   <div
                     style="position: absolute; top: 5px; right: 5px; bottom: 5px; left: 5px; background: rgb(255, 255, 255); border-radius: 50%; opacity: 0;"
@@ -442,20 +706,20 @@ exports[`ColorPickerInput showPicker 1`] = `
               </span>
               <span>
                 <div
-                  style="background: rgb(251, 158, 0); height: 15px; width: 15px; cursor: pointer; position: relative; outline: none; float: left; margin-right: 5px; margin-bottom: 5px;"
+                  style="background: rgb(57, 102, 20); height: 15px; width: 15px; cursor: pointer; position: relative; outline: none; float: left; margin-right: 5px; margin-bottom: 5px;"
                   tabindex="0"
-                  title="#FB9E00"
+                  title="#396614"
                 >
                   <div
-                    style="position: absolute; top: 5px; right: 5px; bottom: 5px; left: 5px; background: rgb(0, 0, 0); border-radius: 50%; opacity: 0;"
+                    style="position: absolute; top: 5px; right: 5px; bottom: 5px; left: 5px; background: rgb(255, 255, 255); border-radius: 50%; opacity: 0;"
                   />
                 </div>
               </span>
               <span>
                 <div
-                  style="background: rgb(128, 137, 0); height: 15px; width: 15px; cursor: pointer; position: relative; outline: none; float: left; margin-right: 5px; margin-bottom: 5px;"
+                  style="background: rgb(16, 132, 86); height: 15px; width: 15px; cursor: pointer; position: relative; outline: none; float: left; margin-right: 5px; margin-bottom: 5px;"
                   tabindex="0"
-                  title="#808900"
+                  title="#108456"
                 >
                   <div
                     style="position: absolute; top: 5px; right: 5px; bottom: 5px; left: 5px; background: rgb(255, 255, 255); border-radius: 50%; opacity: 0;"
@@ -464,9 +728,9 @@ exports[`ColorPickerInput showPicker 1`] = `
               </span>
               <span>
                 <div
-                  style="background: rgb(25, 77, 51); height: 15px; width: 15px; cursor: pointer; position: relative; outline: none; float: left; margin-right: 5px; margin-bottom: 5px;"
+                  style="background: rgb(23, 94, 130); height: 15px; width: 15px; cursor: pointer; position: relative; outline: none; float: left; margin-right: 5px; margin-bottom: 5px;"
                   tabindex="0"
-                  title="#194D33"
+                  title="#175E82"
                 >
                   <div
                     style="position: absolute; top: 5px; right: 5px; bottom: 5px; left: 5px; background: rgb(255, 255, 255); border-radius: 50%; opacity: 0;"
@@ -475,9 +739,9 @@ exports[`ColorPickerInput showPicker 1`] = `
               </span>
               <span>
                 <div
-                  style="background: rgb(12, 121, 125); height: 15px; width: 15px; cursor: pointer; position: relative; outline: none; float: left; margin-right: 5px; margin-bottom: 5px;"
+                  style="background: rgb(53, 21, 121); height: 15px; width: 15px; cursor: pointer; position: relative; outline: none; float: left; margin-right: 5px; margin-bottom: 5px;"
                   tabindex="0"
-                  title="#0C797D"
+                  title="#351579"
                 >
                   <div
                     style="position: absolute; top: 5px; right: 5px; bottom: 5px; left: 5px; background: rgb(255, 255, 255); border-radius: 50%; opacity: 0;"
@@ -486,9 +750,9 @@ exports[`ColorPickerInput showPicker 1`] = `
               </span>
               <span>
                 <div
-                  style="background: rgb(0, 98, 177); height: 15px; width: 15px; cursor: pointer; position: relative; outline: none; float: left; margin-right: 5px; margin-bottom: 5px;"
+                  style="background: rgb(101, 18, 120); height: 15px; width: 15px; cursor: pointer; position: relative; outline: none; float: left; margin-right: 5px; margin-bottom: 5px;"
                   tabindex="0"
-                  title="#0062B1"
+                  title="#651278"
                 >
                   <div
                     style="position: absolute; top: 5px; right: 5px; bottom: 5px; left: 5px; background: rgb(255, 255, 255); border-radius: 50%; opacity: 0;"
@@ -497,9 +761,9 @@ exports[`ColorPickerInput showPicker 1`] = `
               </span>
               <span>
                 <div
-                  style="background: rgb(101, 50, 148); height: 15px; width: 15px; cursor: pointer; position: relative; outline: none; float: left; margin-right: 5px; margin-bottom: 5px;"
+                  style="background: rgb(114, 19, 60); height: 15px; width: 15px; cursor: pointer; position: relative; outline: none; float: left; margin-right: 5px; margin-bottom: 5px;"
                   tabindex="0"
-                  title="#653294"
+                  title="#72133C"
                 >
                   <div
                     style="position: absolute; top: 5px; right: 5px; bottom: 5px; left: 5px; background: rgb(255, 255, 255); border-radius: 50%; opacity: 0;"
@@ -508,9 +772,9 @@ exports[`ColorPickerInput showPicker 1`] = `
               </span>
               <span>
                 <div
-                  style="background: rgb(171, 20, 158); height: 15px; width: 15px; cursor: pointer; position: relative; outline: none; float: left; margin-right: 5px; margin-bottom: 5px;"
+                  style="background: rgb(99, 76, 44); height: 15px; width: 15px; cursor: pointer; position: relative; outline: none; float: left; margin-right: 5px; margin-bottom: 5px;"
                   tabindex="0"
-                  title="#AB149E"
+                  title="#634C2C"
                 >
                   <div
                     style="position: absolute; top: 5px; right: 5px; bottom: 5px; left: 5px; background: rgb(255, 255, 255); border-radius: 50%; opacity: 0;"
@@ -612,7 +876,7 @@ exports[`ColorPickerInput with button text 1`] = `
     >
       Select color...
       <i
-        class="fa fa-caret-down"
+        class="fa fa-lg fa-angle-down"
       />
     </button>
     <i
@@ -635,9 +899,13 @@ exports[`ColorPickerInput without value 1`] = `
       class="color-picker__button btn btn-default"
       type="button"
     >
-      None
+      <span
+        class="color-picker__placeholder"
+      >
+        None
+      </span>
       <i
-        class="fa fa-caret-down"
+        class="fa fa-lg fa-angle-down"
       />
     </button>
     <div
diff --git a/packages/components/src/theme/charts.scss b/packages/components/src/theme/charts.scss
index 5c06b956a4..aaa48b87d2 100644
--- a/packages/components/src/theme/charts.scss
+++ b/packages/components/src/theme/charts.scss
@@ -206,14 +206,14 @@
 
 .lk-modal .chart-builder-modal .modal-body {
     display: flex;
-    flex: 1;
     gap: 8px;
     padding: 0;
     overflow: hidden;
 }
 
 .chart-settings {
-    width: 300px;
+    flex: 1;
+    min-width: 350px;
     border-right: solid 1px $gray-border-light;
     padding: 15px;
     overflow-y: auto;
@@ -225,7 +225,7 @@
 }
 
 .chart-builder-modal__chart-preview {
-    flex: 1;
+    flex: 3;
     overflow: auto;
     padding-top: 15px;
     display: flex;
@@ -359,3 +359,17 @@
 .curve-fit-value-cell {
     text-align: right;
 }
+
+.letter-icon {
+    display: inline-flex;
+    width: 12px;
+    height: 12px;
+    font-size: 10px;
+    line-height: 12px;
+    align-items: center;
+    justify-content: center;
+    vertical-align: text-top;
+    border: 1px solid $gray;
+    border-radius: 2px;
+    margin-top: 1px;
+}
diff --git a/packages/components/src/theme/form.scss b/packages/components/src/theme/form.scss
index fc7e4df87f..28a2bb97dd 100644
--- a/packages/components/src/theme/form.scss
+++ b/packages/components/src/theme/form.scss
@@ -234,9 +234,14 @@ textarea.form-control {
 .color-picker {
     position: relative;
 };
+.color-picker__button {
+    padding: 8px 12px;
+}
 .color-picker__button > i {
     display: inline-block;
     margin-left: 0.5em;
+    color: $border-color;
+    font-weight: bold;
 }
 .color-picker__chip {
     display: inline-block;
@@ -273,6 +278,9 @@ textarea.form-control {
     display: inline-block;
     padding-left: 4px;
 }
+.color-picker__placeholder {
+    color: #808080; // match select input placeholder text color
+}
 
 .color-icon__circle-small {
     display: inline-block;
@@ -282,6 +290,14 @@ textarea.form-control {
     width: 12px;
 }
 
+.color-icon__chip-small {
+    display: inline-block;
+    border-radius: 2px;
+    border: solid 1px $gray;
+    height: 12px;
+    width: 12px;
+}
+
 .color-icon__circle {
     display: inline-block;
     border-radius: 50%;