diff --git a/src/hooks/useColorGenerator/__tests__/randomIndex.test.ts b/src/components/utils/common.tests.ts
similarity index 86%
rename from src/hooks/useColorGenerator/__tests__/randomIndex.test.ts
rename to src/components/utils/common.tests.ts
index 6f1d25e98d..1d6f323bd0 100644
--- a/src/hooks/useColorGenerator/__tests__/randomIndex.test.ts
+++ b/src/components/utils/common.tests.ts
@@ -1,6 +1,4 @@
-import {randomIndex} from '../utils';
-
-import {randomString} from './utils/randomString';
+import {randomIndex, randomString} from './common';
 
 describe('randomIndex', () => {
     test('returns numbers within the range [0, max)', () => {
diff --git a/src/components/utils/common.ts b/src/components/utils/common.ts
index 0a394d0ddc..69e64a6da2 100644
--- a/src/components/utils/common.ts
+++ b/src/components/utils/common.ts
@@ -10,3 +10,38 @@ export function getUniqId() {
 }
 
 export const isIcon = isOfType(Icon);
+
+const getHash = (seed: string) => {
+    let hash = 0;
+
+    for (let index = 0; index < seed.length; index++) {
+        // eslint-disable-next-line no-bitwise
+        hash = seed.charCodeAt(index) + ((hash << 5) - hash);
+    }
+
+    return hash;
+};
+
+export const randomIndex = (seed: string, max: number) => {
+    if (max === 0) {
+        return 0;
+    }
+
+    const hash = getHash(seed);
+
+    const number = Math.abs(hash) % max;
+
+    return number;
+};
+
+const MASK = 'abcdefghijklmnopqrstuvwxyz0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ';
+
+export const randomString = (length: number) => {
+    let result = '';
+
+    for (let index = length; index >= 0; index--) {
+        result += MASK[Math.round(Math.random() * (MASK.length - 1))];
+    }
+
+    return result;
+};
diff --git a/src/hooks/useColorGenerator/__stories__/ColorGenerator.scss b/src/hooks/useColorGenerator/__stories__/ColorGenerator.scss
index 100143912f..07eb5cfb10 100644
--- a/src/hooks/useColorGenerator/__stories__/ColorGenerator.scss
+++ b/src/hooks/useColorGenerator/__stories__/ColorGenerator.scss
@@ -7,6 +7,22 @@ $block: '.#{variables.$ns}color-generator';
         display: flex;
         flex-wrap: wrap;
         gap: 10px;
-        margin-block-start: 20px;
+        padding: 12px 8px;
+    }
+
+    &__grid {
+        display: inline-grid;
+        grid-template-columns: repeat(2, auto);
+        place-items: center center;
+        margin-block-end: 20px;
+
+        &-cell {
+            padding: 12px 16px;
+
+            &_head_left {
+                white-space: nowrap;
+                justify-self: end;
+            }
+        }
     }
 }
diff --git a/src/hooks/useColorGenerator/__stories__/ColoredAvatar.tsx b/src/hooks/useColorGenerator/__stories__/ColoredAvatar.tsx
index c40c81ff0b..447e935189 100644
--- a/src/hooks/useColorGenerator/__stories__/ColoredAvatar.tsx
+++ b/src/hooks/useColorGenerator/__stories__/ColoredAvatar.tsx
@@ -7,27 +7,27 @@ import {useColorGenerator} from '../useColorGenerator';
 
 type ColoredAvatarProps = AvatarProps & {
     withText: boolean;
-    mode: UseColorGeneratorProps['mode'];
-    token: UseColorGeneratorProps['token'];
+    intensity: UseColorGeneratorProps['intensity'];
+    seed: UseColorGeneratorProps['seed'];
 };
 
 export const ColoredAvatar = ({
-    mode,
+    intensity,
     theme,
-    token,
+    seed,
     withText,
     ...avatarProps
 }: ColoredAvatarProps) => {
     const {color, textColor} = useColorGenerator({
-        token,
-        mode,
+        seed,
+        intensity,
     });
 
     return (
         <Avatar
             {...avatarProps}
             theme={theme}
-            text={withText ? token : undefined}
+            text={withText ? seed : undefined}
             color={withText ? textColor : undefined}
             title={color}
             backgroundColor={color}
diff --git a/src/hooks/useColorGenerator/__stories__/useColorGenerator.stories.tsx b/src/hooks/useColorGenerator/__stories__/useColorGenerator.stories.tsx
index b33e997719..09ab87345b 100644
--- a/src/hooks/useColorGenerator/__stories__/useColorGenerator.stories.tsx
+++ b/src/hooks/useColorGenerator/__stories__/useColorGenerator.stories.tsx
@@ -2,9 +2,8 @@ import React from 'react';
 
 import type {Meta, StoryObj} from '@storybook/react';
 
-import {Button} from '../../../components/Button';
 import {block} from '../../../components/utils/cn';
-import {randomString} from '../__tests__/utils/randomString';
+import {randomString} from '../../../components/utils/common';
 
 import {ColoredAvatar} from './ColoredAvatar';
 
@@ -15,10 +14,6 @@ const b = block('color-generator');
 const meta: Meta = {
     title: 'Hooks/useColorGenerator',
     argTypes: {
-        mode: {
-            options: ['unsaturated', 'saturated', 'bright'],
-            control: {type: 'radio'},
-        },
         withText: {
             control: 'boolean',
         },
@@ -29,41 +24,64 @@ export default meta;
 
 type Story = StoryObj<typeof ColoredAvatar>;
 
-const initValues = () => {
-    const result = Array.from({length: 10}, () => randomString(16));
-
-    return result;
-};
+const views = ['-', 'light', 'medium', 'heavy'] as const;
+const states = ['view', 'colors'] as const;
 
 const Template = (args: React.ComponentProps<typeof ColoredAvatar>) => {
-    const {mode, withText} = args;
-    const [tokens, setTokens] = React.useState<string[]>(initValues);
+    const items = [];
+    const tokens = Array.from({length: 10}, () => randomString(16));
+
+    for (const view of views) {
+        for (const state of states) {
+            const key = `${view}_${state}`;
+
+            if (view === '-' && state === 'view') {
+                items.push(
+                    <div key={key} className={b('grid-cell', {head: 'left'})}>
+                        <strong>view\state</strong>
+                    </div>,
+                );
+            } else if (state === 'view') {
+                items.push(
+                    <div key={key} className={b('grid-cell', {head: 'left'})}>
+                        <strong>{view}</strong>
+                    </div>,
+                );
+            } else if (view === '-') {
+                items.push(
+                    <div key={key} className={b('grid-cell', {head: 'top'})}>
+                        <strong>{state}</strong>
+                    </div>,
+                );
+            } else {
+                const props = {
+                    ...args,
+                    intensity: view,
+                };
 
-    const onClick = React.useCallback(() => {
-        const newToken = randomString(16);
-        setTokens((prev) => [newToken, ...prev]);
-    }, []);
+                items.push(
+                    <div className={b('color-items')}>
+                        {tokens.map((token) => (
+                            <ColoredAvatar {...props} key={token} seed={token} />
+                        ))}
+                    </div>,
+                );
+            }
+        }
+    }
 
     return (
-        <React.Fragment>
-            <Button title="generate color" onClick={onClick}>
-                Generate color
-            </Button>
-            <div className={b('color-items')}>
-                {tokens.map((token) => (
-                    <ColoredAvatar key={token} token={token} mode={mode} withText={withText} />
-                ))}
-            </div>
-        </React.Fragment>
+        <div className={b()}>
+            <div className={b('grid')}>{items}</div>
+        </div>
     );
 };
 
-export const Default: Story = {
+export const View: Story = {
     render: (args) => {
         return <Template {...args} />;
     },
     args: {
-        mode: 'unsaturated',
         withText: false,
     },
 };
diff --git a/src/hooks/useColorGenerator/__tests__/utils/randomString.ts b/src/hooks/useColorGenerator/__tests__/utils/randomString.ts
deleted file mode 100644
index 424c1b3942..0000000000
--- a/src/hooks/useColorGenerator/__tests__/utils/randomString.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-const MASK = 'abcdefghijklmnopqrstuvwxyz0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ';
-
-export const randomString = (length: number) => {
-    let result = '';
-
-    for (let index = length; index >= 0; index--) {
-        result += MASK[Math.round(Math.random() * (MASK.length - 1))];
-    }
-
-    return result;
-};
diff --git a/src/hooks/useColorGenerator/color.ts b/src/hooks/useColorGenerator/color.ts
index 782c393f6d..f3c20ac7f3 100644
--- a/src/hooks/useColorGenerator/color.ts
+++ b/src/hooks/useColorGenerator/color.ts
@@ -1,130 +1,87 @@
 /* eslint-disable no-bitwise */
 import {BLACK_COLOR, WHITE_COLOR, colorOptions} from './constants';
-import type {ColorProps, ThemeColorSettings} from './types';
-import {getHue, hashFnv32a, normalizeHash, randomIndex} from './utils';
-
-export class ColorGenerator {
-    private _colorKeys?: string[];
-    private _saturation?: number;
-    private _lightness?: number;
-    private _token: string;
-    private _hash: number;
-    private _mode: ColorProps['mode'];
-    private _hue: number | null;
-    private _saturationRange: [number, number];
-    private _lightnessRange: [number, number];
-    private _themeOptions: ThemeColorSettings;
-
-    constructor({token, colorKeys, theme, mode}: ColorProps) {
-        this._token = token;
-        this._mode = mode ?? 'unsaturated';
-        this._hash = this.getHash(token);
-        this._colorKeys = colorKeys;
-        this._themeOptions = colorOptions[theme];
-        this._lightnessRange = this._themeOptions[this._mode].lightness;
-        this._saturationRange = this._themeOptions[this._mode].situration;
-        this._hue = null;
-    }
-
-    get color() {
-        if (this._colorKeys && this._colorKeys.length > 0) {
-            const index = this.getColorKeysIndex();
+import type {ColorProps, HslColorProps} from './types';
+import {getHue, hashFnv32a, normalizeHash} from './utils';
 
-            return this._colorKeys[index];
-        }
+// https://en.wikipedia.org/wiki/HSL_and_HSV#HSL_to_RGB
+const hslToRgb = (h: number, s: number, l: number) => {
+    s /= 100;
+    l /= 100;
 
-        return this.hslColor();
-    }
+    const k = (n: number) => (n + h / 30) % 12;
+    const a = s * Math.min(l, 1 - l);
 
-    get textColor() {
-        if (!this._hue || !this._saturation || !this._lightness) {
-            return WHITE_COLOR;
-        }
+    const f = (n: number) => {
+        return l - a * Math.max(-1, Math.min(k(n) - 3, Math.min(9 - k(n), 1)));
+    };
 
-        return this.getTextColor(this._hue, this._saturation, this._lightness);
-    }
+    const r = ~~(255 * f(0));
+    const g = ~~(255 * f(8));
+    const b = ~~(255 * f(4));
 
-    private getColorKeysIndex() {
-        if (!this._colorKeys || this._colorKeys.length === 0) {
-            return -1;
-        }
+    return [r, g, b] as [number, number, number];
+};
 
-        return randomIndex(this._token, this._colorKeys.length);
-    }
+// https://www.w3.org/TR/WCAG20/#relativeluminancedef
+const getRelativeLuminance = (h: number, s: number, l: number) => {
+    const rgb = hslToRgb(h, s, l);
+    const N = rgb.length;
+    const normalizedValues = Array(N);
 
-    // https://en.wikipedia.org/wiki/HSL_and_HSV#HSL_to_RGB
-    private hslToRgb = (h: number, s: number, l: number) => {
-        s /= 100;
-        l /= 100;
+    for (let i = 0; i < N; i++) {
+        let c = rgb[i];
+        c /= 255.0;
 
-        const k = (n: number) => (n + h / 30) % 12;
-        const a = s * Math.min(l, 1 - l);
+        if (c <= 0.04045) {
+            c /= 12.92;
+        } else {
+            c = Math.pow((c + 0.055) / 1.055, 2.4);
+        }
 
-        const f = (n: number) => {
-            return l - a * Math.max(-1, Math.min(k(n) - 3, Math.min(9 - k(n), 1)));
-        };
+        normalizedValues[i] = c;
+    }
 
-        const r = ~~(255 * f(0));
-        const g = ~~(255 * f(8));
-        const b = ~~(255 * f(4));
+    const [r, g, b] = normalizedValues;
+    const L = 0.2126 * r + 0.7152 * g + 0.0722 * b;
 
-        return [r, g, b] as [number, number, number];
-    };
+    return L;
+};
 
-    // https://www.w3.org/TR/WCAG20/#relativeluminancedef
-    private getTextColor(
-        h: number,
-        s: number,
-        l: number,
-        lightColor = WHITE_COLOR,
-        darkColor = BLACK_COLOR,
-    ) {
-        const rgb = this.hslToRgb(h, s, l);
-        const N = rgb.length;
-        const normalizedValues = Array(N);
-
-        for (let i = 0; i < N; i++) {
-            let c = rgb[i];
-            c /= 255.0;
-
-            if (c <= 0.04045) {
-                c /= 12.92;
-            } else {
-                c = Math.pow((c + 0.055) / 1.055, 2.4);
-            }
-
-            normalizedValues[i] = c;
-        }
+const getHash = (seed: string) => {
+    const hash = hashFnv32a(seed, 0x73_6f_6d_65) ^ hashFnv32a(seed, 0x64_6f_72_61);
 
-        const [r, g, b] = normalizedValues;
-        const L = 0.2126 * r + 0.7152 * g + 0.0722 * b;
+    return hash;
+};
 
-        return L > 0.179 ? darkColor : lightColor;
-    }
+const generateHSLColor = ({hash, intensity, theme}: HslColorProps) => {
+    const hue = getHue(hash);
+    const themeOptions = colorOptions[theme];
+    const lightnessRange = themeOptions[intensity].lightness;
+    const saturationRange = themeOptions[intensity].situration;
 
-    private hslColor() {
-        this._hue = getHue(this._hash);
+    const saturation = normalizeHash(hash, saturationRange[0], saturationRange[1]);
+    const lightness = normalizeHash(hash, lightnessRange[0], lightnessRange[1]);
 
-        this._saturation = normalizeHash(
-            this._hash,
-            this._saturationRange[0],
-            this._saturationRange[1],
-        );
+    const color = `hsl(${hue}deg ${saturation}% ${lightness}%)`;
 
-        this._lightness = normalizeHash(
-            this._hash,
-            this._lightnessRange[0],
-            this._lightnessRange[1],
-        );
+    return {color, hue, saturation, lightness};
+};
 
-        const color = `hsl(${this._hue}deg ${this._saturation}% ${this._lightness}%)`;
+export const getPersistentColor = ({seed, intensity = 'light', theme}: ColorProps) => {
+    const hash = getHash(seed);
+    const values = generateHSLColor({hash, intensity, theme});
 
-        return color;
-    }
+    return values;
+};
 
-    private getHash(token: string) {
-        const hash = hashFnv32a(token, 0x73_6f_6d_65) ^ hashFnv32a(token, 0x64_6f_72_61);
+export const getTextColor = (
+    h: number,
+    s: number,
+    l: number,
+    lightColor = WHITE_COLOR,
+    darkColor = BLACK_COLOR,
+) => {
+    const L = getRelativeLuminance(h, s, l);
 
-        return hash;
-    }
-}
+    return L > 0.179 ? darkColor : lightColor;
+};
diff --git a/src/hooks/useColorGenerator/constants.ts b/src/hooks/useColorGenerator/constants.ts
index b0d6b1b0d6..697c69ab6a 100644
--- a/src/hooks/useColorGenerator/constants.ts
+++ b/src/hooks/useColorGenerator/constants.ts
@@ -1,32 +1,32 @@
 import type {ColorOptions, ThemeColorSettings} from './types';
 
-const bright: ColorOptions = {
+const heavy: ColorOptions = {
     lightness: [45, 55],
     situration: [45, 55],
 };
 
 export const colorOptions: Record<string, ThemeColorSettings> = {
     dark: {
-        saturated: {
-            lightness: [40, 80],
-            situration: [15, 55],
-        },
-        unsaturated: {
+        light: {
             lightness: [25, 35],
             situration: [45, 55],
         },
-        bright,
-    },
-    light: {
-        saturated: {
+        medium: {
             lightness: [40, 80],
             situration: [15, 55],
         },
-        unsaturated: {
+        heavy,
+    },
+    light: {
+        light: {
             lightness: [80, 90],
             situration: [45, 55],
         },
-        bright,
+        medium: {
+            lightness: [40, 80],
+            situration: [15, 55],
+        },
+        heavy,
     },
 };
 
diff --git a/src/hooks/useColorGenerator/types.ts b/src/hooks/useColorGenerator/types.ts
index 13fbfe20a7..0f21e9eafe 100644
--- a/src/hooks/useColorGenerator/types.ts
+++ b/src/hooks/useColorGenerator/types.ts
@@ -4,20 +4,26 @@ export type ColorOptions = {
 };
 
 export type ThemeColorSettings = {
-    saturated: ColorOptions;
-    unsaturated: ColorOptions;
-    bright: ColorOptions;
+    light: ColorOptions;
+    medium: ColorOptions;
+    heavy: ColorOptions;
 };
 
+export type INTENSITY = 'light' | 'medium' | 'heavy';
+
 export type ColorProps = {
-    colorKeys?: string[];
-    mode?: 'saturated' | 'unsaturated' | 'bright';
-    token: string;
+    intensity?: INTENSITY;
+    seed: string;
     theme: string;
 };
 
 export type UseColorGeneratorProps = {
-    colorKeys?: string[];
-    mode?: 'saturated' | 'unsaturated' | 'bright';
-    token: string;
+    intensity?: INTENSITY;
+    seed: string;
+};
+
+export type HslColorProps = {
+    hash: number;
+    intensity: INTENSITY;
+    theme: string;
 };
diff --git a/src/hooks/useColorGenerator/useColorGenerator.ts b/src/hooks/useColorGenerator/useColorGenerator.ts
index c5cbe58080..167a6f33d9 100644
--- a/src/hooks/useColorGenerator/useColorGenerator.ts
+++ b/src/hooks/useColorGenerator/useColorGenerator.ts
@@ -1,7 +1,7 @@
 /* eslint-disable valid-jsdoc */
 import {useThemeType} from '../../components/theme/useThemeType';
 
-import {ColorGenerator} from './color';
+import {getPersistentColor, getTextColor} from './color';
 import type {UseColorGeneratorProps} from './types';
 
 /**
@@ -32,10 +32,12 @@ import type {UseColorGeneratorProps} from './types';
 export function useColorGenerator(props: UseColorGeneratorProps) {
     const theme = useThemeType();
 
-    const options = new ColorGenerator({
+    const {color, hue, saturation, lightness} = getPersistentColor({
         ...props,
         theme,
     });
 
-    return options;
+    const textColor = getTextColor(hue, saturation, lightness);
+
+    return {color, textColor};
 }
diff --git a/src/hooks/useColorGenerator/__tests__/getHue.test.ts b/src/hooks/useColorGenerator/utils.test.ts
similarity index 88%
rename from src/hooks/useColorGenerator/__tests__/getHue.test.ts
rename to src/hooks/useColorGenerator/utils.test.ts
index 60972e7ac0..c8cefc3876 100644
--- a/src/hooks/useColorGenerator/__tests__/getHue.test.ts
+++ b/src/hooks/useColorGenerator/utils.test.ts
@@ -1,4 +1,4 @@
-import {getHue} from '../utils'; // Подставьте правильное имя файла
+import {getHue} from './utils';
 
 describe('getHue', () => {
     test('returns values within the range [0, 360)', () => {
diff --git a/src/hooks/useColorGenerator/utils.ts b/src/hooks/useColorGenerator/utils.ts
index 4fbc48722c..432af23428 100644
--- a/src/hooks/useColorGenerator/utils.ts
+++ b/src/hooks/useColorGenerator/utils.ts
@@ -17,35 +17,13 @@ export const normalizeHash = (hash: number, min: number, max: number) => {
     return normalizedHash;
 };
 
-export const hashFnv32a = (token: string, start: number) => {
+export const hashFnv32a = (seed: string, start: number) => {
     let hval = start;
 
-    for (let index = 0; index < token.length; index++) {
-        hval ^= token.charCodeAt(index);
+    for (let index = 0; index < seed.length; index++) {
+        hval ^= seed.charCodeAt(index);
         hval += (hval << 1) + (hval << 4) + (hval << 7) + (hval << 8) + (hval << 24);
     }
 
     return hval >>> 0;
 };
-
-export const getHash = (token: string) => {
-    let hash = 0;
-
-    for (let index = 0; index < token.length; index++) {
-        hash = token.charCodeAt(index) + ((hash << 5) - hash);
-    }
-
-    return hash;
-};
-
-export const randomIndex = (token: string, max: number) => {
-    if (max === 0) {
-        return 0;
-    }
-
-    const hash = getHash(token);
-
-    const number = Math.abs(hash) % max;
-
-    return number;
-};