diff --git a/app/charts/area/areas-state.tsx b/app/charts/area/areas-state.tsx
index 9d429103c..70eb281cf 100644
--- a/app/charts/area/areas-state.tsx
+++ b/app/charts/area/areas-state.tsx
@@ -54,7 +54,7 @@ import { useSize } from "@/charts/shared/use-size";
 import { AreaConfig } from "@/configurator";
 import { Observation } from "@/domain/data";
 import { useFormatNumber, useTimeFormatUnit } from "@/formatters";
-import { getPalette } from "@/palettes";
+import { getPaletteId } from "@/palettes";
 import { useChartInteractiveFilters } from "@/stores/interactive-filters";
 import { sortByIndex } from "@/utils/array";
 import {
@@ -248,7 +248,8 @@ const useAreasState = (
     const xScaleTimeRange = scaleTime().domain(xScaleTimeRangeDomain);
     const colors = scaleOrdinal<string, string>();
 
-    if (segmentDimension && fields.color) {
+    if (segmentDimension && fields.color.type === "segment") {
+      const segmentColor = fields.color;
       const orderedSegmentLabelsAndColors = allSegments.map((segment) => {
         const dvIri =
           segmentsByAbbreviationOrLabel.get(segment)?.value ??
@@ -257,10 +258,7 @@ const useAreasState = (
 
         return {
           label: segment,
-          color:
-            fields.color.type === "segment"
-              ? fields.color.colorMapping![dvIri] ?? schemeCategory10[0]
-              : schemeCategory10[0],
+          color: segmentColor.colorMapping[dvIri] ?? schemeCategory10[0],
         };
       });
 
@@ -268,7 +266,7 @@ const useAreasState = (
       colors.range(orderedSegmentLabelsAndColors.map((s) => s.color));
     } else {
       colors.domain(allSegments);
-      colors.range(getPalette(fields.color.paletteId));
+      colors.range(getPaletteId(fields.color.paletteId));
     }
 
     colors.unknown(() => undefined);
diff --git a/app/charts/chart-config-ui-options.ts b/app/charts/chart-config-ui-options.ts
index d5aa0f456..f76060c9b 100644
--- a/app/charts/chart-config-ui-options.ts
+++ b/app/charts/chart-config-ui-options.ts
@@ -19,7 +19,6 @@ import {
   ChartConfig,
   ChartSubType,
   ChartType,
-  ColorField,
   ColorScaleType,
   ColumnConfig,
   ColumnSegmentField,
@@ -29,6 +28,7 @@ import {
   ComponentType,
   GenericField,
   LineConfig,
+  MapColorField,
   MapConfig,
   PaletteType,
   PieConfig,
@@ -56,7 +56,7 @@ import {
   isTemporalEntityDimension,
   isTemporalOrdinalDimension,
 } from "@/domain/data";
-import { getDefaultCategoricalPaletteName, getPalette } from "@/palettes";
+import { getDefaultCategoricalPaletteId, getPaletteId } from "@/palettes";
 
 /**
  * This module controls chart controls displayed in the UI.
@@ -65,7 +65,7 @@ import { getDefaultCategoricalPaletteName, getPalette } from "@/palettes";
 
 type BaseEncodingFieldType = "animation";
 type MapEncodingFieldType = "baseLayer" | "areaLayer" | "symbolLayer";
-type XYEncodingFieldType = "x" | "y" | "segment";
+type XYEncodingFieldType = "x" | "y" | "segment" | "color";
 export type EncodingFieldType =
   | BaseEncodingFieldType
   | MapEncodingFieldType
@@ -175,7 +175,7 @@ const onColorComponentIdChange: OnEncodingOptionChange<string, MapConfig> = (
 ) => {
   const basePath = `fields["${field}"]`;
   const components = [...dimensions, ...measures];
-  let newField: ColorField = DEFAULT_FIXED_COLOR_FIELD;
+  let newField: MapColorField = DEFAULT_FIXED_COLOR_FIELD;
   const component = components.find((d) => d.id === id);
   const currentColorComponentId = get(
     chartConfig,
@@ -192,7 +192,7 @@ const onColorComponentIdChange: OnEncodingOptionChange<string, MapConfig> = (
       MULTI_FILTER_ENABLED_COMPONENTS.includes(component.__typename) ||
       isOrdinalMeasure(component)
     ) {
-      const palette = getDefaultCategoricalPaletteName(component, colorPalette);
+      const palette = getDefaultCategoricalPaletteId(component, colorPalette);
       newField = getDefaultCategoricalColorField({
         id,
         palette,
@@ -483,7 +483,7 @@ export const defaultSegmentOnChange: OnEncodingChange<
 > = (id, { chartConfig, dimensions, measures, selectedValues }) => {
   const components = [...dimensions, ...measures];
   const component = components.find((d) => d.id === id);
-  const palette = getDefaultCategoricalPaletteName(
+  const palette = getDefaultCategoricalPaletteId(
     component,
     chartConfig.fields.color && "paletteId" in chartConfig.fields.color
       ? chartConfig.fields.color.paletteId
@@ -958,7 +958,7 @@ const chartConfigOptionsUISpec: ChartSpecs = {
               const { chartConfig } = options;
               const { fields } = chartConfig;
               const { color } = fields;
-              const palette = getPalette(color.paletteId);
+              const palette = getPaletteId(color.paletteId);
               const newColorMapping = Object.fromEntries(
                 ids.map((id, i) => [id, color.colorMapping[i] ?? palette[i]])
               );
diff --git a/app/charts/column/columns-grouped-state.tsx b/app/charts/column/columns-grouped-state.tsx
index 279e912d1..7e4b63873 100644
--- a/app/charts/column/columns-grouped-state.tsx
+++ b/app/charts/column/columns-grouped-state.tsx
@@ -44,7 +44,7 @@ import { useSize } from "@/charts/shared/use-size";
 import { ColumnConfig } from "@/configurator";
 import { Observation } from "@/domain/data";
 import { formatNumberWithUnit, useFormatNumber } from "@/formatters";
-import { getPalette } from "@/palettes";
+import { getPaletteId } from "@/palettes";
 import { sortByIndex } from "@/utils/array";
 import {
   getSortingOrders,
@@ -189,7 +189,8 @@ const useColumnsGroupedState = (
   } = useMemo(() => {
     const colors = scaleOrdinal<string, string>();
 
-    if (fields.segment && segmentDimension && fields.color) {
+    if (fields.segment && segmentDimension && fields.color.type === "segment") {
+      const segmentColor = fields.color;
       const orderedSegmentLabelsAndColors = allSegments.map((segment) => {
         const dvIri =
           segmentsByAbbreviationOrLabel.get(segment)?.value ||
@@ -198,10 +199,7 @@ const useColumnsGroupedState = (
 
         return {
           label: segment,
-          color:
-            fields.color.type === "segment"
-              ? fields.color.colorMapping![dvIri] ?? schemeCategory10[0]
-              : schemeCategory10[0],
+          color: segmentColor.colorMapping![dvIri] ?? schemeCategory10[0],
         };
       });
 
@@ -209,7 +207,7 @@ const useColumnsGroupedState = (
       colors.range(orderedSegmentLabelsAndColors.map((s) => s.color));
     } else {
       colors.domain(allSegments);
-      colors.range(getPalette(fields.color.paletteId));
+      colors.range(getPaletteId(fields.color.paletteId));
     }
 
     colors.unknown(() => undefined);
diff --git a/app/charts/column/columns-stacked-state.tsx b/app/charts/column/columns-stacked-state.tsx
index 9661bacde..38a26a6b1 100644
--- a/app/charts/column/columns-stacked-state.tsx
+++ b/app/charts/column/columns-stacked-state.tsx
@@ -56,7 +56,7 @@ import { useSize } from "@/charts/shared/use-size";
 import { ColumnConfig } from "@/configurator";
 import { Observation } from "@/domain/data";
 import { useFormatNumber } from "@/formatters";
-import { getPalette } from "@/palettes";
+import { getPaletteId } from "@/palettes";
 import { useChartInteractiveFilters } from "@/stores/interactive-filters";
 import { sortByIndex } from "@/utils/array";
 import {
@@ -224,7 +224,12 @@ const useColumnsStackedState = (
   } = useMemo(() => {
     const colors = scaleOrdinal<string, string>();
 
-    if (fields.segment && segmentsByAbbreviationOrLabel && fields.color) {
+    if (
+      fields.segment &&
+      segmentsByAbbreviationOrLabel &&
+      fields.color.type === "segment"
+    ) {
+      const segmentColor = fields.color;
       const orderedSegmentLabelsAndColors = allSegments.map((segment) => {
         // FIXME: Labels in observations can differ from dimension values because the latter can be concatenated to only appear once per value
         // See https://github.com/visualize-admin/visualization-tool/issues/97
@@ -240,10 +245,7 @@ const useColumnsStackedState = (
 
         return {
           label: segment,
-          color:
-            fields.color.type === "segment"
-              ? fields.color.colorMapping![dvIri] ?? schemeCategory10[0]
-              : schemeCategory10[0],
+          color: segmentColor.colorMapping![dvIri] ?? schemeCategory10[0],
         };
       });
 
@@ -251,7 +253,7 @@ const useColumnsStackedState = (
       colors.range(orderedSegmentLabelsAndColors.map((s) => s.color));
     } else {
       colors.domain(allSegments);
-      colors.range(getPalette(fields.color.paletteId));
+      colors.range(getPaletteId(fields.color.paletteId));
     }
 
     colors.unknown(() => undefined);
diff --git a/app/charts/index.ts b/app/charts/index.ts
index 5f5d8f0c6..cf2631e75 100644
--- a/app/charts/index.ts
+++ b/app/charts/index.ts
@@ -23,6 +23,7 @@ import {
   ChartConfigsAdjusters,
   ChartSegmentField,
   ChartType,
+  ColorField,
   ColumnSegmentField,
   ComboChartType,
   ComboLineColumnFields,
@@ -32,7 +33,6 @@ import {
   Filters,
   GenericField,
   GenericFields,
-  GenericSegmentField,
   InteractiveFiltersAdjusters,
   InteractiveFiltersConfig,
   isAreaConfig,
@@ -51,7 +51,6 @@ import {
   MapConfig,
   MapSymbolLayer,
   Meta,
-  NewColorField,
   PieSegmentField,
   RegularChartType,
   ScatterPlotSegmentField,
@@ -84,8 +83,9 @@ import {
 import { truthy } from "@/domain/types";
 import {
   DEFAULT_CATEGORICAL_PALETTE_NAME,
-  getDefaultCategoricalPaletteName,
+  getDefaultCategoricalPaletteId,
 } from "@/palettes";
+import { theme } from "@/themes/federal";
 import { bfs } from "@/utils/bfs";
 import { CHART_CONFIG_VERSION } from "@/utils/chart-config/constants";
 import { createChartId } from "@/utils/create-chart-id";
@@ -290,7 +290,7 @@ const getInitialAreaLayer = ({
   component: GeoShapesDimension;
   measure: Measure;
 }): MapAreaLayer => {
-  const palette = getDefaultCategoricalPaletteName(measure);
+  const palette = getDefaultCategoricalPaletteId(measure);
 
   return {
     componentId: component.id,
@@ -400,12 +400,9 @@ export const getInitialConfig = (
           x: { componentId: areaXComponentId },
           y: { componentId: numericalMeasures[0].id, imputationType: "none" },
           color: {
-            type: "segment",
+            type: "single",
             paletteId: DEFAULT_CATEGORICAL_PALETTE_NAME,
-            colorMapping: mapValueIrisToColor({
-              palette: DEFAULT_CATEGORICAL_PALETTE_NAME,
-              dimensionValues: dimensions[0].values,
-            }),
+            color: theme.palette.primary.main,
           },
         },
       };
@@ -434,7 +431,7 @@ export const getInitialConfig = (
           color: {
             type: "single",
             paletteId: DEFAULT_CATEGORICAL_PALETTE_NAME,
-            color: dimensions[0].values[0].color || "#000",
+            color: theme.palette.primary.main,
           },
         },
       };
@@ -453,7 +450,7 @@ export const getInitialConfig = (
           color: {
             type: "single",
             paletteId: DEFAULT_CATEGORICAL_PALETTE_NAME,
-            color: dimensions[0].values[0].color || "#000",
+            color: theme.palette.primary.main,
           },
         },
       };
@@ -496,7 +493,7 @@ export const getInitialConfig = (
       const pieSegmentComponent =
         getCategoricalDimensions(dimensions)[0] ??
         getGeoDimensions(dimensions)[0];
-      const piePalette = getDefaultCategoricalPaletteName(pieSegmentComponent);
+      const piePalette = getDefaultCategoricalPaletteId(pieSegmentComponent);
 
       return {
         ...getGenericConfigProps(),
@@ -522,7 +519,7 @@ export const getInitialConfig = (
       const scatterplotSegmentComponent =
         getCategoricalDimensions(dimensions)[0] ||
         getGeoDimensions(dimensions)[0];
-      const scatterplotPalette = getDefaultCategoricalPaletteName(
+      const scatterplotPalette = getDefaultCategoricalPaletteId(
         scatterplotSegmentComponent
       );
 
@@ -556,7 +553,7 @@ export const getInitialConfig = (
                 color: {
                   type: "single",
                   paletteId: DEFAULT_CATEGORICAL_PALETTE_NAME,
-                  color: dimensions[0].values[0].color || "#000",
+                  color: theme.palette.primary.main,
                 },
               }),
         },
@@ -973,7 +970,7 @@ const chartConfigsAdjusters: ChartConfigsAdjusters = {
         measures,
       }) => {
         let newSegment: ColumnSegmentField | undefined;
-        let newColor: NewColorField | undefined;
+        let newColor: ColorField | undefined;
 
         const yMeasure = measures.find(
           (d) => d.id === newChartConfig.fields.y.componentId
@@ -981,19 +978,19 @@ const chartConfigsAdjusters: ChartConfigsAdjusters = {
 
         // When switching from a table chart, a whole fields object is passed as oldValue.
         if (oldChartConfig.chartType === "table") {
-          const tableSegment = convertTableFieldsToSegmentField({
+          const tableField = convertTableFieldsToSegmentAndColorFields({
             fields: oldValue as TableFields,
             dimensions,
             measures,
           });
 
-          if (tableSegment) {
+          if (tableField) {
             newSegment = {
-              ...tableSegment.segment,
+              ...tableField.segment,
               sorting: DEFAULT_SORTING,
               type: disableStacked(yMeasure) ? "grouped" : "stacked",
             };
-            newColor = tableSegment.color;
+            newColor = tableField.color;
           }
           // Otherwise we are dealing with a segment field. We shouldn't take
           // the segment from oldValue if the component has already been used as
@@ -1026,10 +1023,8 @@ const chartConfigsAdjusters: ChartConfigsAdjusters = {
         }
 
         return produce(newChartConfig, (draft) => {
-          if (newSegment) {
+          if (newSegment && newColor?.type === "segment") {
             draft.fields.segment = newSegment;
-          }
-          if (newColor?.type === "segment") {
             draft.fields.color = newColor;
           }
         });
@@ -1083,18 +1078,18 @@ const chartConfigsAdjusters: ChartConfigsAdjusters = {
         measures,
       }) => {
         let newSegment: LineSegmentField | undefined;
-        let newColor: NewColorField | undefined;
+        let newColor: ColorField | undefined;
 
         if (oldChartConfig.chartType === "table") {
-          const tableSegment = convertTableFieldsToSegmentField({
+          const tableField = convertTableFieldsToSegmentAndColorFields({
             fields: oldValue as TableFields,
             dimensions,
             measures,
           });
 
-          if (tableSegment) {
-            newSegment = tableSegment.segment;
-            newColor = tableSegment.color;
+          if (tableField) {
+            newSegment = tableField.segment;
+            newColor = tableField.color;
           }
         } else {
           const oldSegment = oldValue as Exclude<typeof oldValue, TableFields>;
@@ -1124,10 +1119,8 @@ const chartConfigsAdjusters: ChartConfigsAdjusters = {
         }
 
         return produce(newChartConfig, (draft) => {
-          if (newSegment) {
+          if (newSegment && newColor?.type === "segment") {
             draft.fields.segment = newSegment;
-          }
-          if (newColor?.type === "segment") {
             draft.fields.color = newColor;
           }
         });
@@ -1182,21 +1175,21 @@ const chartConfigsAdjusters: ChartConfigsAdjusters = {
         }
 
         let newSegment: AreaSegmentField | undefined;
-        let newColor: NewColorField | undefined;
+        let newColor: ColorField | undefined;
 
         if (oldChartConfig.chartType === "table") {
-          const tableSegment = convertTableFieldsToSegmentField({
+          const tableField = convertTableFieldsToSegmentAndColorFields({
             fields: oldValue as TableFields,
             dimensions,
             measures,
           });
 
-          if (tableSegment) {
+          if (tableField) {
             newSegment = {
-              ...tableSegment.segment,
+              ...tableField.segment,
               sorting: DEFAULT_SORTING,
             };
-            newColor = tableSegment.color;
+            newColor = tableField.color;
           }
         } else {
           const oldSegment = oldValue as Exclude<typeof oldValue, TableFields>;
@@ -1225,10 +1218,8 @@ const chartConfigsAdjusters: ChartConfigsAdjusters = {
         }
 
         return produce(newChartConfig, (draft) => {
-          if (newSegment) {
+          if (newSegment && newColor?.type === "segment") {
             draft.fields.segment = newSegment;
-          }
-          if (newColor?.type === "segment") {
             draft.fields.color = newColor;
           }
         });
@@ -1268,18 +1259,18 @@ const chartConfigsAdjusters: ChartConfigsAdjusters = {
         measures,
       }) => {
         let newSegment: ScatterPlotSegmentField | undefined;
-        let newColor: NewColorField | undefined;
+        let newColor: ColorField | undefined;
 
         if (oldChartConfig.chartType === "table") {
-          const tableSegment = convertTableFieldsToSegmentField({
+          const tableField = convertTableFieldsToSegmentAndColorFields({
             fields: oldValue as TableFields,
             dimensions,
             measures,
           });
 
-          if (tableSegment) {
-            newSegment = tableSegment.segment;
-            newColor = tableSegment.color;
+          if (tableField) {
+            newSegment = tableField.segment;
+            newColor = tableField.color;
           }
         } else {
           const oldSegment = oldValue as Exclude<typeof oldValue, TableFields>;
@@ -1289,10 +1280,8 @@ const chartConfigsAdjusters: ChartConfigsAdjusters = {
         }
 
         return produce(newChartConfig, (draft) => {
-          if (newSegment) {
+          if (newSegment && newColor?.type === "segment") {
             draft.fields.segment = newSegment;
-          }
-          if (newColor?.type === "segment") {
             draft.fields.color = newColor;
           }
         });
@@ -1327,21 +1316,21 @@ const chartConfigsAdjusters: ChartConfigsAdjusters = {
         measures,
       }) => {
         let newSegment: PieSegmentField | undefined;
-        let newColor: NewColorField | undefined;
+        let newColor: ColorField | undefined;
 
         if (oldChartConfig.chartType === "table") {
-          const tableSegment = convertTableFieldsToSegmentField({
+          const tableField = convertTableFieldsToSegmentAndColorFields({
             fields: oldValue as TableFields,
             dimensions,
             measures,
           });
 
-          if (tableSegment) {
+          if (tableField) {
             newSegment = {
-              ...tableSegment.segment,
+              ...tableField.segment,
               sorting: DEFAULT_SORTING,
             };
-            newColor = tableSegment.color;
+            newColor = tableField.color;
           }
         } else {
           const oldSegment = oldValue as Exclude<typeof oldValue, TableFields>;
@@ -1366,10 +1355,8 @@ const chartConfigsAdjusters: ChartConfigsAdjusters = {
         }
 
         return produce(newChartConfig, (draft) => {
-          if (newSegment) {
+          if (newSegment && newColor?.type === "segment") {
             draft.fields.segment = newSegment;
-          }
-          if (newColor?.type === "segment") {
             draft.fields.color = newColor;
           }
         });
@@ -2274,7 +2261,7 @@ export const getFieldComponentId = (
   return (fields as $IntentionalAny)[field]?.componentId;
 };
 
-const convertTableFieldsToSegmentField = ({
+const convertTableFieldsToSegmentAndColorFields = ({
   fields,
   dimensions,
   measures,
@@ -2282,7 +2269,7 @@ const convertTableFieldsToSegmentField = ({
   fields: TableFields;
   dimensions: Dimension[];
   measures: Measure[];
-}): { segment: GenericSegmentField; color: NewColorField } | undefined => {
+}): { segment: GenericField; color: ColorField } | undefined => {
   const groupedColumns = group(Object.values(fields), (d) => d.isGroup)
     .get(true)
     ?.filter((d) => SEGMENT_ENABLED_COMPONENTS.includes(d.componentType))
@@ -2297,7 +2284,7 @@ const convertTableFieldsToSegmentField = ({
   const actualComponent = [...dimensions, ...measures].find(
     (d) => d.id === componentId
   ) as Component;
-  const palette = getDefaultCategoricalPaletteName(actualComponent);
+  const palette = getDefaultCategoricalPaletteId(actualComponent);
 
   return {
     segment: {
diff --git a/app/charts/line/lines-state.tsx b/app/charts/line/lines-state.tsx
index 1fed350e7..42089d7ec 100644
--- a/app/charts/line/lines-state.tsx
+++ b/app/charts/line/lines-state.tsx
@@ -43,7 +43,7 @@ import {
   useFormatNumber,
   useTimeFormatUnit,
 } from "@/formatters";
-import { getPalette } from "@/palettes";
+import { getPaletteId } from "@/palettes";
 import { sortByIndex } from "@/utils/array";
 import {
   getSortingOrders,
@@ -215,7 +215,7 @@ const useLinesState = (
     colors.range(orderedSegmentLabelsAndColors.map((s) => s.color));
   } else {
     colors.domain(allSegments);
-    colors.range(getPalette(fields.color.paletteId));
+    colors.range(getPaletteId(fields.color.paletteId));
   }
 
   // Dimensions
diff --git a/app/charts/pie/pie-state.tsx b/app/charts/pie/pie-state.tsx
index eebbbeb0c..b1654e383 100644
--- a/app/charts/pie/pie-state.tsx
+++ b/app/charts/pie/pie-state.tsx
@@ -26,7 +26,7 @@ import { useSize } from "@/charts/shared/use-size";
 import { PieConfig } from "@/configurator";
 import { Dimension, Observation } from "@/domain/data";
 import { formatNumberWithUnit, useFormatNumber } from "@/formatters";
-import { getPalette } from "@/palettes";
+import { getPaletteId } from "@/palettes";
 import {
   getSortingOrders,
   makeDimensionValueSorters,
@@ -121,7 +121,7 @@ const usePieState = (
       colors.range(orderedSegmentLabelsAndColors.map((s) => s.color));
     } else {
       colors.domain(allSegments);
-      colors.range(getPalette(fields.color.paletteId));
+      colors.range(getPaletteId(fields.color.paletteId));
     }
     // Do not let the scale be implicitly extended by children calling it
     // on unknown values
diff --git a/app/charts/scatterplot/scatterplot-state.tsx b/app/charts/scatterplot/scatterplot-state.tsx
index d3deae1cc..f3bf9ad38 100644
--- a/app/charts/scatterplot/scatterplot-state.tsx
+++ b/app/charts/scatterplot/scatterplot-state.tsx
@@ -26,7 +26,7 @@ import { useSize } from "@/charts/shared/use-size";
 import { ScatterPlotConfig, SortingField } from "@/configurator";
 import { Observation } from "@/domain/data";
 import { useFormatNumber } from "@/formatters";
-import { getPalette } from "@/palettes";
+import { getPaletteId } from "@/palettes";
 import {
   getSortingOrders,
   makeDimensionValueSorters,
@@ -147,7 +147,7 @@ const useScatterplotState = (
     colors.range(orderedSegmentLabelsAndColors.map((s) => s.color));
   } else {
     colors.domain(allSegments);
-    colors.range(getPalette(fields.color.paletteId));
+    colors.range(getPaletteId(fields.color.paletteId));
   }
   // Dimensions
   const { left, bottom } = useChartPadding({
diff --git a/app/charts/shared/legend-color.tsx b/app/charts/shared/legend-color.tsx
index a8d4a8b79..2b410e024 100644
--- a/app/charts/shared/legend-color.tsx
+++ b/app/charts/shared/legend-color.tsx
@@ -15,7 +15,7 @@ import { OpenMetadataPanelWrapper } from "@/components/metadata-panel";
 import { TooltipTitle } from "@/components/tooltip-utils";
 import {
   ChartConfig,
-  GenericSegmentField,
+  GenericField,
   MapConfig,
   isSegmentInConfig,
   useChartConfigFilters,
@@ -147,7 +147,7 @@ const useLegendGroups = ({
 
   const segmentField = (
     isSegmentInConfig(chartConfig) ? chartConfig.fields.segment : null
-  ) as GenericSegmentField | null | undefined;
+  ) as GenericField | null | undefined;
   const segmentFilters = segmentField?.componentId
     ? filters[segmentField.componentId]
     : null;
diff --git a/app/config-types.ts b/app/config-types.ts
index ad0e82078..0bcd5567a 100644
--- a/app/config-types.ts
+++ b/app/config-types.ts
@@ -238,7 +238,7 @@ const ColorField = t.union([
   MeasuresColorField,
 ]);
 //FIXME: Remove current type called ColorField and replace it with the new one
-export type NewColorField = t.TypeOf<typeof ColorField>;
+export type ColorField = t.TypeOf<typeof ColorField>;
 
 const GenericField = t.intersection([
   t.type({ componentId: t.string }),
@@ -249,9 +249,6 @@ export type GenericField = t.TypeOf<typeof GenericField>;
 const GenericFields = t.record(t.string, t.union([GenericField, t.undefined]));
 export type GenericFields = t.TypeOf<typeof GenericFields>;
 
-const GenericSegmentField = GenericField;
-export type GenericSegmentField = t.TypeOf<typeof GenericSegmentField>;
-
 const AnimationType = t.union([t.literal("continuous"), t.literal("stepped")]);
 export type AnimationType = t.TypeOf<typeof AnimationType>;
 
@@ -300,7 +297,7 @@ const ChartSubType = t.union([t.literal("stacked"), t.literal("grouped")]);
 export type ChartSubType = t.TypeOf<typeof ChartSubType>;
 
 const ColumnSegmentField = t.intersection([
-  GenericSegmentField,
+  GenericField,
   SortingField,
   t.type({ type: ChartSubType }),
 ]);
@@ -339,7 +336,7 @@ const ColumnConfig = t.intersection([
 export type ColumnFields = t.TypeOf<typeof ColumnFields>;
 export type ColumnConfig = t.TypeOf<typeof ColumnConfig>;
 
-const LineSegmentField = t.intersection([GenericSegmentField, SortingField]);
+const LineSegmentField = t.intersection([GenericField, SortingField]);
 export type LineSegmentField = t.TypeOf<typeof LineSegmentField>;
 
 const LineFields = t.intersection([
@@ -366,7 +363,7 @@ const LineConfig = t.intersection([
 export type LineFields = t.TypeOf<typeof LineFields>;
 export type LineConfig = t.TypeOf<typeof LineConfig>;
 
-const AreaSegmentField = t.intersection([GenericSegmentField, SortingField]);
+const AreaSegmentField = t.intersection([GenericField, SortingField]);
 export type AreaSegmentField = t.TypeOf<typeof AreaSegmentField>;
 
 const ImputationType = t.union([
@@ -404,7 +401,7 @@ const AreaConfig = t.intersection([
 export type AreaFields = t.TypeOf<typeof AreaFields>;
 export type AreaConfig = t.TypeOf<typeof AreaConfig>;
 
-const ScatterPlotSegmentField = GenericSegmentField;
+const ScatterPlotSegmentField = GenericField;
 export type ScatterPlotSegmentField = t.TypeOf<typeof ScatterPlotSegmentField>;
 
 const ScatterPlotFields = t.intersection([
@@ -432,7 +429,7 @@ const ScatterPlotConfig = t.intersection([
 export type ScatterPlotFields = t.TypeOf<typeof ScatterPlotFields>;
 export type ScatterPlotConfig = t.TypeOf<typeof ScatterPlotConfig>;
 
-const PieSegmentField = t.intersection([GenericSegmentField, SortingField]);
+const PieSegmentField = t.intersection([GenericField, SortingField]);
 export type PieSegmentField = t.TypeOf<typeof PieSegmentField>;
 
 const PieFields = t.intersection([
@@ -642,7 +639,7 @@ const NumericalColorField = t.intersection([
 ]);
 export type NumericalColorField = t.TypeOf<typeof NumericalColorField>;
 
-export type ColorField =
+export type MapColorField =
   | FixedColorField
   | CategoricalColorField
   | NumericalColorField;
@@ -902,6 +899,19 @@ export const isSegmentInConfig = (
   );
 };
 
+export const isColorInConfig = (
+  chartConfig: ChartConfig
+): chartConfig is
+  | AreaConfig
+  | ColumnConfig
+  | LineConfig
+  | PieConfig
+  | ScatterPlotConfig => {
+  return ["area", "column", "line", "pie", "scatterplot"].includes(
+    chartConfig.chartType
+  );
+};
+
 export const isSortingInConfig = (
   chartConfig: ChartConfig
 ): chartConfig is AreaConfig | ColumnConfig | LineConfig | PieConfig => {
diff --git a/app/configurator/components/chart-controls/color-palette.tsx b/app/configurator/components/chart-controls/color-palette.tsx
index 4ea39b2a9..4e132393f 100644
--- a/app/configurator/components/chart-controls/color-palette.tsx
+++ b/app/configurator/components/chart-controls/color-palette.tsx
@@ -2,6 +2,7 @@ import { Trans } from "@lingui/macro";
 import {
   Box,
   Button,
+  Divider,
   MenuItem,
   Select,
   SelectProps,
@@ -18,6 +19,7 @@ import { Label } from "@/components/form";
 import {
   ConfiguratorStateConfiguringChart,
   getChartConfig,
+  isColorInConfig,
   isConfiguring,
   useConfiguratorState,
 } from "@/configurator";
@@ -28,7 +30,7 @@ import {
   categoricalPalettes,
   divergingSteppedPalettes,
   getDefaultCategoricalPalette,
-  getPalette,
+  getPaletteId,
 } from "@/palettes";
 import useEvent from "@/utils/use-event";
 
@@ -76,12 +78,14 @@ export const ColorPalette = ({
       ? [defaultPalette, ...categoricalPalettes]
       : categoricalPalettes;
 
-  const currentPaletteName = get(
-    chartConfig,
-    `fields["${chartConfig.activeField}"].${
-      colorConfigPath ? `${colorConfigPath}.` : ""
-    }palette`
-  );
+  const currentPaletteName = isColorInConfig(chartConfig)
+    ? get(chartConfig, `fields.color.paletteId`)
+    : get(
+        chartConfig,
+        `fields["${chartConfig.activeField}"].${
+          colorConfigPath ? `${colorConfigPath}.` : ""
+        }palette`
+      );
 
   const currentPalette =
     palettes.find((p) => p.value === currentPaletteName) ?? palettes[0];
@@ -91,18 +95,39 @@ export const ColorPalette = ({
     if (!component || !palette) {
       return;
     }
-
-    dispatch({
-      type: "CHART_PALETTE_CHANGED",
-      value: {
-        type: chartConfig.fields.color.type,
-        paletteId: palette.value,
-        colorMapping: mapValueIrisToColor({
+    if (isColorInConfig(chartConfig)) {
+      dispatch({
+        type: "CHART_PALETTE_CHANGED_NEW",
+        value:
+          chartConfig.fields.color.type === "single"
+            ? {
+                type: chartConfig.fields.color.type,
+                paletteId: palette.value,
+                color: palette.colors[0],
+              }
+            : {
+                type: chartConfig.fields.color.type,
+                paletteId: palette.value,
+                colorMapping: mapValueIrisToColor({
+                  palette: palette.value,
+                  dimensionValues: component.values,
+                }),
+              },
+      });
+    } else {
+      dispatch({
+        type: "CHART_PALETTE_CHANGED",
+        value: {
+          field,
+          colorConfigPath,
           palette: palette.value,
-          dimensionValues: component.values,
-        }),
-      },
-    });
+          colorMapping: mapValueIrisToColor({
+            palette: palette.value,
+            dimensionValues: component.values,
+          }),
+        },
+      });
+    }
   });
 
   return (
@@ -125,13 +150,41 @@ export const ColorPalette = ({
         value={currentPalette.value}
         onChange={handleChangePalette}
       >
+        <Button
+          variant="text"
+          sx={{
+            width: "100%",
+            paddingY: "12px",
+            paddingX: "16px",
+          }}
+        >
+          Add color palette
+        </Button>
+        <Box
+          sx={{
+            paddingTop: "12px",
+            paddingX: "16px",
+            display: "flex",
+            gap: "8px",
+            flexDirection: "column",
+          }}
+        >
+          <Typography variant="caption" fontWeight={700} align="left">
+            Visualize color palattes
+          </Typography>
+          <Divider sx={{ width: "100%", paddingY: "4px" }} />
+        </Box>
         {palettes.map((palette, index) => (
-          <MenuItem key={`${palette.value}${index}`} value={palette.value}>
-            <div>
+          <MenuItem
+            sx={{ paddingY: "8px" }}
+            key={`${palette.value}${index}`}
+            value={palette.value}
+          >
+            <Flex sx={{ flexDirection: "column", gap: "4px" }}>
               <Typography component="div" variant="caption">
                 {palette.label}
               </Typography>
-              <div>
+              <Flex>
                 {palette.colors.map((color) => (
                   <ColorSquare
                     key={`option-${color}`}
@@ -139,8 +192,8 @@ export const ColorPalette = ({
                     disabled={false}
                   />
                 ))}
-              </div>
-            </div>
+              </Flex>
+            </Flex>
           </MenuItem>
         ))}
       </Select>
@@ -177,7 +230,7 @@ const useColorSquareStyles = makeStyles((theme: Theme) => ({
   },
 }));
 
-const ColorSquare = ({
+export const ColorSquare = ({
   disabled,
   color,
 }: {
@@ -240,7 +293,7 @@ const ColorPaletteControls = ({
 
   if (colorMapping) {
     // Compare palette colors & colorMapping colors
-    const currentPalette = getPalette(palette);
+    const currentPalette = getPaletteId(palette);
     const colorMappingColors = Object.values(colorMapping);
 
     const nbMatchedColors = colorMappingColors.length;
diff --git a/app/configurator/components/chart-controls/color-picker.tsx b/app/configurator/components/chart-controls/color-picker.tsx
index cbd9cc692..8789be8a7 100644
--- a/app/configurator/components/chart-controls/color-picker.tsx
+++ b/app/configurator/components/chart-controls/color-picker.tsx
@@ -1,13 +1,20 @@
 import { Trans } from "@lingui/macro";
 import { Box, Button, Popover, styled, Theme, Typography } from "@mui/material";
 import { makeStyles } from "@mui/styles";
+import { HsvaColor } from "@uiw/react-color";
 import { color as d3Color } from "d3-color";
-import { MouseEventHandler, useRef } from "react";
+import dynamic from "next/dynamic";
+import { MouseEventHandler, useCallback, useRef, useState } from "react";
 
 import useDisclosure from "@/components/use-disclosure";
 import VisuallyHidden from "@/components/visually-hidden";
 import { Icon } from "@/icons";
 
+const CustomColorPicker = dynamic(
+  () => import("../../components/color-picker"),
+  { ssr: false }
+);
+
 const useStyles = makeStyles(() => ({
   swatch: {
     width: "1.5rem",
@@ -119,6 +126,13 @@ export const ColorPickerMenu = (props: Props) => {
   const { disabled } = props;
   const { isOpen, open, close } = useDisclosure();
   const buttonRef = useRef(null);
+  const popoverRef = useRef<HTMLDivElement>(null);
+
+  const [color, setColor] = useState<HsvaColor | undefined>(undefined);
+
+  const handleColorChange = useCallback((color) => {
+    setColor(color);
+  }, []);
 
   return (
     <ColorPickerBox
@@ -139,8 +153,21 @@ export const ColorPickerMenu = (props: Props) => {
           <Icon name="color" size={16} />
         </Typography>
       </ColorPickerButton>
-      <Popover anchorEl={buttonRef.current} open={isOpen} onClose={close}>
-        <ColorPicker {...props} />
+      <Popover
+        anchorEl={buttonRef.current}
+        anchorOrigin={{
+          vertical: "bottom",
+          horizontal: "center",
+        }}
+        open={isOpen}
+        onClose={close}
+      >
+        <Box ref={popoverRef}>
+          <CustomColorPicker
+            onChange={handleColorChange}
+            colorSwatches={props.colors}
+          />
+        </Box>
       </Popover>
     </ColorPickerBox>
   );
diff --git a/app/configurator/components/chart-options-selector.tsx b/app/configurator/components/chart-options-selector.tsx
index 5172f32c8..732e48b82 100644
--- a/app/configurator/components/chart-options-selector.tsx
+++ b/app/configurator/components/chart-options-selector.tsx
@@ -1181,7 +1181,7 @@ const ComboChartYColorSection = ({
             return (
               <Box key={id}>
                 <ColorPickerField
-                  field="y"
+                  field="color"
                   path={`colorMapping["${id}"]`}
                   label={measures.find((d) => d.id === id)!.label}
                   symbol={symbol}
diff --git a/app/configurator/components/color-picker.css b/app/configurator/components/color-picker.css
new file mode 100644
index 000000000..94b980c8c
--- /dev/null
+++ b/app/configurator/components/color-picker.css
@@ -0,0 +1,28 @@
+.w-color-alpha-fill {
+  width: 10px !important;
+  height: 10px !important;
+}
+
+.w-color-chrome .w-color-saturation {
+  display: none !important;
+}
+
+.w-color-chrome {
+  --github-background-color: transparent !important;
+  --github-arrow-border-color: transparent !important;
+  --github-border: none !important;
+  --github-box-shadow: none !important;
+  width: auto !important;
+  background: transparent !important;
+  padding: 0 !important;
+}
+
+.w-color-chrome div {
+  padding: 0 !important;
+  gap: 0 !important;
+  padding: 4px !important;
+}
+
+.w-color-chrome div div {
+  display: none !important;
+}
diff --git a/app/configurator/components/color-picker.tsx b/app/configurator/components/color-picker.tsx
new file mode 100644
index 000000000..6d8d3cd41
--- /dev/null
+++ b/app/configurator/components/color-picker.tsx
@@ -0,0 +1,174 @@
+import { Box } from "@mui/material";
+import { makeStyles } from "@mui/styles";
+import {
+  Chrome,
+  EditableInput,
+  hexToHsva,
+  HsvaColor,
+  hsvaToHex,
+  Hue,
+  Saturation,
+} from "@uiw/react-color";
+import { color as d3Color } from "d3-color";
+import { MouseEventHandler, useEffect, useState } from "react";
+
+import Flex from "@/components/flex";
+
+const useColorPickerStyles = makeStyles(() => ({
+  swatches: {
+    gridTemplateColumns: "repeat(auto-fill, minmax(1rem, 1fr))",
+    gap: 2,
+    marginBottom: 2,
+    marginTop: 8,
+  },
+}));
+
+type CustomColorPickerProps = {
+  onChange: (color: HsvaColor) => void;
+  colorSwatches?: readonly string[];
+  defaultSelection?: HsvaColor;
+};
+
+const CustomColorPicker = ({
+  onChange,
+  colorSwatches,
+  defaultSelection = { h: 0, s: 0, v: 68, a: 1 },
+}: CustomColorPickerProps) => {
+  const [hsva, setHsva] = useState(defaultSelection);
+  const classes = useColorPickerStyles();
+
+  useEffect(() => {
+    onChange(hsva);
+  }, [hsva, onChange]);
+
+  return (
+    <Flex
+      sx={{
+        padding: "8px",
+        borderRadius: "3px",
+        flexDirection: "column",
+        alignItems: "center",
+      }}
+    >
+      <Flex
+        sx={{
+          width: "162px",
+          flexDirection: "column",
+          gap: "4px",
+        }}
+      >
+        <Saturation
+          hsva={hsva}
+          onChange={(newColor) =>
+            setHsva((ps) => ({ ...ps, ...newColor, a: ps.a }))
+          }
+          style={{ width: "100%", height: "90px" }}
+        />
+        <Flex
+          sx={{
+            alignItems: "center",
+            width: "100%",
+            gap: "4px",
+          }}
+        >
+          <Box
+            sx={{
+              width: "8px",
+              height: "8px",
+              backgroundColor: hsvaToHex(hsva),
+              borderRadius: "50%",
+            }}
+          />
+          <Hue
+            hue={hsva.h}
+            onChange={(newHue) => setHsva((ps) => ({ ...ps, ...newHue }))}
+            style={{ width: "100%", height: "8px" }}
+          />
+        </Flex>
+
+        <Box display="grid" className={classes.swatches}>
+          {colorSwatches?.map((color) => {
+            return (
+              <Swatch
+                key={color}
+                color={color}
+                selected={hsvaToHex(hsva) === color}
+                onClick={() => setHsva(hexToHsva(color))}
+              />
+            );
+          })}
+        </Box>
+        <Flex sx={{ marginTop: "8px", alignItems: "center", gap: "8px" }}>
+          <EditableInput
+            prefix="#"
+            prefixCls="#"
+            value={hsvaToHex(hsva)}
+            inputStyle={{
+              paddingTop: "6px",
+              paddingBottom: "3px",
+              paddingLeft: "8px",
+              paddingRight: "8px",
+              fontSize: "14px",
+              lineHeight: "150%",
+              border: "1px solid #ccc",
+              boxShadow: "none",
+              outline: "none",
+              borderRadius: "4px",
+            }}
+            onChange={(_, value) => setHsva(hexToHsva(`#${value}`))}
+          />
+          <Chrome
+            showAlpha={false}
+            showEyeDropper
+            showHue={false}
+            showColorPreview={false}
+            showEditableInput={false}
+            color={hsva}
+            onChange={(color) => setHsva(color.hsva)}
+          />
+        </Flex>
+      </Flex>
+    </Flex>
+  );
+};
+
+export default CustomColorPicker;
+
+const useStyles = makeStyles(() => ({
+  swatch: {
+    width: "1rem",
+    height: "1rem",
+    borderWidth: 1,
+    borderStyle: "solid",
+    borderColor: "transparent",
+    borderRadius: 1.5,
+    padding: 0,
+    cursor: "pointer",
+  },
+}));
+
+export const Swatch = ({
+  color,
+  selected,
+  onClick,
+}: {
+  color: string;
+  selected: boolean;
+  onClick: MouseEventHandler<HTMLDivElement>;
+}) => {
+  const classes = useStyles();
+  const boxShadow = d3Color(color)?.darker().toString();
+
+  return (
+    <Box
+      className={classes.swatch}
+      sx={{
+        boxShadow: selected ? `0 0 0.5rem 0 ${boxShadow}` : undefined,
+        ":hover": { boxShadow: `0 0 0.5rem 0 ${boxShadow}` },
+        backgroundColor: color,
+      }}
+      role="button"
+      onClick={onClick}
+    />
+  );
+};
diff --git a/app/configurator/components/field.tsx b/app/configurator/components/field.tsx
index 29c71a280..9aa355dc2 100644
--- a/app/configurator/components/field.tsx
+++ b/app/configurator/components/field.tsx
@@ -94,7 +94,7 @@ import {
 import { useTimeFormatLocale } from "@/formatters";
 import { TimeUnit } from "@/graphql/query-hooks";
 import { useLocale } from "@/locales/use-locale";
-import { getPalette } from "@/palettes";
+import { getPaletteId } from "@/palettes";
 import { hierarchyToOptions } from "@/utils/hierarchy";
 import { makeDimensionValueSorters } from "@/utils/sorting-values";
 import useEvent from "@/utils/use-event";
@@ -710,7 +710,7 @@ const useMultiFilterColorPicker = (value: string) => {
   );
 
   const palette = useMemo(() => {
-    return getPalette(
+    return getPaletteId(
       get(
         chartConfig,
         `fields["${activeField}"].${
@@ -817,7 +817,7 @@ export const ColorPickerField = ({
   );
 
   const color = get(chartConfig, `fields["${field}"].${path}`);
-  const palette = getPalette(get(chartConfig, `fields["${field}"].palette`));
+  const palette = getPaletteId(get(chartConfig, `fields["${field}"].palette`));
 
   return (
     <Flex
diff --git a/app/configurator/components/filters.tsx b/app/configurator/components/filters.tsx
index ad217704d..0a6350eae 100644
--- a/app/configurator/components/filters.tsx
+++ b/app/configurator/components/filters.tsx
@@ -102,7 +102,7 @@ import {
 import { valueComparator } from "@/utils/sorting-values";
 import useEvent from "@/utils/use-event";
 
-import { GenericSegmentField } from "../../config-types";
+import { GenericField } from "../../config-types";
 import { interlace } from "../../utils/interlace";
 import { getTimeFilterOptions } from "../../utils/time-filter-options";
 
@@ -188,7 +188,7 @@ const getColorConfig = (
     ? [chartConfig.activeField, colorConfigPath]
     : [chartConfig.activeField];
 
-  return get(chartConfig.fields, path) as GenericSegmentField | undefined;
+  return get(chartConfig.fields, path) as GenericField | undefined;
 };
 
 const FilterControls = ({
diff --git a/app/configurator/components/ui-helpers.ts b/app/configurator/components/ui-helpers.ts
index 273cc7af3..e851f7883 100644
--- a/app/configurator/components/ui-helpers.ts
+++ b/app/configurator/components/ui-helpers.ts
@@ -24,7 +24,7 @@ import {
 import { RelatedDimensionType, TimeUnit } from "@/graphql/query-hooks";
 import { IconName } from "@/icons";
 import { getTimeInterval } from "@/intervals";
-import { getPalette } from "@/palettes";
+import { getPaletteId } from "@/palettes";
 
 // FIXME: We should cover more time formats
 export const timeUnitToParser: Record<
@@ -280,7 +280,7 @@ export const mapValueIrisToColor = ({
     return {};
   }
 
-  const paletteValues = getPalette(palette);
+  const paletteValues = getPaletteId(palette);
   const colors = dimensionValues.map(
     (d, i) =>
       (palette === "dimension" && d.color) ||
diff --git a/app/configurator/configurator-state/actions.tsx b/app/configurator/configurator-state/actions.tsx
index a52ba33eb..aba1d6bb3 100644
--- a/app/configurator/configurator-state/actions.tsx
+++ b/app/configurator/configurator-state/actions.tsx
@@ -2,6 +2,7 @@ import { EncodingFieldType } from "@/charts/chart-config-ui-options";
 import {
   ChartConfig,
   ChartType,
+  ColorField,
   ConfiguratorState,
   DashboardFiltersConfig,
   DataSource,
@@ -9,7 +10,6 @@ import {
   ImputationType,
   InteractiveFiltersConfig,
   Layout,
-  NewColorField,
 } from "@/config-types";
 import { DataCubeComponents, Dimension, DimensionValue } from "@/domain/data";
 import { Locale } from "@/locales/locales";
@@ -91,7 +91,16 @@ export type ConfiguratorStateAction =
     }
   | {
       type: "CHART_PALETTE_CHANGED";
-      value: NewColorField;
+      value: {
+        field: string;
+        colorConfigPath?: string;
+        palette: string;
+        colorMapping: Record<string, string>;
+      };
+    }
+  | {
+      type: "CHART_PALETTE_CHANGED_NEW";
+      value: ColorField;
     }
   | {
       type: "CHART_PALETTE_RESET";
diff --git a/app/configurator/configurator-state/index.tsx b/app/configurator/configurator-state/index.tsx
index e96e7e747..1b34850fe 100644
--- a/app/configurator/configurator-state/index.tsx
+++ b/app/configurator/configurator-state/index.tsx
@@ -89,7 +89,7 @@ const getNonGenericFieldValues = (chartConfig: ChartConfig): string[] => {
 /** Get all filters by mapping status.
  *
  * We need to handle some fields differently due to the way the chart config
- * is structured at the moment (colorField) is a subfield of areaLayer and
+ * is structured at the moment (MapColorField) is a subfield of areaLayer and
  * symbolLayer fields.
  */
 export const getFiltersByMappingStatus = (
diff --git a/app/configurator/configurator-state/reducer.spec.tsx b/app/configurator/configurator-state/reducer.spec.tsx
index 3d6e3ad9f..637b39491 100644
--- a/app/configurator/configurator-state/reducer.spec.tsx
+++ b/app/configurator/configurator-state/reducer.spec.tsx
@@ -705,9 +705,11 @@ describe("colorMapping", () => {
       chartConfig.fields.color.type === "single"
         ? chartConfig.fields.color.color
         : chartConfig.fields.color.colorMapping
-    ).toEqual({
-      orange: "rgb(255, 153, 0)",
-    });
+    ).toEqual(
+      chartConfig.fields.color.type === "single"
+        ? "rgb(255, 153, 0)"
+        : { orange: "rgb(255, 153, 0)" }
+    );
   });
 });
 
diff --git a/app/configurator/configurator-state/reducer.tsx b/app/configurator/configurator-state/reducer.tsx
index f84a4978b..32dc0753e 100644
--- a/app/configurator/configurator-state/reducer.tsx
+++ b/app/configurator/configurator-state/reducer.tsx
@@ -652,7 +652,7 @@ const reducer_: Reducer<ConfiguratorState, ConfiguratorStateAction> = (
     case "CHART_OPTION_CHANGED":
       return handleChartOptionChanged(draft, action);
 
-    case "CHART_PALETTE_CHANGED":
+    case "CHART_PALETTE_CHANGED_NEW":
       if (isConfiguring(draft)) {
         const chartConfig = getChartConfig(draft);
         setWith(
@@ -671,6 +671,32 @@ const reducer_: Reducer<ConfiguratorState, ConfiguratorStateAction> = (
         );
       }
 
+      return draft;
+    case "CHART_PALETTE_CHANGED":
+      if (isConfiguring(draft)) {
+        const chartConfig = getChartConfig(draft);
+        setWith(
+          chartConfig,
+          `fields["${action.value.field}"].${
+            action.value.colorConfigPath
+              ? `${action.value.colorConfigPath}.`
+              : ""
+          }palette`,
+          action.value.palette,
+          Object
+        );
+        setWith(
+          chartConfig,
+          `fields["${action.value.field}"].${
+            action.value.colorConfigPath
+              ? `${action.value.colorConfigPath}.`
+              : ""
+          }colorMapping`,
+          action.value.colorMapping,
+          Object
+        );
+      }
+
       return draft;
 
     case "CHART_PALETTE_RESET":
diff --git a/app/configurator/table/table-chart-options.tsx b/app/configurator/table/table-chart-options.tsx
index d29087723..5a355571e 100644
--- a/app/configurator/table/table-chart-options.tsx
+++ b/app/configurator/table/table-chart-options.tsx
@@ -51,7 +51,7 @@ import {
 } from "@/domain/data";
 import {
   getDefaultCategoricalPalette,
-  getDefaultCategoricalPaletteName,
+  getDefaultCategoricalPaletteId,
   getDefaultDivergingSteppedPalette,
 } from "@/palettes";
 
@@ -284,7 +284,7 @@ export const TableColumnOptions = ({
                       columnColor: "#fff",
                     };
                   case "category":
-                    const palette = getDefaultCategoricalPaletteName(component);
+                    const palette = getDefaultCategoricalPaletteId(component);
 
                     return {
                       type: "category",
diff --git a/app/docs/controls.docs.mdx b/app/docs/controls.docs.mdx
index bdf9b10f5..2d78acadc 100644
--- a/app/docs/controls.docs.mdx
+++ b/app/docs/controls.docs.mdx
@@ -14,12 +14,13 @@ import {
   SectionTitle,
 } from "@/configurator/components/chart-controls/section";
 import { IconButton } from "@/configurator/components/icon-button";
-import { getPalette } from "@/palettes";
+import { getPaletteId } from "@/palettes";
 
-import { Canvas, Meta } from '@storybook/blocks';
-import * as ControlsStories from './controls.stories';
+import { Canvas, Meta } from "@storybook/blocks";
+import * as ControlsStories from "./controls.stories";
 
-> Controls are a composition of layout components and form elements, used throughout the application to configurate charts.
+> Controls are a composition of layout components and form elements, used
+> throughout the application to configurate charts.
 
 <Meta of={ControlsStories} />
 
@@ -29,27 +30,24 @@ import * as ControlsStories from './controls.stories';
 
 ## OnOffControlTab
 
-OnOffControlTab (and OnOffControlTabField) are elements which are supposed to be used on the left panel in the app as category "switches"
-(like for BaseLayer in case of maps or InteractiveFilters for... interactive filters). They display either "on" or "off" to indicate component state.
+OnOffControlTab (and OnOffControlTabField) are elements which are supposed to be
+used on the left panel in the app as category "switches" (like for BaseLayer in
+case of maps or InteractiveFilters for... interactive filters). They display
+either "on" or "off" to indicate component state.
 
 <Canvas of={ControlsStories.OnOffControlTab} />
 
-
-
-
 ## Controls section
 
-A section is a styling container, it has a title and a note (displayed on the right). Any component can be given as child component.
+A section is a styling container, it has a title and a note (displayed on the
+right). Any component can be given as child component.
 
 <Canvas of={ControlsStories.ControlSection} />
 
-
 ## Controls list
 
 <Canvas of={ControlsStories.ControlList} />
 
-
-  ## Color Picker
-
+## Color Picker
 
 <Canvas of={ControlsStories.ColorPicker} />
diff --git a/app/docs/controls.stories.tsx b/app/docs/controls.stories.tsx
index 3935b9b9a..ca9846c41 100644
--- a/app/docs/controls.stories.tsx
+++ b/app/docs/controls.stories.tsx
@@ -9,7 +9,7 @@ import {
   ControlSection,
   SectionTitle,
 } from "@/configurator/components/chart-controls/section";
-import { getPalette } from "@/palettes";
+import { getPaletteId } from "@/palettes";
 
 import { IconButton } from "../configurator/components/icon-button";
 
@@ -175,7 +175,7 @@ const ColorPickerStory = {
           Current (valid) color: {currentColor}
         </Box>
         <ColorPicker
-          colors={getPalette("accent")}
+          colors={getPaletteId("accent")}
           selectedColor={currentColor}
           onChange={(color) => setCurrentColor(color)}
         />
diff --git a/app/package.json b/app/package.json
index e593ab727..9e75b41dc 100644
--- a/app/package.json
+++ b/app/package.json
@@ -43,6 +43,7 @@
     "@tpluscode/rdf-ns-builders": "2.0.1",
     "@tpluscode/sparql-builder": "^0.3.31",
     "@types/react-grid-layout": "^1.3.5",
+    "@uiw/react-color": "^2.3.2",
     "@urql/devtools": "^2.0.3",
     "@visx/group": "^2.10.0",
     "@visx/text": "^2.12.2",
diff --git a/app/pages/_app.tsx b/app/pages/_app.tsx
index 2a544b170..5687cadaf 100644
--- a/app/pages/_app.tsx
+++ b/app/pages/_app.tsx
@@ -10,19 +10,21 @@ import Head from "next/head";
 import { useRouter } from "next/router";
 import { useEffect } from "react";
 
+import { SnackbarProvider } from "@/components/snackbar";
 import { PUBLIC_URL } from "@/domain/env";
 import { flag } from "@/flags/flag";
 import { GraphqlProvider } from "@/graphql/GraphqlProvider";
 import { i18n, parseLocaleString } from "@/locales/locales";
 import { LocaleProvider } from "@/locales/use-locale";
 import * as federalTheme from "@/themes/federal";
+import { EventEmitterProvider } from "@/utils/eventEmitter";
 import Flashes from "@/utils/flashes";
 import { analyticsPageView } from "@/utils/googleAnalytics";
 import AsyncLocalizationProvider from "@/utils/l10n-provider";
 import "@/utils/nprogress.css";
 import { useNProgress } from "@/utils/use-nprogress";
-import { EventEmitterProvider } from "@/utils/eventEmitter";
-import { SnackbarProvider } from "@/components/snackbar";
+
+import "@/configurator/components/color-picker.css";
 
 const GQLDebugPanel = dynamic(() => import("@/gql-flamegraph/devtool"), {
   ssr: false,
diff --git a/app/palettes.ts b/app/palettes.ts
index f8d151a76..49f03c26d 100644
--- a/app/palettes.ts
+++ b/app/palettes.ts
@@ -29,7 +29,7 @@ import { DivergingPaletteType, SequentialPaletteType } from "./config-types";
 import { Component } from "./domain/data";
 
 // Colors
-export const getDefaultCategoricalPaletteName = (
+export const getDefaultCategoricalPaletteId = (
   d?: Component,
   previousPaletteName?: string
 ): string => {
@@ -53,7 +53,7 @@ export const getDefaultCategoricalPalette = (
   }
 };
 
-export const getPalette = (
+export const getPaletteId = (
   palette?: string,
   colors?: string[]
 ): ReadonlyArray<string> => {
@@ -96,16 +96,16 @@ export const categoricalPalettes: Array<CategoricalPalette> = [
   {
     label: "category10",
     value: "category10",
-    colors: getPalette("category10"),
+    colors: getPaletteId("category10"),
   },
-  { label: "accent", value: "accent", colors: getPalette("accent") },
-  { label: "dark2", value: "dark2", colors: getPalette("dark2") },
-  { label: "paired", value: "paired", colors: getPalette("paired") },
-  { label: "pastel1", value: "pastel1", colors: getPalette("pastel1") },
-  { label: "pastel2", value: "pastel2", colors: getPalette("pastel2") },
-  { label: "set1", value: "set1", colors: getPalette("set1") },
-  { label: "set2", value: "set2", colors: getPalette("set2") },
-  { label: "set3", value: "set3", colors: getPalette("set3") },
+  { label: "accent", value: "accent", colors: getPaletteId("accent") },
+  { label: "dark2", value: "dark2", colors: getPaletteId("dark2") },
+  { label: "paired", value: "paired", colors: getPaletteId("paired") },
+  { label: "pastel1", value: "pastel1", colors: getPaletteId("pastel1") },
+  { label: "pastel2", value: "pastel2", colors: getPaletteId("pastel2") },
+  { label: "set1", value: "set1", colors: getPaletteId("set1") },
+  { label: "set2", value: "set2", colors: getPaletteId("set2") },
+  { label: "set3", value: "set3", colors: getPaletteId("set3") },
 ];
 
 export const DEFAULT_CATEGORICAL_PALETTE_NAME = categoricalPalettes[0].value;
diff --git a/yarn.lock b/yarn.lock
index 95a66cd8d..2470643fd 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -230,7 +230,29 @@
   resolved "https://registry.yarnpkg.com/@babel/compat-data/-/compat-data-7.26.2.tgz#278b6b13664557de95b8f35b90d96785850bb56e"
   integrity sha512-Z0WgzSEa+aUcdiJuCIqgujCshpMWgUpgOxXotrYPSA53hA3qopNaqcJpyr0hVb1FeWdnqFA35/fUtXgBK8srQg==
 
-"@babel/core@7.12.9", "@babel/core@^7.0.0", "@babel/core@^7.1.0", "@babel/core@^7.10.5", "@babel/core@^7.11.6", "@babel/core@^7.12.3", "@babel/core@^7.12.9", "@babel/core@^7.14.6", "@babel/core@^7.18.9", "@babel/core@^7.21.0", "@babel/core@^7.23.0", "@babel/core@^7.23.2", "@babel/core@^7.24.4", "@babel/core@^7.7.2", "@babel/core@^7.7.5", "@babel/core@^7.7.7":
+"@babel/core@7.12.9":
+  version "7.12.9"
+  resolved "https://registry.yarnpkg.com/@babel/core/-/core-7.12.9.tgz#fd450c4ec10cdbb980e2928b7aa7a28484593fc8"
+  integrity sha512-gTXYh3M5wb7FRXQy+FErKFAv90BnlOuNn1QkCK2lREoPAjrQCO49+HVSrFoe5uakFAF5eenS75KbO2vQiLrTMQ==
+  dependencies:
+    "@babel/code-frame" "^7.10.4"
+    "@babel/generator" "^7.12.5"
+    "@babel/helper-module-transforms" "^7.12.1"
+    "@babel/helpers" "^7.12.5"
+    "@babel/parser" "^7.12.7"
+    "@babel/template" "^7.12.7"
+    "@babel/traverse" "^7.12.9"
+    "@babel/types" "^7.12.7"
+    convert-source-map "^1.7.0"
+    debug "^4.1.0"
+    gensync "^1.0.0-beta.1"
+    json5 "^2.1.2"
+    lodash "^4.17.19"
+    resolve "^1.3.2"
+    semver "^5.4.1"
+    source-map "^0.5.0"
+
+"@babel/core@^7.0.0", "@babel/core@^7.1.0", "@babel/core@^7.10.5", "@babel/core@^7.11.6", "@babel/core@^7.12.3", "@babel/core@^7.12.9", "@babel/core@^7.18.9", "@babel/core@^7.21.0", "@babel/core@^7.23.0", "@babel/core@^7.23.2", "@babel/core@^7.24.4", "@babel/core@^7.7.2", "@babel/core@^7.7.5", "@babel/core@^7.7.7":
   version "7.26.0"
   resolved "https://registry.yarnpkg.com/@babel/core/-/core-7.26.0.tgz#d78b6023cc8f3114ccf049eb219613f74a747b40"
   integrity sha512-i1SLeK+DzNnQ3LL/CswPCa/E5u4lh1k6IAEphON8F+cXt0t9euTshDru0q7/IqMa1PMPz5RnHuHscF8/ZJsStg==
@@ -260,6 +282,17 @@
     jsesc "^2.5.1"
     source-map "^0.5.0"
 
+"@babel/generator@^7.12.5", "@babel/generator@^7.25.9", "@babel/generator@^7.26.0":
+  version "7.26.2"
+  resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.26.2.tgz#87b75813bec87916210e5e01939a4c823d6bb74f"
+  integrity sha512-zevQbhbau95nkoxSq3f/DC/SC+EEOUZd3DYqfSkMhY2/wfSeaHV1Ew4vk8e+x8lja31IbyuUa2uQ3JONqKbysw==
+  dependencies:
+    "@babel/parser" "^7.26.2"
+    "@babel/types" "^7.26.0"
+    "@jridgewell/gen-mapping" "^0.3.5"
+    "@jridgewell/trace-mapping" "^0.3.25"
+    jsesc "^3.0.2"
+
 "@babel/generator@^7.20.14":
   version "7.23.0"
   resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.23.0.tgz#df5c386e2218be505b34837acbcb874d7a983420"
@@ -290,17 +323,6 @@
     "@jridgewell/trace-mapping" "^0.3.25"
     jsesc "^2.5.1"
 
-"@babel/generator@^7.25.9", "@babel/generator@^7.26.0":
-  version "7.26.2"
-  resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.26.2.tgz#87b75813bec87916210e5e01939a4c823d6bb74f"
-  integrity sha512-zevQbhbau95nkoxSq3f/DC/SC+EEOUZd3DYqfSkMhY2/wfSeaHV1Ew4vk8e+x8lja31IbyuUa2uQ3JONqKbysw==
-  dependencies:
-    "@babel/parser" "^7.26.2"
-    "@babel/types" "^7.26.0"
-    "@jridgewell/gen-mapping" "^0.3.5"
-    "@jridgewell/trace-mapping" "^0.3.25"
-    jsesc "^3.0.2"
-
 "@babel/helper-annotate-as-pure@^7.14.5":
   version "7.14.5"
   resolved "https://registry.npmjs.org/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.14.5.tgz"
@@ -538,6 +560,15 @@
     "@babel/traverse" "^7.25.9"
     "@babel/types" "^7.25.9"
 
+"@babel/helper-module-transforms@^7.12.1", "@babel/helper-module-transforms@^7.26.0":
+  version "7.26.0"
+  resolved "https://registry.yarnpkg.com/@babel/helper-module-transforms/-/helper-module-transforms-7.26.0.tgz#8ce54ec9d592695e58d84cd884b7b5c6a2fdeeae"
+  integrity sha512-xO+xu6B5K2czEnQye6BHA7DolFFmS3LB7stHZFaOLb1pAwO1HWLS8fXA+eh0A2yIvltPVmx3eNNDBJA2SLHXFw==
+  dependencies:
+    "@babel/helper-module-imports" "^7.25.9"
+    "@babel/helper-validator-identifier" "^7.25.9"
+    "@babel/traverse" "^7.25.9"
+
 "@babel/helper-module-transforms@^7.14.5":
   version "7.15.8"
   resolved "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.15.8.tgz"
@@ -563,15 +594,6 @@
     "@babel/helper-split-export-declaration" "^7.22.6"
     "@babel/helper-validator-identifier" "^7.22.20"
 
-"@babel/helper-module-transforms@^7.26.0":
-  version "7.26.0"
-  resolved "https://registry.yarnpkg.com/@babel/helper-module-transforms/-/helper-module-transforms-7.26.0.tgz#8ce54ec9d592695e58d84cd884b7b5c6a2fdeeae"
-  integrity sha512-xO+xu6B5K2czEnQye6BHA7DolFFmS3LB7stHZFaOLb1pAwO1HWLS8fXA+eh0A2yIvltPVmx3eNNDBJA2SLHXFw==
-  dependencies:
-    "@babel/helper-module-imports" "^7.25.9"
-    "@babel/helper-validator-identifier" "^7.25.9"
-    "@babel/traverse" "^7.25.9"
-
 "@babel/helper-optimise-call-expression@^7.14.5", "@babel/helper-optimise-call-expression@^7.15.4":
   version "7.15.4"
   resolved "https://registry.npmjs.org/@babel/helper-optimise-call-expression/-/helper-optimise-call-expression-7.15.4.tgz"
@@ -786,7 +808,7 @@
     "@babel/template" "^7.22.15"
     "@babel/types" "^7.22.19"
 
-"@babel/helpers@^7.26.0":
+"@babel/helpers@^7.12.5", "@babel/helpers@^7.26.0":
   version "7.26.0"
   resolved "https://registry.yarnpkg.com/@babel/helpers/-/helpers-7.26.0.tgz#30e621f1eba5aa45fe6f4868d2e9154d884119a4"
   integrity sha512-tbhNuIxNcVb21pInl3ZSjksLCvgdZy9KwJ8brv993QtIVKJBBkYXz4q4ZbAv31GdnC+R90np23L5FbEBlthAEw==
@@ -840,7 +862,12 @@
     js-tokens "^4.0.0"
     picocolors "^1.0.0"
 
-"@babel/parser@7.12.16", "@babel/parser@^7.0.0", "@babel/parser@^7.1.0", "@babel/parser@^7.12.13", "@babel/parser@^7.14.6", "@babel/parser@^7.14.7", "@babel/parser@^7.15.4", "@babel/parser@^7.20.15", "@babel/parser@^7.20.7", "@babel/parser@^7.21.2", "@babel/parser@^7.21.4", "@babel/parser@^7.22.15", "@babel/parser@^7.23.0", "@babel/parser@^7.24.0", "@babel/parser@^7.24.4", "@babel/parser@^7.24.5", "@babel/parser@^7.25.9", "@babel/parser@^7.26.0", "@babel/parser@^7.26.2", "@babel/parser@^7.7.2":
+"@babel/parser@7.12.16":
+  version "7.12.16"
+  resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.12.16.tgz#cc31257419d2c3189d394081635703f549fc1ed4"
+  integrity sha512-c/+u9cqV6F0+4Hpq01jnJO+GLp2DdT63ppz9Xa+6cHaajM9VFzK/iDXiKK65YtpeVwu+ctfS6iqlMqRgQRzeCw==
+
+"@babel/parser@^7.0.0", "@babel/parser@^7.1.0", "@babel/parser@^7.12.13", "@babel/parser@^7.12.7", "@babel/parser@^7.14.7", "@babel/parser@^7.15.4", "@babel/parser@^7.20.15", "@babel/parser@^7.20.7", "@babel/parser@^7.21.2", "@babel/parser@^7.21.4", "@babel/parser@^7.22.15", "@babel/parser@^7.23.0", "@babel/parser@^7.24.0", "@babel/parser@^7.24.4", "@babel/parser@^7.24.5", "@babel/parser@^7.25.9", "@babel/parser@^7.26.0", "@babel/parser@^7.26.2", "@babel/parser@^7.7.2":
   version "7.26.2"
   resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.26.2.tgz#fd7b6f487cfea09889557ef5d4eeb9ff9a5abd11"
   integrity sha512-DWMCZH9WA4Maitz2q21SRKHo9QXZxkDsbNZoVD62gusNtNBBqDg9i7uOhASfTfIGNzW+O+r7+jAlM8dwphcJKQ==
@@ -2500,6 +2527,15 @@
   resolved "https://registry.npmjs.org/@babel/standalone/-/standalone-7.14.6.tgz"
   integrity sha512-oAoSp82jhJFnXKybKTOj5QF04XxiDRyiiqrFToiU1udlBXuZoADlPmmnOcuqBrZxSNNUjzJIVK8vt838Qoqjxg==
 
+"@babel/template@^7.12.7", "@babel/template@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.25.9.tgz#ecb62d81a8a6f5dc5fe8abfc3901fc52ddf15016"
+  integrity sha512-9DGttpmPvIxBb/2uwpVo3dqJ+O6RooAFOS+lB+xDqoE2PVCE8nfoHMdZLpfCQRLwvohzXISPZcgxt80xLfsuwg==
+  dependencies:
+    "@babel/code-frame" "^7.25.9"
+    "@babel/parser" "^7.25.9"
+    "@babel/types" "^7.25.9"
+
 "@babel/template@^7.15.4", "@babel/template@^7.3.3":
   version "7.15.4"
   resolved "https://registry.npmjs.org/@babel/template/-/template-7.15.4.tgz"
@@ -2527,15 +2563,6 @@
     "@babel/parser" "^7.24.0"
     "@babel/types" "^7.24.0"
 
-"@babel/template@^7.25.9":
-  version "7.25.9"
-  resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.25.9.tgz#ecb62d81a8a6f5dc5fe8abfc3901fc52ddf15016"
-  integrity sha512-9DGttpmPvIxBb/2uwpVo3dqJ+O6RooAFOS+lB+xDqoE2PVCE8nfoHMdZLpfCQRLwvohzXISPZcgxt80xLfsuwg==
-  dependencies:
-    "@babel/code-frame" "^7.25.9"
-    "@babel/parser" "^7.25.9"
-    "@babel/types" "^7.25.9"
-
 "@babel/traverse@7.12.13":
   version "7.12.13"
   resolved "https://registry.npmjs.org/@babel/traverse/-/traverse-7.12.13.tgz"
@@ -2566,6 +2593,19 @@
     debug "^4.1.0"
     globals "^11.1.0"
 
+"@babel/traverse@^7.12.9", "@babel/traverse@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.25.9.tgz#a50f8fe49e7f69f53de5bea7e413cd35c5e13c84"
+  integrity sha512-ZCuvfwOwlz/bawvAuvcj8rrithP2/N55Tzz342AkTvq4qaWbGfmCk/tKhNaV2cthijKrPAA8SRJV5WWe7IBMJw==
+  dependencies:
+    "@babel/code-frame" "^7.25.9"
+    "@babel/generator" "^7.25.9"
+    "@babel/parser" "^7.25.9"
+    "@babel/template" "^7.25.9"
+    "@babel/types" "^7.25.9"
+    debug "^4.3.1"
+    globals "^11.1.0"
+
 "@babel/traverse@^7.18.9", "@babel/traverse@^7.23.2":
   version "7.24.0"
   resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.24.0.tgz#4a408fbf364ff73135c714a2ab46a5eab2831b1e"
@@ -2598,19 +2638,6 @@
     debug "^4.3.1"
     globals "^11.1.0"
 
-"@babel/traverse@^7.25.9":
-  version "7.25.9"
-  resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.25.9.tgz#a50f8fe49e7f69f53de5bea7e413cd35c5e13c84"
-  integrity sha512-ZCuvfwOwlz/bawvAuvcj8rrithP2/N55Tzz342AkTvq4qaWbGfmCk/tKhNaV2cthijKrPAA8SRJV5WWe7IBMJw==
-  dependencies:
-    "@babel/code-frame" "^7.25.9"
-    "@babel/generator" "^7.25.9"
-    "@babel/parser" "^7.25.9"
-    "@babel/template" "^7.25.9"
-    "@babel/types" "^7.25.9"
-    debug "^4.3.1"
-    globals "^11.1.0"
-
 "@babel/types@7.12.13":
   version "7.12.13"
   resolved "https://registry.npmjs.org/@babel/types/-/types-7.12.13.tgz"
@@ -2628,6 +2655,14 @@
     "@babel/helper-validator-identifier" "^7.14.9"
     to-fast-properties "^2.0.0"
 
+"@babel/types@^7.12.7", "@babel/types@^7.25.9", "@babel/types@^7.26.0":
+  version "7.26.0"
+  resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.26.0.tgz#deabd08d6b753bc8e0f198f8709fb575e31774ff"
+  integrity sha512-Z/yiTPj+lDVnF7lWeKCIJzaIkI0vYO87dMpZ4bg4TDrFe4XXLFWL1TbXU27gBP3QccxV9mZICCrnjnYlJjXHOA==
+  dependencies:
+    "@babel/helper-string-parser" "^7.25.9"
+    "@babel/helper-validator-identifier" "^7.25.9"
+
 "@babel/types@^7.16.7":
   version "7.17.0"
   resolved "https://registry.npmjs.org/@babel/types/-/types-7.17.0.tgz"
@@ -2690,14 +2725,6 @@
     "@babel/helper-validator-identifier" "^7.24.5"
     to-fast-properties "^2.0.0"
 
-"@babel/types@^7.25.9", "@babel/types@^7.26.0":
-  version "7.26.0"
-  resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.26.0.tgz#deabd08d6b753bc8e0f198f8709fb575e31774ff"
-  integrity sha512-Z/yiTPj+lDVnF7lWeKCIJzaIkI0vYO87dMpZ4bg4TDrFe4XXLFWL1TbXU27gBP3QccxV9mZICCrnjnYlJjXHOA==
-  dependencies:
-    "@babel/helper-string-parser" "^7.25.9"
-    "@babel/helper-validator-identifier" "^7.25.9"
-
 "@base2/pretty-print-object@1.0.1":
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/@base2/pretty-print-object/-/pretty-print-object-1.0.1.tgz#371ba8be66d556812dc7fb169ebc3c08378f69d4"
@@ -10034,6 +10061,207 @@
     "@typescript-eslint/types" "6.21.0"
     eslint-visitor-keys "^3.4.1"
 
+"@uiw/color-convert@2.3.2":
+  version "2.3.2"
+  resolved "https://registry.yarnpkg.com/@uiw/color-convert/-/color-convert-2.3.2.tgz#1cb7931d6ec3bda8ecadca4ae65a382bec3813a2"
+  integrity sha512-Txs0oAcOGhvM15yi7NqDJSws6htpuGx75EblFlZmh4h4AyUYXaeN2HNcOAUt835M3SN1j7rqMC+XERIE4r776Q==
+
+"@uiw/react-color-alpha@2.3.2":
+  version "2.3.2"
+  resolved "https://registry.yarnpkg.com/@uiw/react-color-alpha/-/react-color-alpha-2.3.2.tgz#61a3bac06bd426c4c1cc1893a536b24de31881b6"
+  integrity sha512-+yh+KEpNKjxNFFODQrB3Lki2hu6kznoSCngHgptlWBUtAC3e/e7tIiTTedSpCGr7fwIpC0CWrKwxENA3tyY/2Q==
+  dependencies:
+    "@uiw/color-convert" "2.3.2"
+    "@uiw/react-drag-event-interactive" "2.3.2"
+
+"@uiw/react-color-block@2.3.2":
+  version "2.3.2"
+  resolved "https://registry.yarnpkg.com/@uiw/react-color-block/-/react-color-block-2.3.2.tgz#e5afd883f40650cf34173cc46073d0c385e36261"
+  integrity sha512-eic08WG6IFBEWrsE/U9aMuZxW9gSdX4s5iD5TyZMlHlUiGIneGXEOOSHNqlIfA7Dxbs1STYQbEQU/aSx6APYLw==
+  dependencies:
+    "@uiw/color-convert" "2.3.2"
+    "@uiw/react-color-editable-input" "2.3.2"
+    "@uiw/react-color-swatch" "2.3.2"
+
+"@uiw/react-color-chrome@2.3.2":
+  version "2.3.2"
+  resolved "https://registry.yarnpkg.com/@uiw/react-color-chrome/-/react-color-chrome-2.3.2.tgz#6d1f0a52fc6419ddb93cec998e69d6b1db1964da"
+  integrity sha512-WvA8dg2y+vgoyy8GFBM3B1+SeJ29ov5OVEei1kACMKxThADPdI4w3RRmhYIMnSeFGVW3bGuBMq6JimjIKZirCQ==
+  dependencies:
+    "@uiw/color-convert" "2.3.2"
+    "@uiw/react-color-alpha" "2.3.2"
+    "@uiw/react-color-editable-input" "2.3.2"
+    "@uiw/react-color-editable-input-hsla" "2.3.2"
+    "@uiw/react-color-editable-input-rgba" "2.3.2"
+    "@uiw/react-color-github" "2.3.2"
+    "@uiw/react-color-hue" "2.3.2"
+    "@uiw/react-color-saturation" "2.3.2"
+
+"@uiw/react-color-circle@2.3.2":
+  version "2.3.2"
+  resolved "https://registry.yarnpkg.com/@uiw/react-color-circle/-/react-color-circle-2.3.2.tgz#9f279924cfb30750c285eb269208868cf1eefea8"
+  integrity sha512-lndeyFmvKNZ5MBwL9BqkfceuhOnIGQW3gB9wKRPxiKmux9maxllirTwWNvv/6vgGFMnfaR89NO7pjTyf7mNhOA==
+  dependencies:
+    "@uiw/color-convert" "2.3.2"
+    "@uiw/react-color-swatch" "2.3.2"
+
+"@uiw/react-color-colorful@2.3.2":
+  version "2.3.2"
+  resolved "https://registry.yarnpkg.com/@uiw/react-color-colorful/-/react-color-colorful-2.3.2.tgz#118a3893f892c5ef681919512b32a2a65a641ee0"
+  integrity sha512-Rr1qa4Uo588CZjOx6OZIXjo7+CNcnqogU0Nel6L5zzwL+3CNBC3GfS4Or4db/ZxFhN49qt6NqsQa/ykA2/ixpg==
+  dependencies:
+    "@uiw/color-convert" "2.3.2"
+    "@uiw/react-color-alpha" "2.3.2"
+    "@uiw/react-color-hue" "2.3.2"
+    "@uiw/react-color-saturation" "2.3.2"
+
+"@uiw/react-color-compact@2.3.2":
+  version "2.3.2"
+  resolved "https://registry.yarnpkg.com/@uiw/react-color-compact/-/react-color-compact-2.3.2.tgz#c5ec1f1917f6fd1a25dfd1c18315596419ec4987"
+  integrity sha512-3/eQkndGBIBr91mkPoOgS8NwTxpz5wEt5UK6CSvbC+zOQtEzZaWq+XpB7ieoUjla3yiKgdBauu3iYTwo1LOFEw==
+  dependencies:
+    "@uiw/color-convert" "2.3.2"
+    "@uiw/react-color-editable-input" "2.3.2"
+    "@uiw/react-color-editable-input-rgba" "2.3.2"
+    "@uiw/react-color-swatch" "2.3.2"
+
+"@uiw/react-color-editable-input-hsla@2.3.2":
+  version "2.3.2"
+  resolved "https://registry.yarnpkg.com/@uiw/react-color-editable-input-hsla/-/react-color-editable-input-hsla-2.3.2.tgz#749116a1842f71eb786b40bc28e0ef82890c5557"
+  integrity sha512-lLO8K+Zv5L9HKBgM3zYSqeLKisBkpXCxlQmF8iCKYcIgeRilM26qqylskA4n6pVixfSooL0hyL/HwfNmbCIrrg==
+  dependencies:
+    "@uiw/color-convert" "2.3.2"
+    "@uiw/react-color-editable-input-rgba" "2.3.2"
+
+"@uiw/react-color-editable-input-rgba@2.3.2":
+  version "2.3.2"
+  resolved "https://registry.yarnpkg.com/@uiw/react-color-editable-input-rgba/-/react-color-editable-input-rgba-2.3.2.tgz#711d4e85183f5c3f5fabaf1bf4e7ca6a6dbe7d7c"
+  integrity sha512-HV0+5zzpaNG5v6EyVgmPfInd9UzYknQI7gdsVmmXKzB13L3RFhiv77r6o+q3IZMEnoDZ3U92uX4FeRaM1NrwYw==
+  dependencies:
+    "@uiw/color-convert" "2.3.2"
+    "@uiw/react-color-editable-input" "2.3.2"
+
+"@uiw/react-color-editable-input@2.3.2":
+  version "2.3.2"
+  resolved "https://registry.yarnpkg.com/@uiw/react-color-editable-input/-/react-color-editable-input-2.3.2.tgz#1df092ede3b301d29c12a8aba63e1eed1dcf7daa"
+  integrity sha512-DDl9pCN7hH5Q+OB6LiFGFmkqIQw81EDIEvDi6rr6G9U+k+oqZ9JCBKSZ9qNKSa4MqnuISOkFv0vL3Jh8fSyqcg==
+
+"@uiw/react-color-github@2.3.2":
+  version "2.3.2"
+  resolved "https://registry.yarnpkg.com/@uiw/react-color-github/-/react-color-github-2.3.2.tgz#8ee1d1992b5293f69e6f68c98f6f2c1bd15515cd"
+  integrity sha512-3QxpEOKYXbbV/L1cYsf7nhoOnl19/zWTpRRgda8LOe3SuRhFrFM3ZLa+UJUEXgO1cg9h64gxSKINh2st/FawpQ==
+  dependencies:
+    "@uiw/color-convert" "2.3.2"
+    "@uiw/react-color-swatch" "2.3.2"
+
+"@uiw/react-color-hue@2.3.2":
+  version "2.3.2"
+  resolved "https://registry.yarnpkg.com/@uiw/react-color-hue/-/react-color-hue-2.3.2.tgz#6cf5d821461a1047a7d1770bf150cf1c6997b342"
+  integrity sha512-aAveo++GAghw09Ngc8Zzwxhj9mGaJfw8q40fDGFrVNxdrwrAjySIKHzlOSg5kw6WnEp4tUjhkMXDfCZWUhqmPA==
+  dependencies:
+    "@uiw/color-convert" "2.3.2"
+    "@uiw/react-color-alpha" "2.3.2"
+
+"@uiw/react-color-material@2.3.2":
+  version "2.3.2"
+  resolved "https://registry.yarnpkg.com/@uiw/react-color-material/-/react-color-material-2.3.2.tgz#f0a780a5221af0369af5d38236ad82447b83bda3"
+  integrity sha512-fb+bVCwRoeb4INAFEEYU26GWU7+/695DFz7C/dA2RLUa279NhVtNaOtISULT+u+Aerf2dR6GrjBk5wdgNqRqPg==
+  dependencies:
+    "@uiw/color-convert" "2.3.2"
+    "@uiw/react-color-editable-input" "2.3.2"
+    "@uiw/react-color-editable-input-rgba" "2.3.2"
+
+"@uiw/react-color-name@2.3.2":
+  version "2.3.2"
+  resolved "https://registry.yarnpkg.com/@uiw/react-color-name/-/react-color-name-2.3.2.tgz#d520077d501f879742d6e33dbde5e8d6a81302cf"
+  integrity sha512-ZLt6ypbsGbo48wSgtFa5t+egZ57VmWIriyW/6rMNK5nMB8Y9Da7tqT2dL4WfwPzrG7I/97qafinfnGzPAuHdsw==
+  dependencies:
+    colors-named "^1.0.1"
+    colors-named-hex "^1.0.1"
+
+"@uiw/react-color-saturation@2.3.2":
+  version "2.3.2"
+  resolved "https://registry.yarnpkg.com/@uiw/react-color-saturation/-/react-color-saturation-2.3.2.tgz#8987a142f59d19180739711a49c24c71065c52c9"
+  integrity sha512-aDKMhjylBUb4dH4oTQYz+U4mhpOebbQ2J0Y8y5aX1tfZ3fZuBqnXtWzu7Ffj3ksdKwkQHPddxT5IDTbAChF/og==
+  dependencies:
+    "@uiw/color-convert" "2.3.2"
+    "@uiw/react-drag-event-interactive" "2.3.2"
+
+"@uiw/react-color-shade-slider@2.3.2":
+  version "2.3.2"
+  resolved "https://registry.yarnpkg.com/@uiw/react-color-shade-slider/-/react-color-shade-slider-2.3.2.tgz#056e6ad5aa320a2a70bb07c1e8aad249b5cf9feb"
+  integrity sha512-nM8AJPpq9UnC7LWjQEZ28bIm8gMRqRzk3dXfGQ4X3t3040d11o4sbl23pTmWTjn6P+3+MP/L2FhmvLSTUkMp/g==
+  dependencies:
+    "@uiw/color-convert" "2.3.2"
+    "@uiw/react-color-alpha" "2.3.2"
+
+"@uiw/react-color-sketch@2.3.2":
+  version "2.3.2"
+  resolved "https://registry.yarnpkg.com/@uiw/react-color-sketch/-/react-color-sketch-2.3.2.tgz#c9b680360e658bd7f474a7d9d039f9525a0af044"
+  integrity sha512-CMCbzarRVEqZLCi84AE4RQrHapvZQTXFylm7A7mfA28qInFFyF3jZsqRu6Y5sc33rPmL4AeSURbgPljmolxQ1g==
+  dependencies:
+    "@uiw/color-convert" "2.3.2"
+    "@uiw/react-color-alpha" "2.3.2"
+    "@uiw/react-color-editable-input" "2.3.2"
+    "@uiw/react-color-editable-input-rgba" "2.3.2"
+    "@uiw/react-color-hue" "2.3.2"
+    "@uiw/react-color-saturation" "2.3.2"
+    "@uiw/react-color-swatch" "2.3.2"
+
+"@uiw/react-color-slider@2.3.2":
+  version "2.3.2"
+  resolved "https://registry.yarnpkg.com/@uiw/react-color-slider/-/react-color-slider-2.3.2.tgz#67219865df3f3e275b516617d7f995a73797fa9d"
+  integrity sha512-Mf9w9YwI+nYxagoTPsxzEHX+/EkVTH0Ak84V6CgcmHVxM3zGESdpalZ+9B6NFWjy9nP7Oa2lK1i4cyZr8D7v2g==
+  dependencies:
+    "@uiw/color-convert" "2.3.2"
+    "@uiw/react-color-alpha" "2.3.2"
+
+"@uiw/react-color-swatch@2.3.2":
+  version "2.3.2"
+  resolved "https://registry.yarnpkg.com/@uiw/react-color-swatch/-/react-color-swatch-2.3.2.tgz#f5acac4c73da10d88075cf3c67f4fb7022f5430f"
+  integrity sha512-AjkEcSdlpxiFm9yull4WDujuHr0tD9/+XkLtcus/MH768zSQbb+rj6cY1nZ8L8FI6LRDGRaVJqFaXm4ZOAaIZw==
+  dependencies:
+    "@uiw/color-convert" "2.3.2"
+
+"@uiw/react-color-wheel@2.3.2":
+  version "2.3.2"
+  resolved "https://registry.yarnpkg.com/@uiw/react-color-wheel/-/react-color-wheel-2.3.2.tgz#066ec384da3ea4e5728de3973bf9be27ca2670f6"
+  integrity sha512-AwZZusWq+nlNNEjif6ruryrgc/cVuQ0x6XbdIVUbiQekfHFv+LunHnMS4EtmX+yPiOVihTvBp8NpfrdN2jJ8hw==
+  dependencies:
+    "@uiw/color-convert" "2.3.2"
+    "@uiw/react-drag-event-interactive" "2.3.2"
+
+"@uiw/react-color@^2.3.2":
+  version "2.3.2"
+  resolved "https://registry.yarnpkg.com/@uiw/react-color/-/react-color-2.3.2.tgz#a8a17cbdba00980f4f0d0886b54b9ae50ad5d1b6"
+  integrity sha512-PfyzYFIa16MKVd2FLFmV/+moznibDCDZB6AUwV6lrL7Mz+/jjcW1JDDdCRWMHC8e7uoC3EmnYAmnpj2eF0w2vw==
+  dependencies:
+    "@uiw/color-convert" "2.3.2"
+    "@uiw/react-color-alpha" "2.3.2"
+    "@uiw/react-color-block" "2.3.2"
+    "@uiw/react-color-chrome" "2.3.2"
+    "@uiw/react-color-circle" "2.3.2"
+    "@uiw/react-color-colorful" "2.3.2"
+    "@uiw/react-color-compact" "2.3.2"
+    "@uiw/react-color-editable-input" "2.3.2"
+    "@uiw/react-color-editable-input-hsla" "2.3.2"
+    "@uiw/react-color-editable-input-rgba" "2.3.2"
+    "@uiw/react-color-github" "2.3.2"
+    "@uiw/react-color-hue" "2.3.2"
+    "@uiw/react-color-material" "2.3.2"
+    "@uiw/react-color-name" "2.3.2"
+    "@uiw/react-color-saturation" "2.3.2"
+    "@uiw/react-color-shade-slider" "2.3.2"
+    "@uiw/react-color-sketch" "2.3.2"
+    "@uiw/react-color-slider" "2.3.2"
+    "@uiw/react-color-swatch" "2.3.2"
+    "@uiw/react-color-wheel" "2.3.2"
+
+"@uiw/react-drag-event-interactive@2.3.2":
+  version "2.3.2"
+  resolved "https://registry.yarnpkg.com/@uiw/react-drag-event-interactive/-/react-drag-event-interactive-2.3.2.tgz#852447609d3d8c6b2a4a5822be58d6cb73f19756"
+  integrity sha512-lG5pJCtqbYBv7Dj0r12PE9q9yg7P2CzlQodw5ZHPY9GCSZVXHJc0g4lGvCbe/4Y8HYqM8aU4CYS8LplpX+mIQw==
+
 "@urql/core@^2.3.2":
   version "2.3.5"
   resolved "https://registry.npmjs.org/@urql/core/-/core-2.3.5.tgz"
@@ -12479,6 +12707,16 @@ colorette@^2.0.10:
   resolved "https://registry.yarnpkg.com/colorette/-/colorette-2.0.20.tgz#9eb793e6833067f7235902fcd3b09917a000a95a"
   integrity sha512-IfEDxwoWIjkeXL1eXcDiow4UbKjhLdq6/EuSVR9GMN7KVH3r9gQ83e73hsz1Nd1T3ijd5xv1wcWRYO+D6kCI2w==
 
+colors-named-hex@^1.0.1:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/colors-named-hex/-/colors-named-hex-1.0.2.tgz#353165cc548ef0fbd770280bf441ec2dfc1bb386"
+  integrity sha512-k6kq1e1pUCQvSVwIaGFq2l0LrkAPQZWyeuZn1Z8nOiYSEZiKoFj4qx690h2Kd34DFl9Me0gKS6MUwAMBJj8nuA==
+
+colors-named@^1.0.1:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/colors-named/-/colors-named-1.0.2.tgz#362dd6b520c08da8d9a77250174f0d5f2cfc5b81"
+  integrity sha512-2ANq2r393PV9njYUD66UdfBcxR1slMqRA3QRTWgCx49JoCJ+kOhyfbQYxKJbPZQIhZUcNjVOs5AlyY1WwXec3w==
+
 colors@1.0.3:
   version "1.0.3"
   resolved "https://registry.npmjs.org/colors/-/colors-1.0.3.tgz"
@@ -15641,7 +15879,7 @@ fwd-stream@^1.0.4:
   dependencies:
     readable-stream "~1.0.26-4"
 
-gensync@^1.0.0-beta.2:
+gensync@^1.0.0-beta.1, gensync@^1.0.0-beta.2:
   version "1.0.0-beta.2"
   resolved "https://registry.npmjs.org/gensync/-/gensync-1.0.0-beta.2.tgz"
   integrity sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg==
@@ -22328,7 +22566,7 @@ resolve.exports@^1.1.0:
   resolved "https://registry.npmjs.org/resolve.exports/-/resolve.exports-1.1.0.tgz"
   integrity sha512-J1l+Zxxp4XK3LUDZ9m60LRJF/mAe4z6a4xyabPHk7pvK5t35dACV32iIjJDFeWZFfZlO29w6SZ67knR0tHzJtQ==
 
-resolve@1.22.8, resolve@^1.14.2, resolve@^1.22.8:
+resolve@1.22.8, resolve@^1.14.2, resolve@^1.22.8, resolve@^1.3.2:
   version "1.22.8"
   resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.22.8.tgz#b6c87a9f2aa06dfab52e3d70ac8cde321fa5a48d"
   integrity sha512-oKWePCxqpd6FlLvGV1VU0x7bkPmmCNolxzjMf4NczoDnQcIWrAF+cPtZn5i6n+RfD2d9i0tzpKnG6Yk168yIyw==
@@ -22676,6 +22914,11 @@ semver@7.x, semver@^7.3.2, semver@^7.3.4, semver@^7.3.5:
   dependencies:
     lru-cache "^6.0.0"
 
+semver@^5.4.1:
+  version "5.7.2"
+  resolved "https://registry.yarnpkg.com/semver/-/semver-5.7.2.tgz#48d55db737c3287cd4835e17fa13feace1c41ef8"
+  integrity sha512-cBznnQ9KjJqU67B52RMC65CMarK2600WFnbkcaiwWq3xy/5haFJlshgnpjovMVJ+Hff49d8GEn0b87C5pDQ10g==
+
 semver@^6.0.0, semver@^6.2.0, semver@^6.3.0:
   version "6.3.0"
   resolved "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz"