diff --git a/src/cmem/markdown/Markdown.stories.tsx b/src/cmem/markdown/Markdown.stories.tsx
index d067e7912..2754e20cf 100644
--- a/src/cmem/markdown/Markdown.stories.tsx
+++ b/src/cmem/markdown/Markdown.stories.tsx
@@ -1,5 +1,4 @@
 import React from "react";
-import { Blockquote } from "@blueprintjs/core";
 import { Meta, StoryFn } from "@storybook/react";
 
 import { Markdown } from "./../../../index";
diff --git a/src/common/index.ts b/src/common/index.ts
index ed25944ee..5a4d72cc1 100644
--- a/src/common/index.ts
+++ b/src/common/index.ts
@@ -1,4 +1,5 @@
 import { invisibleZeroWidthCharacters } from "./utils/characters";
+import { colorCalculateDistance } from "./utils/colorCalculateDistance";
 import decideContrastColorValue from "./utils/colorDecideContrastvalue";
 import getColorConfiguration from "./utils/getColorConfiguration";
 import { getScrollParent } from "./utils/getScrollParent";
@@ -8,6 +9,7 @@ import { openInNewTab } from "./utils/openInNewTab";
 export const utils = {
     openInNewTab,
     decideContrastColorValue,
+    colorCalculateDistance,
     getColorConfiguration,
     invisibleZeroWidthCharacters,
     getGlobalVar,
diff --git a/src/common/utils/CssCustomProperties.ts b/src/common/utils/CssCustomProperties.ts
index ec9495c1d..a7166fcc9 100644
--- a/src/common/utils/CssCustomProperties.ts
+++ b/src/common/utils/CssCustomProperties.ts
@@ -13,6 +13,7 @@ interface getLocalCssStyleRulePropertiesProps extends getLocalCssStyleRulesProps
     propertyType?: "all" | "normal" | "custom";
 }
 interface getCustomPropertiesProps extends getLocalCssStyleRulesProps {
+    filterName?: (name: string) => boolean;
     removeDashPrefix?: boolean;
     returnObject?: boolean;
 }
@@ -87,7 +88,7 @@ export default class CssCustomProperties {
         const { propertyType = "all", ...otherFilters } = filter;
         return CssCustomProperties.listLocalCssStyleRules(otherFilters)
             .map((cssrule) => {
-                return [...(cssrule as any).style].map((propertyname) => {
+                return [...(cssrule as AllowedCSSRule).style].map((propertyname) => {
                     return [propertyname.trim(), (cssrule as CSSStyleRule).style.getPropertyValue(propertyname).trim()];
                 });
             })
@@ -104,17 +105,21 @@ export default class CssCustomProperties {
     };
 
     static listCustomProperties = (props: getCustomPropertiesProps = {}) => {
-        const { removeDashPrefix = true, returnObject = true, ...filterProps } = props;
+        const { removeDashPrefix = true, returnObject = true, filterName = () => true, ...filterProps } = props;
 
         const customProperties = CssCustomProperties.listLocalCssStyleRuleProperties({
             ...filterProps,
             propertyType: "custom",
-        }).map((declaration) => {
-            if (removeDashPrefix) {
-                return [declaration[0].substr(2), declaration[1]];
-            }
-            return declaration;
-        });
+        })
+            .filter((declaration) => {
+                return filterName(declaration[0]);
+            })
+            .map((declaration) => {
+                if (removeDashPrefix) {
+                    return [declaration[0].substr(2), declaration[1]];
+                }
+                return declaration;
+            });
 
         return returnObject ? Object.fromEntries(customProperties) : customProperties;
     };
diff --git a/src/common/utils/colorCalculateDistance.ts b/src/common/utils/colorCalculateDistance.ts
new file mode 100644
index 000000000..2dd04df27
--- /dev/null
+++ b/src/common/utils/colorCalculateDistance.ts
@@ -0,0 +1,28 @@
+import Color from "color";
+
+export type colorValue = Color | string;
+
+export interface colorCalculateDistanceProps {
+    // Color used to calculate distance to other color.
+    color1: colorValue;
+    // Other color used to calculate distance to color.
+    color2: colorValue;
+}
+
+/**
+ * Calculates the distance between 2 colors.
+ * To keep it simple the CIE76 formula is used.
+ * @see https://en.wikipedia.org/wiki/Color_difference#CIE76
+ */
+export const colorCalculateDistance = ({ color1, color2 }: colorCalculateDistanceProps): number | null => {
+    let colorDistance: number | null = null;
+    try {
+        const lab1 = Color(color1).lab();
+        const lab2 = Color(color2).lab();
+        colorDistance = ((lab1.l() - lab2.l()) ** 2 + (lab1.a() - lab2.a()) ** 2 + (lab1.b() - lab2.b()) ** 2) ** 0.5;
+    } catch (error) {
+        // eslint-disable-next-line no-console
+        console.warn("Received invalid colors", { color1, color2, error });
+    }
+    return colorDistance;
+};
diff --git a/src/components/Application/_colors.scss b/src/components/Application/_colors.scss
new file mode 100644
index 000000000..fbff34a9c
--- /dev/null
+++ b/src/components/Application/_colors.scss
@@ -0,0 +1,15 @@
+@use "sass:map";
+@use "sass:list";
+
+:root {
+    @each $palette-group-name, $palette-group-tints in $eccgui-color-palette-light {
+        @each $palette-tint-name, $palette-tint-colors in $palette-group-tints {
+            @for $i from 1 through list.length($palette-tint-colors) {
+                #{eccgui-color-name($palette-group-name, $palette-tint-name, ($i * 2 - 1) * 100)}: #{list.nth(
+                        $palette-tint-colors,
+                        $i
+                    )};
+            }
+        }
+    }
+}
diff --git a/src/components/Application/application.scss b/src/components/Application/application.scss
index 78d1b5d45..ea0de1677 100644
--- a/src/components/Application/application.scss
+++ b/src/components/Application/application.scss
@@ -1,4 +1,5 @@
 // @import 'config';
+@import "colors";
 @import "header";
 @import "toolbar";
 
diff --git a/src/components/Application/stories/Application.stories.tsx b/src/components/Application/stories/Application.stories.tsx
index e2feb5907..7e0aa6cf4 100644
--- a/src/components/Application/stories/Application.stories.tsx
+++ b/src/components/Application/stories/Application.stories.tsx
@@ -29,11 +29,11 @@ interface ApplicationBasicExampleProps {
 }
 
 function ApplicationBasicExample(args: ApplicationBasicExampleProps) {
-    return <></>;
+    return args ? <></> : <></>;
 }
 
 export default {
-    title: "Components/Application",
+    title: "Components/Application/Elements",
     component: ApplicationBasicExample,
     subcomponents: {
         ApplicationContainer,
diff --git a/src/components/Application/stories/ColorPalettes.stories.tsx b/src/components/Application/stories/ColorPalettes.stories.tsx
new file mode 100644
index 000000000..d0bdf3229
--- /dev/null
+++ b/src/components/Application/stories/ColorPalettes.stories.tsx
@@ -0,0 +1,640 @@
+import React from "react";
+import { render } from "react-dom";
+import { Meta, StoryFn } from "@storybook/react";
+import Color from "color";
+
+import CssCustomProperties from "./../../../common/utils/CssCustomProperties";
+import {
+    ApplicationContainer,
+    Badge,
+    Button,
+    CLASSPREFIX as eccgui,
+    ContextMenu,
+    FieldItem,
+    FieldItemRow,
+    FlexibleLayoutContainer,
+    FlexibleLayoutItem,
+    IconButton,
+    MenuItem,
+    Section,
+    SectionHeader,
+    Spacing,
+    Switch,
+    Tabs,
+    TabTitle,
+    Tag,
+    TextField,
+    TitleSubsection,
+    utils,
+} from "./../../../index";
+
+interface ColorPaletteConfiguratorProps {
+    /** Color palette as custom CSS properties */
+    customColorProperties?: string;
+    /** Default value for minimal color distance */
+    distanceMin?: number;
+    /** Default value for minimal contrast */
+    contrastMin?: number;
+    /** Enable color checks by default */
+    enableCalculations?: boolean;
+}
+
+const ColorPaletteConfigurator = ({
+    customColorProperties,
+    distanceMin = 10, // @see https://wisotop.de/farbabstand-farben-vergleichen.php
+    contrastMin = 4,
+    enableCalculations = false,
+}: ColorPaletteConfiguratorProps) => {
+    const palettePrefix = `--${eccgui}-color-palette-`;
+    const userInputDelayTime = 500;
+    const correctionStep = 0.01;
+    let userInputDelay; // timeout id
+    const refConfigurator = React.useRef<HTMLDivElement>(null);
+    const [calculateDistanceWarnings, setCalculateDistanceWarnings] = React.useState<boolean>(enableCalculations);
+    const [calculateContrastWarnings, setCalculateContrastWarnings] = React.useState<boolean>(enableCalculations);
+    const [minimalDistance, setMinimalDistance] = React.useState<number>(distanceMin);
+    const [minimalContrast, setMinimalContrast] = React.useState<number>(contrastMin);
+    const [paletteData, setPaletteData] = React.useState<object | undefined>(undefined);
+    const userPaletteRef = React.useRef<HTMLTextAreaElement | null>(null);
+
+    const createPaletteData = (csscustomprops: string | undefined) => {
+        const colors = (
+            csscustomprops
+                ? csscustomprops.split(";").map((rule: string) => {
+                      return rule.split(":").map((rulepart: string) => {
+                          return rulepart.trim();
+                      });
+                  })
+                : new CssCustomProperties({
+                      selectorText: `:root`,
+                      filterName: (name: string) => {
+                          return name.includes(palettePrefix);
+                      },
+                      removeDashPrefix: false,
+                      returnObject: false,
+                  }).customProperties()
+        )
+            .filter((colorconfig: object) => {
+                if (!Array.isArray(colorconfig)) {
+                    return false;
+                }
+                if (colorconfig.length !== 2) {
+                    return false;
+                }
+                return true;
+            })
+            .map((colorconfig: object) => {
+                return [colorconfig[0].replace(palettePrefix, ""), Color(colorconfig[1]).rgb()];
+            });
+
+        const data = new Object();
+
+        for (const [key, value] of colors) {
+            const hierarchy = key.split("-");
+            if (!data[hierarchy[0]]) {
+                data[hierarchy[0]] = new Object();
+            }
+            if (!data[hierarchy[0]][hierarchy[1]]) {
+                data[hierarchy[0]][hierarchy[1]] = new Object();
+            }
+            if (!data[hierarchy[0]][hierarchy[1]][hierarchy[2]]) {
+                data[hierarchy[0]][hierarchy[1]][hierarchy[2]] = value;
+            }
+        }
+
+        return data;
+    };
+
+    const createCustomPropsSerialization = (data: object) => {
+        let serialization = "";
+        for (const [group, tints] of Object.entries(data)) {
+            for (const [tint, weights] of Object.entries(tints as object)) {
+                for (const [weight, value] of Object.entries(weights)) {
+                    serialization =
+                        serialization +
+                        `--${eccgui}-color-palette-${group}-${tint}-${weight}: ${(value as Color).hex()};\n`;
+                }
+            }
+        }
+        return serialization.trim();
+    };
+
+    const createSassSerialization = (data: object) => {
+        const createTintData = (tint: string, weights: object) => {
+            return `\t\t"${tint}": eccgui-create-color-tints(${Object.values(weights)
+                .map((color) => color.hex())
+                .join(" ")}),\n`;
+        };
+
+        const createGroupData = (group: string, tints: object) => {
+            let groupData = `\t"${group}": (\n`;
+            for (const [tint, weights] of Object.entries(tints)) {
+                groupData = groupData + createTintData(tint, weights);
+            }
+            return groupData + `\t),\n`;
+        };
+
+        let sassData = `$eccgui-color-palette-light: (\n`;
+
+        for (const [group, tints] of Object.entries(data)) {
+            sassData = sassData + createGroupData(group, tints);
+        }
+
+        return sassData + `) !default;`;
+    };
+
+    React.useEffect(() => {
+        if (refConfigurator.current) {
+            const panelConfig = document.getElementById("bp5-tab-panel_colorconfig_editor");
+            if (panelConfig) {
+                const warnings = Array.from(panelConfig.getElementsByClassName("eccgui-badge"))
+                    .map((warning: Element) => {
+                        return (warning as HTMLElement).textContent;
+                    })
+                    .reduce((partial, value) => {
+                        return partial + parseInt(value ?? "");
+                    }, 0 as number);
+                const warningsTarget = document.getElementById("sumWarnings");
+                if (warningsTarget) {
+                    if (warnings > 0) {
+                        render(<Badge intent={"warning"}>{warnings}</Badge>, warningsTarget);
+                    } else {
+                        render(<></>, warningsTarget);
+                    }
+                }
+            }
+        }
+    });
+
+    React.useEffect(() => {
+        const paletteData = createPaletteData(customColorProperties);
+        setPaletteData(paletteData);
+    }, [customColorProperties]);
+
+    React.useEffect(() => {
+        if (userPaletteRef && userPaletteRef.current) {
+            userPaletteRef.current.value = createCustomPropsSerialization(paletteData || {});
+        }
+    }, [paletteData]);
+
+    const fixColorByLuminosity = (
+        color: Color,
+        colorTest: Color,
+        testFn: (color1: Color, color2: Color) => boolean
+    ) => {
+        let fixedColor = color as Color;
+        let check = testFn(fixedColor, colorTest);
+        while (check === true && fixedColor.luminosity() > 0 && fixedColor.luminosity() < 1) {
+            if (fixedColor.luminosity() < (colorTest as Color).luminosity()) {
+                fixedColor = fixedColor.darken(correctionStep);
+            } else {
+                fixedColor = fixedColor.lighten(correctionStep);
+            }
+            check = testFn(fixedColor, colorTest);
+        }
+
+        return fixedColor;
+    };
+
+    const createWarnings = (id: string[], colors: object) => {
+        if (
+            (!calculateDistanceWarnings && !calculateContrastWarnings) ||
+            !colors[id[0]] ||
+            !colors[id[0]][id[1]] ||
+            !colors[id[0]][id[1]][id[2]]
+        ) {
+            return undefined;
+        }
+        const color = colors[id[0]][id[1]][id[2]];
+        const warningsDistance: React.ReactElement[] = [];
+        const warningsContrast: React.ReactElement[] = [];
+        for (const [group, tints] of Object.entries(colors)) {
+            for (const [tint, weights] of Object.entries(tints as object)) {
+                for (const [weight, value] of Object.entries(weights)) {
+                    if (color.hex().toString() !== (value as Color).hex().toString()) {
+                        if (calculateDistanceWarnings) {
+                            // color distance
+                            const distance = utils.colorCalculateDistance({ color1: color, color2: value as Color });
+                            if (distance && distance < minimalDistance) {
+                                warningsDistance.push(
+                                    <MenuItem
+                                        key={tint + weight}
+                                        text={
+                                            <>
+                                                Fix with{" "}
+                                                <Tag backgroundColor={(value as Color).hex()}>{tint + weight}</Tag> (
+                                                {distance.toPrecision(2)})
+                                            </>
+                                        }
+                                    >
+                                        <MenuItem
+                                            key={"this"}
+                                            text={
+                                                <>
+                                                    Fix{" "}
+                                                    <Tag backgroundColor={(color as Color).hex()}>
+                                                        {`${id[1]}}${id[2]}}`}
+                                                    </Tag>
+                                                </>
+                                            }
+                                            onClick={() => {
+                                                colors[id[0]][id[1]][id[2]] = fixColorByLuminosity(
+                                                    color,
+                                                    value as Color,
+                                                    (c1, c2) => {
+                                                        const distance =
+                                                            utils.colorCalculateDistance({ color1: c1, color2: c2 }) ??
+                                                            0;
+                                                        // eslint-disable-next-line no-console
+                                                        console.log(`${c1.hex()} -> ${distance}`);
+                                                        return distance < minimalDistance;
+                                                    }
+                                                );
+                                                setPaletteData({ ...colors });
+                                            }}
+                                        />
+                                        <MenuItem
+                                            key={"that"}
+                                            text={
+                                                <>
+                                                    Fix{" "}
+                                                    <Tag backgroundColor={(value as Color).hex()}>
+                                                        {`${tint}${weight}`}
+                                                    </Tag>
+                                                </>
+                                            }
+                                            onClick={() => {
+                                                colors[group][tint][weight] = fixColorByLuminosity(
+                                                    value as Color,
+                                                    color,
+                                                    (c1, c2) => {
+                                                        const distance =
+                                                            utils.colorCalculateDistance({ color1: c1, color2: c2 }) ??
+                                                            0;
+                                                        // eslint-disable-next-line no-console
+                                                        console.log(`${c1.hex()} -> ${distance}`);
+                                                        return distance < minimalDistance;
+                                                    }
+                                                );
+                                                setPaletteData({ ...colors });
+                                            }}
+                                        />
+                                    </MenuItem>
+                                );
+                            }
+                        }
+                        if (calculateContrastWarnings) {
+                            // color contrasts
+                            if (
+                                // test to text/background colors in identity group
+                                (group === "identity" && (tint === "text" || tint === "background")) ||
+                                // test to same color tint
+                                (group === id[0] && tint === id[1])
+                            ) {
+                                if (
+                                    // only calculate light versions to dark versions b/c other usage combination would not make sense at all
+                                    (color.isDark() && (value as Color).isLight()) ||
+                                    (color.isLight() && (value as Color).isDark())
+                                ) {
+                                    if (color.contrast(value as Color) < minimalContrast) {
+                                        warningsContrast.push(
+                                            <MenuItem
+                                                key={tint + weight}
+                                                text={
+                                                    <>
+                                                        Fix with{" "}
+                                                        <Tag backgroundColor={(value as Color).hex()}>
+                                                            {`${tint}${weight}`} (
+                                                            {color.contrast(value as Color).toPrecision(2)})
+                                                        </Tag>
+                                                    </>
+                                                }
+                                            >
+                                                <MenuItem
+                                                    key="this"
+                                                    text={
+                                                        <>
+                                                            Fix{" "}
+                                                            <Tag backgroundColor={(color as Color).hex()}>
+                                                                {`${id[1]}}${id[2]}}`}
+                                                            </Tag>
+                                                        </>
+                                                    }
+                                                    onClick={() => {
+                                                        colors[id[0]][id[1]][id[2]] = fixColorByLuminosity(
+                                                            color,
+                                                            value as Color,
+                                                            (c1, c2) => {
+                                                                const contrast = c1.contrast(c2 as Color);
+                                                                // eslint-disable-next-line no-console
+                                                                console.log(`${c1.hex()} -> ${contrast}`);
+                                                                return contrast < minimalContrast;
+                                                            }
+                                                        );
+                                                        setPaletteData({ ...colors });
+                                                    }}
+                                                />
+                                                <MenuItem
+                                                    key="that"
+                                                    text={
+                                                        <>
+                                                            Fix{" "}
+                                                            <Tag backgroundColor={(value as Color).hex()}>
+                                                                {`${tint}${weight}`}
+                                                            </Tag>
+                                                        </>
+                                                    }
+                                                    onClick={() => {
+                                                        colors[group][tint][weight] = fixColorByLuminosity(
+                                                            value as Color,
+                                                            color,
+                                                            (c1, c2) => {
+                                                                const contrast = c1.contrast(c2 as Color);
+                                                                // eslint-disable-next-line no-console
+                                                                console.log(`${c1.hex()} -> ${contrast}`);
+                                                                return contrast < minimalContrast;
+                                                            }
+                                                        );
+                                                        setPaletteData({ ...colors });
+                                                    }}
+                                                />
+                                            </MenuItem>
+                                        );
+                                    }
+                                }
+                            }
+                        }
+                    }
+                }
+            }
+        }
+        return warningsDistance.length + warningsContrast.length > 0 ? (
+            <ContextMenu
+                togglerElement={
+                    <IconButton
+                        name="state-warning"
+                        hasStateWarning
+                        badge={warningsDistance.length + warningsContrast.length}
+                        badgeProps={{
+                            intent: "warning",
+                            position: "top-right",
+                            size: "small",
+                        }}
+                    />
+                }
+            >
+                {warningsDistance.length > 0 ? <TitleSubsection key="dist">Distances</TitleSubsection> : <></>}
+                <>{warningsDistance}</>
+                {warningsContrast.length > 0 ? <TitleSubsection key="contrast">Contrasts</TitleSubsection> : <></>}
+                <>{warningsContrast}</>
+            </ContextMenu>
+        ) : undefined;
+    };
+
+    const renderColorInput = (
+        paletteData: object = {},
+        label: string,
+        id: string[],
+        updateFn: (color: string) => void
+    ) => {
+        if (!paletteData[id[0]] || !paletteData[id[0]][id[1]] || !paletteData[id[0]][id[1]][id[2]]) {
+            return <></>;
+        }
+        const color = paletteData[id[0]][id[1]][id[2]];
+        const menuWarnings = createWarnings(id, paletteData);
+        return (
+            <FieldItem
+                key={label}
+                labelProps={{ text: label }}
+                messageText={`${color.hex()} / ${color.luminosity().toPrecision(2)}`}
+            >
+                <TextField
+                    type="color"
+                    value={color.hex()}
+                    onValueChange={(newcolor) => {
+                        if (userInputDelay) {
+                            clearTimeout(userInputDelay);
+                        }
+                        userInputDelay = setTimeout(() => {
+                            updateFn(newcolor);
+                        }, userInputDelayTime);
+                    }}
+                    intent={menuWarnings ? "warning" : undefined}
+                    rightElement={menuWarnings}
+                />
+            </FieldItem>
+        );
+    };
+
+    const editorPanel = (
+        <div>
+            <FieldItemRow justifyItemWidths>
+                <FieldItem
+                    key="distance"
+                    labelProps={{ text: "Minimal color distance" }}
+                    messageText="CIE76 formula is used"
+                >
+                    <TextField
+                        defaultValue={minimalDistance.toString()}
+                        type="number"
+                        step={1}
+                        min={1}
+                        onValueChange={(value) => {
+                            if (userInputDelay) {
+                                clearTimeout(userInputDelay);
+                            }
+                            userInputDelay = setTimeout(() => {
+                                setMinimalDistance(parseInt(value, 10));
+                            }, userInputDelayTime);
+                        }}
+                        rightElement={
+                            <Switch
+                                style={{ marginTop: "9px", marginBottom: "7px" }}
+                                checked={calculateDistanceWarnings}
+                                innerLabel="off"
+                                innerLabelChecked="calc"
+                                onChange={() => setCalculateDistanceWarnings(!calculateDistanceWarnings)}
+                            />
+                        }
+                    />
+                </FieldItem>
+                <FieldItem
+                    key="contrast"
+                    labelProps={{ text: "Minimum contrast", tooltip: "WCAG level AA: 4.5" }}
+                    messageText="Calculated to lighter/darker colors of text/background"
+                >
+                    <TextField
+                        defaultValue={minimalContrast.toString()}
+                        type="number"
+                        step={0.1}
+                        min={1}
+                        onValueChange={(value) => {
+                            if (userInputDelay) {
+                                clearTimeout(userInputDelay);
+                            }
+                            userInputDelay = setTimeout(() => {
+                                setMinimalContrast(parseFloat(value));
+                            }, userInputDelayTime);
+                        }}
+                        rightElement={
+                            <Switch
+                                style={{ marginTop: "9px", marginBottom: "7px" }}
+                                checked={calculateContrastWarnings}
+                                innerLabel="off"
+                                innerLabelChecked="calc"
+                                onChange={() => setCalculateContrastWarnings(!calculateContrastWarnings)}
+                            />
+                        }
+                    />
+                </FieldItem>
+            </FieldItemRow>
+            {paletteData &&
+                Object.keys(paletteData).map((group, id) => {
+                    return (
+                        <Section key={id}>
+                            <SectionHeader>
+                                <TitleSubsection>{group}</TitleSubsection>
+                            </SectionHeader>
+                            <Spacing size="small" />
+                            {Object.keys(paletteData[group]).map((tint, id) => {
+                                return (
+                                    <FlexibleLayoutContainer
+                                        key={id}
+                                        noEqualItemSpace
+                                        gapSize="small"
+                                        style={{
+                                            alignItems: "center",
+                                            marginBottom: "0.5rem",
+                                        }}
+                                    >
+                                        <FlexibleLayoutItem key="tints">
+                                            <FieldItemRow justifyItemWidths key={id}>
+                                                {Object.keys(paletteData[group][tint]).map((weight) => {
+                                                    return renderColorInput(
+                                                        paletteData,
+                                                        `${tint}${weight}`,
+                                                        [group, tint, weight],
+                                                        (newcolor) => {
+                                                            paletteData[group][tint][weight] = Color(newcolor).rgb();
+                                                            setPaletteData({ ...paletteData });
+                                                        }
+                                                    );
+                                                })}
+                                            </FieldItemRow>
+                                        </FlexibleLayoutItem>
+                                        <FlexibleLayoutItem key="actions" growFactor={0}>
+                                            <IconButton
+                                                name={"operation-magic"}
+                                                text="Auto-span tint value from 100 to 900"
+                                                onClick={() => {
+                                                    const tintValues = Object.values(
+                                                        paletteData[group][tint]
+                                                    ) as Color[];
+                                                    const tintKeys = Object.keys(paletteData[group][tint]);
+                                                    if (tintValues.length > 0) {
+                                                        const tint100 = tintValues[0];
+                                                        const tint900 = tintValues[tintValues.length - 1];
+                                                        tintKeys.forEach((weight, id) => {
+                                                            paletteData[group][tint][weight] = Color(tint100).mix(
+                                                                Color(tint900),
+                                                                id / (tintValues.length - 1)
+                                                            );
+                                                            // eslint-disable-next-line no-console
+                                                            console.log(
+                                                                `mix ${Color(tint100).hex()} with ${Color(
+                                                                    tint900
+                                                                ).hex()} by ${id / (tintValues.length - 1)} -> ${
+                                                                    paletteData[group][tint][weight]
+                                                                }`
+                                                            );
+                                                        });
+                                                    }
+                                                    setPaletteData({ ...paletteData });
+                                                }}
+                                            />
+                                        </FlexibleLayoutItem>
+                                    </FlexibleLayoutContainer>
+                                );
+                            })}
+                            <Spacing size="large" hasDivider />
+                        </Section>
+                    );
+                })}
+        </div>
+    );
+
+    return (
+        <ApplicationContainer>
+            <div ref={refConfigurator}>
+                <Tabs
+                    id="colorconfig"
+                    onChange={() => {}}
+                    tabs={[
+                        {
+                            id: "editor",
+                            panel: editorPanel,
+                            title: <TabTitle text="Editor" titleSuffix={<span id="sumWarnings"></span>} />,
+                        },
+                        {
+                            id: "css",
+                            panel: (
+                                <div>
+                                    <textarea
+                                        ref={userPaletteRef}
+                                        style={{
+                                            display: "block",
+                                            width: "100%",
+                                        }}
+                                        spellCheck="false"
+                                        rows={20}
+                                    />
+                                    <Spacing size="small" />
+                                    <Button
+                                        text="Load to editor"
+                                        onClick={() => {
+                                            setPaletteData(createPaletteData(userPaletteRef.current?.value));
+                                        }}
+                                    />
+                                </div>
+                            ),
+                            title: "CSS properties",
+                        },
+                        {
+                            id: "scss",
+                            panel: (
+                                <div>
+                                    <textarea
+                                        style={{
+                                            display: "block",
+                                            width: "100%",
+                                        }}
+                                        spellCheck="false"
+                                        rows={20}
+                                        readOnly
+                                        value={paletteData && createSassSerialization(paletteData)}
+                                    />
+                                </div>
+                            ),
+                            title: "SCSS configuration",
+                        },
+                    ]}
+                />
+            </div>
+        </ApplicationContainer>
+    );
+};
+
+export default {
+    title: "Components/Application/Colors",
+    component: ColorPaletteConfigurator,
+    argTypes: {},
+} as Meta<typeof ColorPaletteConfigurator>;
+
+const Template: StoryFn<typeof ColorPaletteConfigurator> = (args) => <ColorPaletteConfigurator {...args} />;
+
+export const Default = Template.bind({});
+
+Default.args = {
+    customColorProperties: "",
+    enableCalculations: false,
+};
diff --git a/src/components/Switch/Switch.tsx b/src/components/Switch/Switch.tsx
index 485d5512b..147aff94e 100644
--- a/src/components/Switch/Switch.tsx
+++ b/src/components/Switch/Switch.tsx
@@ -1,4 +1,4 @@
-import React, { memo, SyntheticEvent } from "react";
+import React, { ChangeEvent, memo } from "react";
 import { Switch as BlueprintSwitch, SwitchProps as BlueprintSwitchProps } from "@blueprintjs/core";
 
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
@@ -7,7 +7,7 @@ export interface SwitchProps extends Omit<BlueprintSwitchProps, "onChange"> {
     /**
      * Event handler for changed state.
      */
-    onChange?: (value: boolean) => any;
+    onChange?: (value: boolean) => void;
     /**
      * class names
      */
@@ -15,12 +15,16 @@ export interface SwitchProps extends Omit<BlueprintSwitchProps, "onChange"> {
 }
 
 export const Switch = ({ onChange, className, ...otherProps }: SwitchProps) => {
-    const handleChange = (e: SyntheticEvent<HTMLInputElement>) => {
-        const checked = !!(e as any).target?.checked;
-        onChange && onChange(checked);
+    const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
+        const checked = !!e.target?.checked;
+        if (onChange) {
+            onChange(checked);
+        }
     };
 
-    return <BlueprintSwitch className={`${eccgui}-switch ${className}`} {...otherProps} onChange={handleChange} />;
+    return (
+        <BlueprintSwitch className={`${eccgui}-switch ${className ?? ""}`} {...otherProps} onChange={handleChange} />
+    );
 };
 
 export default memo(Switch);
diff --git a/src/components/Tabs/stories/Tab.stories.tsx b/src/components/Tabs/stories/Tab.stories.tsx
index d7a567748..44ec92bdc 100644
--- a/src/components/Tabs/stories/Tab.stories.tsx
+++ b/src/components/Tabs/stories/Tab.stories.tsx
@@ -4,7 +4,7 @@ import { Meta, StoryFn } from "@storybook/react";
 import { Tab as TabDummyForStorybook, Tabs } from "./../../../../";
 
 export default {
-    title: "Components/Tabs",
+    title: "Components/Tabs/Tab",
     component: TabDummyForStorybook,
     argTypes: {
         backgroundColor: {
diff --git a/src/components/Tabs/stories/TabPanel.stories.tsx b/src/components/Tabs/stories/TabPanel.stories.tsx
index 0ba72f783..270a513ed 100644
--- a/src/components/Tabs/stories/TabPanel.stories.tsx
+++ b/src/components/Tabs/stories/TabPanel.stories.tsx
@@ -5,7 +5,7 @@ import { Meta, StoryFn } from "@storybook/react";
 import { TabPanel } from "./../../../";
 
 export default {
-    title: "Components/Tabs",
+    title: "Components/Tabs/TabPanel",
     component: TabPanel,
     argTypes: {},
 } as Meta<typeof TabPanel>;
diff --git a/src/components/Tabs/stories/TabTitle.stories.tsx b/src/components/Tabs/stories/TabTitle.stories.tsx
index 8bb53ba50..c4124754d 100644
--- a/src/components/Tabs/stories/TabTitle.stories.tsx
+++ b/src/components/Tabs/stories/TabTitle.stories.tsx
@@ -4,7 +4,7 @@ import { Meta, StoryFn } from "@storybook/react";
 import { Tabs, TabTitle as TabTitleOrg } from "./../../../";
 
 export default {
-    title: "Components/Tabs",
+    title: "Components/Tabs/TabTitle",
     component: TabTitleOrg,
     argTypes: {},
 } as Meta<typeof TabTitleOrg>;
diff --git a/src/configuration/_palettes.scss b/src/configuration/_palettes.scss
new file mode 100644
index 000000000..00f14f1fd
--- /dev/null
+++ b/src/configuration/_palettes.scss
@@ -0,0 +1,95 @@
+@use "sass:list";
+@use "sass:color";
+@use "sass:math";
+
+/**
+ * Always provide a list of 5 color tints.
+ * If the list do not provide 5 colors then create them based on the first and last color in the list.
+ */
+@function eccgui-create-color-tints($colorset) {
+    $colorset-steps: 5; // number of tints
+    $count-colors: list.length($colorset);
+
+    @if $count-colors == $colorset-steps {
+        @return $colorset;
+    }
+
+    @if $count-colors < 1 {
+        @error "Need at least 1 color to create color tints.";
+    }
+
+    @debug "Got only #{$count-colors} tints: #{$colorset}";
+
+    $color-tint-start: rgb(
+        color.red(list.nth($colorset, 1)),
+        color.green(list.nth($colorset, 1)),
+        color.blue(list.nth($colorset, 1))
+    );
+    $color-tint-end: rgb(
+        color.red(list.nth($colorset, -1)),
+        color.green(list.nth($colorset, -1)),
+        color.blue(list.nth($colorset, -1))
+    );
+    $colorset-fallback: $color-tint-start;
+
+    @for $i from 2 to $colorset-steps {
+        $tint-step: color.mix($color-tint-end, $color-tint-start, 100% * math.div($i - 1, $colorset-steps - 1));
+        $colorset-fallback: list.append(
+            $colorset-fallback,
+            rgb(color.red($tint-step), color.green($tint-step), color.blue($tint-step))
+        );
+
+        // @debug("mix #{$color-tint-start} with #{$color-tint-end} by #{math.div($i - 1, $colorset-steps - 1)} -> #{rgb(color.red($tint-step), color.green($tint-step), color.blue($tint-step))}")
+    }
+
+    $colorset-fallback: list.append($colorset-fallback, $color-tint-end);
+
+    @debug "Create fallback with #{$colorset-steps} tints: #{$colorset-fallback}";
+    @return $colorset-fallback;
+}
+
+/**
+ * Create name for custom property
+ */
+@function eccgui-color-name($group_or_name, $tint: null, $weight: null) {
+    @if $group_or_name && $tint && $weight {
+        @return "--#{$eccgui}-color-palette-#{$group_or_name}-#{$tint}-#{$weight}";
+    } @else {
+        @return "--#{$eccgui}-color-#{$group_or_name}";
+    }
+}
+
+/**
+ * Base definition for colors.
+ * Can be overwritten if defined before this file is included.
+ * You need to define all or nothing, we currently support overwriting it only partly.
+ */
+
+$eccgui-color-palette-light: (
+    "identity": (
+        "brand": eccgui-create-color-tints(#fae1cc #f9d7b2 #f8cd99 #f7c37f #f6b966 #f5af4c #f4a533 #f39b19 #f29100),
+        "accent": eccgui-create-color-tints(#e5f4fb rgb(10 103 163)),
+        "text": eccgui-create-color-tints(#f8f8f8 #090909),
+        "background": eccgui-create-color-tints(#fff rgb(200 200 200)),
+    ),
+    "semantic": (
+        "info": eccgui-create-color-tints(rgb(227 242 253) rgb(21 101 192)),
+        "success": eccgui-create-color-tints(rgb(232 245 233) #1b5e20),
+        "warning": eccgui-create-color-tints(rgb(255 243 224) #e65100),
+        "danger": eccgui-create-color-tints(rgb(255 235 238) #b71c1c),
+    ),
+    "layout": (
+        "indigo": eccgui-create-color-tints(#ebcef2 #d6b8e3 #c1a2d4 #ac8dc5 #9778b6 #8263a7 #6e4e98 #5a3989 #46247a),
+        "pink": eccgui-create-color-tints(#fadaec #b23a78),
+        "rajah": eccgui-create-color-tints(#fef0e1 #88592c),
+        "yellow": eccgui-create-color-tints(#fce7e7 #d4af37),
+        "lime": eccgui-create-color-tints(#cde0d6 #789f3f),
+        "teal": eccgui-create-color-tints(#9addd6 #1f7a68),
+        "cyan": eccgui-create-color-tints(#ccf9fe #00a3c4),
+        "brown": eccgui-create-color-tints(#da780d #632114),
+        "blue": eccgui-create-color-tints(#e5f4fb #0074b1),
+        "grey": eccgui-create-color-tints(#dcdde4 #101016),
+        "red": eccgui-create-color-tints(#f9ecf4 #c41e3a),
+        "green": eccgui-create-color-tints(#e8ede9 #008c30),
+    ),
+) !default;
diff --git a/src/configuration/_variables.scss b/src/configuration/_variables.scss
index 6f980db67..43750488f 100644
--- a/src/configuration/_variables.scss
+++ b/src/configuration/_variables.scss
@@ -15,6 +15,8 @@
 
 $eccgui: "eccgui" !default;
 
+@import "palettes";
+
 // -- Configuration stack of colors --------------------------------------------
 
 $eccgui-color-primary: rgb(254 143 1) !default;