diff --git a/package.json b/package.json
index dc91a99f08a1b59060495dda7f7fe532ec30109e..4cf34d33a72916303aa6cf834ab8b7e4f1e2a1ba 100644
--- a/package.json
+++ b/package.json
@@ -15,8 +15,8 @@
     "prepare": "husky install",
     "postinstall": "husky install",
     "test": "jest --config ./jest.config.ts --transformIgnorePatterns 'node_modules/(?!(ol|geotiff|quick-lru|color-space|color-rgba|color-parse|.*\\.mjs$))'",
-    "test:ci": "jest --config ./jest.config.ts --collectCoverage --coverageDirectory=\"./coverage\" --ci --reporters=default --reporters=jest-junit --watchAll=false --passWithNoTests --transformIgnorePatterns 'node_modules/(?!(ol|geotiff|quick-lru|color-space|color-rgba|color-parse|.*\\.mjs$))'",
     "test:watch": "jest --watch --config ./jest.config.ts --transformIgnorePatterns 'node_modules/(?!(ol|geotiff|quick-lru|color-space|color-rgba|color-parse|.*\\.mjs$))'",
+    "test:ci": "jest --config ./jest.config.ts --collectCoverage --coverageDirectory=\"./coverage\" --ci --reporters=default --reporters=jest-junit --watchAll=false --passWithNoTests --transformIgnorePatterns 'node_modules/(?!(ol|geotiff|quick-lru|color-space|color-rgba|color-parse|.*\\.mjs$))'",
     "test:coverage": "jest --watchAll --coverage --config ./jest.config.ts --transformIgnorePatterns 'node_modules/(?!(ol|geotiff|quick-lru|.*\\.mjs$))'",
     "test:coveragee": "jest --coverage --transformIgnorePatterns 'node_modules/(?!(ol|geotiff|quick-lru|.*\\.mjs$))'",
     "coverage": "open ./coverage/lcov-report/index.html",
diff --git a/src/components/Map/MapViewer/utils/config/overlaysLayer/getColorByAvailableProperties.test.ts b/src/components/Map/MapViewer/utils/config/overlaysLayer/getColorByAvailableProperties.test.ts
deleted file mode 100644
index 6b71e37ee7f09fe9fb74e4aab6a6e9bc7bf420a0..0000000000000000000000000000000000000000
--- a/src/components/Map/MapViewer/utils/config/overlaysLayer/getColorByAvailableProperties.test.ts
+++ /dev/null
@@ -1,73 +0,0 @@
-import { OverlayBioEntityRender } from '@/types/OLrendering';
-import { getColorByAvailableProperties } from './getColorByAvailableProperties';
-
-describe('getColorByAvailableProperties', () => {
-  const ENTITY: OverlayBioEntityRender = {
-    id: 0,
-    modelId: 0,
-    x1: 0,
-    y1: 0,
-    x2: 0,
-    y2: 0,
-    width: 0,
-    height: 0,
-    value: null,
-    overlayId: 0,
-    color: null,
-  };
-
-  const getHexTricolorGradientColorWithAlpha = jest.fn().mockReturnValue('#FFFFFF');
-  const defaultColor = '#000000';
-
-  beforeEach(() => {
-    jest.clearAllMocks();
-  });
-
-  it('should return the result of getHexTricolorGradientColorWithAlpha if entity has a value equal to 0', () => {
-    const entity = { ...ENTITY, value: 0 };
-    const result = getColorByAvailableProperties(
-      entity,
-      getHexTricolorGradientColorWithAlpha,
-      defaultColor,
-    );
-
-    expect(result).toEqual('#FFFFFF');
-    expect(getHexTricolorGradientColorWithAlpha).toHaveBeenCalledWith(entity.value);
-  });
-
-  it('should return the result of getHexTricolorGradientColorWithAlpha if entity has a value', () => {
-    const entity = { ...ENTITY, value: -0.2137 };
-    const result = getColorByAvailableProperties(
-      entity,
-      getHexTricolorGradientColorWithAlpha,
-      defaultColor,
-    );
-
-    expect(result).toEqual('#FFFFFF');
-    expect(getHexTricolorGradientColorWithAlpha).toHaveBeenCalledWith(entity.value);
-  });
-
-  it('should return the result of convertDecimalToHex if entity has a color', () => {
-    const entity = { ...ENTITY, color: { rgb: -65536, alpha: 0 } }; // red  color
-
-    const result = getColorByAvailableProperties(
-      entity,
-      getHexTricolorGradientColorWithAlpha,
-      defaultColor,
-    );
-
-    expect(result).toEqual('#ff0000');
-    expect(getHexTricolorGradientColorWithAlpha).not.toHaveBeenCalled();
-  });
-
-  it('should return the default color if entity has neither a value nor a color', () => {
-    const result = getColorByAvailableProperties(
-      ENTITY,
-      getHexTricolorGradientColorWithAlpha,
-      defaultColor,
-    );
-
-    expect(result).toEqual('#000000');
-    expect(getHexTricolorGradientColorWithAlpha).not.toHaveBeenCalled();
-  });
-});
diff --git a/src/components/Map/MapViewer/utils/config/overlaysLayer/getColorByAvailableProperties.ts b/src/components/Map/MapViewer/utils/config/overlaysLayer/getColorByAvailableProperties.ts
deleted file mode 100644
index 6cbc988306822a2bcd1bd2a4cc1aabbc7d24b4f4..0000000000000000000000000000000000000000
--- a/src/components/Map/MapViewer/utils/config/overlaysLayer/getColorByAvailableProperties.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-import { ZERO } from '@/constants/common';
-import type { GetHex3ColorGradientColorWithAlpha } from '@/hooks/useTriColorLerp';
-import { OverlayBioEntityRender } from '@/types/OLrendering';
-import { convertDecimalToHexColor } from '@/utils/convert/convertDecimalToHex';
-
-export const getColorByAvailableProperties = (
-  entity: OverlayBioEntityRender,
-  getHexTricolorGradientColorWithAlpha: GetHex3ColorGradientColorWithAlpha,
-  defaultColor: string,
-): string => {
-  if (typeof entity.value === 'number') {
-    return getHexTricolorGradientColorWithAlpha(entity.value || ZERO);
-  }
-  if (entity.color) {
-    return convertDecimalToHexColor(entity.color.rgb);
-  }
-  return defaultColor;
-};
diff --git a/src/components/Map/MapViewer/utils/config/overlaysLayer/getOverlayFeatures.ts b/src/components/Map/MapViewer/utils/config/overlaysLayer/getOverlayFeatures.ts
deleted file mode 100644
index 45723ea8732116db8d006f6ad510d4c5f36f5646..0000000000000000000000000000000000000000
--- a/src/components/Map/MapViewer/utils/config/overlaysLayer/getOverlayFeatures.ts
+++ /dev/null
@@ -1,48 +0,0 @@
-import type { GetHex3ColorGradientColorWithAlpha } from '@/hooks/useTriColorLerp';
-import { OverlayBioEntityRender } from '@/types/OLrendering';
-import { UsePointToProjectionResult } from '@/utils/map/usePointToProjection';
-import type Feature from 'ol/Feature';
-import type Polygon from 'ol/geom/Polygon';
-import { OverlayOrder } from '@/redux/overlayBioEntity/overlayBioEntity.utils';
-import { ZERO } from '@/constants/common';
-import { createOverlayGeometryFeature } from './createOverlayGeometryFeature';
-import { getColorByAvailableProperties } from './getColorByAvailableProperties';
-import { getPolygonLatitudeCoordinates } from './getPolygonLatitudeCoordinates';
-
-type GetOverlayFeaturesProps = {
-  bioEntities: OverlayBioEntityRender[];
-  pointToProjection: UsePointToProjectionResult;
-  getHex3ColorGradientColorWithAlpha: GetHex3ColorGradientColorWithAlpha;
-  defaultColor: string;
-  overlaysOrder: OverlayOrder[];
-};
-
-export const getOverlayFeatures = ({
-  bioEntities,
-  pointToProjection,
-  getHex3ColorGradientColorWithAlpha,
-  defaultColor,
-  overlaysOrder,
-}: GetOverlayFeaturesProps): Feature<Polygon>[] =>
-  bioEntities.map(entity => {
-    /**
-     * Depending on number of active overlays
-     * it's required to calculate xMin and xMax coordinates of the polygon
-     * so "entity" might be devided equali between active overlays
-     */
-    const { xMin, xMax } = getPolygonLatitudeCoordinates({
-      width: entity.width,
-      nOverlays: overlaysOrder.length,
-      xMin: entity.x1,
-      overlayIndexBasedOnOrder:
-        overlaysOrder.find(({ id }) => id === entity.overlayId)?.index || ZERO,
-    });
-
-    return createOverlayGeometryFeature(
-      [
-        ...pointToProjection({ x: xMin, y: entity.y1 }),
-        ...pointToProjection({ x: xMax, y: entity.y2 }),
-      ],
-      getColorByAvailableProperties(entity, getHex3ColorGradientColorWithAlpha, defaultColor),
-    );
-  });
diff --git a/src/components/Map/MapViewer/utils/config/overlaysLayer/useGetOverlayColor.test.ts b/src/components/Map/MapViewer/utils/config/overlaysLayer/useGetOverlayColor.test.ts
new file mode 100644
index 0000000000000000000000000000000000000000..b580a998904b2975b82c0a527aa805c748c38288
--- /dev/null
+++ b/src/components/Map/MapViewer/utils/config/overlaysLayer/useGetOverlayColor.test.ts
@@ -0,0 +1,62 @@
+import { renderHook } from '@testing-library/react';
+import { getReduxWrapperWithStore } from '@/utils/testing/getReduxWrapperWithStore';
+import { CONFIGURATION_INITIAL_STORE_MOCKS } from '@/redux/configuration/configuration.mock';
+import { OverlayBioEntityRender } from '@/types/OLrendering';
+import { useGetOverlayColor } from './useGetOverlayColor';
+
+describe('useOverlayFeatures - hook', () => {
+  const { Wrapper } = getReduxWrapperWithStore({
+    configuration: {
+      ...CONFIGURATION_INITIAL_STORE_MOCKS,
+    },
+  });
+  const {
+    result: {
+      current: { getOverlayBioEntityColorByAvailableProperties },
+    },
+  } = renderHook(() => useGetOverlayColor(), {
+    wrapper: Wrapper,
+  });
+
+  describe('getOverlayBioEntityColorByAvailableProperties - function', () => {
+    const ENTITY: OverlayBioEntityRender = {
+      id: 0,
+      modelId: 0,
+      x1: 0,
+      y1: 0,
+      x2: 0,
+      y2: 0,
+      width: 0,
+      height: 0,
+      value: null,
+      overlayId: 0,
+      color: null,
+    };
+
+    it('should return color based on value', () => {});
+
+    it('should return the correct result if entity has a value equal to 0', () => {
+      const entity = { ...ENTITY, value: 0 };
+
+      expect(getOverlayBioEntityColorByAvailableProperties(entity)).toEqual('#FFFFFFcc');
+    });
+
+    it('should return the result if entity has a value', () => {
+      const entity = { ...ENTITY, value: -0.2137 };
+
+      expect(getOverlayBioEntityColorByAvailableProperties(entity)).toEqual('#FFC9C9cc');
+    });
+
+    it('should return the correct result if entity has a color but no value', () => {
+      const entity = { ...ENTITY, color: { rgb: -65536, alpha: 0 } }; // red  color
+
+      expect(getOverlayBioEntityColorByAvailableProperties(entity)).toEqual('#ff0000cc');
+    });
+
+    it('should return the default color if entity has neither a value nor a color', () => {
+      const entity = { ...ENTITY };
+
+      expect(getOverlayBioEntityColorByAvailableProperties(entity)).toEqual('#00FF00cc');
+    });
+  });
+});
diff --git a/src/components/Map/MapViewer/utils/config/overlaysLayer/useGetOverlayColor.ts b/src/components/Map/MapViewer/utils/config/overlaysLayer/useGetOverlayColor.ts
new file mode 100644
index 0000000000000000000000000000000000000000..64518c5e005318aca9f21c9635478e735043330b
--- /dev/null
+++ b/src/components/Map/MapViewer/utils/config/overlaysLayer/useGetOverlayColor.ts
@@ -0,0 +1,73 @@
+import { useCallback, useMemo } from 'react';
+import { WHITE_HEX_OPACITY_0 } from '@/constants/hexColors';
+import {
+  maxColorValSelector,
+  minColorValSelector,
+  neutralColorValSelector,
+  overlayOpacitySelector,
+  simpleColorValSelector,
+} from '@/redux/configuration/configuration.selectors';
+import { useAppSelector } from '@/redux/hooks/useAppSelector';
+import { getHexTricolorGradientColorWithAlpha } from '@/utils/convert/getHexTricolorGradientColorWithAlpha';
+import { ONE, ZERO } from '@/constants/common';
+import { OverlayBioEntityRender } from '@/types/OLrendering';
+import { addAlphaToHexString } from '@/utils/convert/addAlphaToHexString';
+import { getHexStringColorFromRGBIntWithAlpha } from '@/utils/convert/getHexStringColorFromRGBIntWithAlpha';
+
+type GetOverlayBioEntityColorByAvailableProperties = (entity: OverlayBioEntityRender) => string;
+
+type UseTriColorLerpReturn = {
+  getOverlayBioEntityColorByAvailableProperties: GetOverlayBioEntityColorByAvailableProperties;
+};
+
+export const useGetOverlayColor = (): UseTriColorLerpReturn => {
+  const minColorValHexString = useAppSelector(minColorValSelector) || '';
+  const maxColorValHexString = useAppSelector(maxColorValSelector) || '';
+  const neutralColorValHexString = useAppSelector(neutralColorValSelector) || '';
+  const overlayOpacityValue = useAppSelector(overlayOpacitySelector) || ONE;
+  const simpleColorValue = useAppSelector(simpleColorValSelector) || WHITE_HEX_OPACITY_0;
+
+  const getHex3ColorGradientColorWithAlpha = useCallback(
+    (position: number) =>
+      getHexTricolorGradientColorWithAlpha({
+        leftColor: minColorValHexString,
+        middleColor: neutralColorValHexString,
+        rightColor: maxColorValHexString,
+        position,
+        alpha: Number(overlayOpacityValue),
+      }),
+    [minColorValHexString, neutralColorValHexString, maxColorValHexString, overlayOpacityValue],
+  );
+
+  const getHexColorFromRGBIntWithAlpha = useCallback(
+    (rgbInt: number) =>
+      getHexStringColorFromRGBIntWithAlpha({ rgbInt, alpha: Number(overlayOpacityValue) }),
+    [overlayOpacityValue],
+  );
+
+  const defaultColorHex = useMemo(
+    () => addAlphaToHexString(simpleColorValue, Number(overlayOpacityValue)),
+    [simpleColorValue, overlayOpacityValue],
+  );
+
+  /**
+   * Entity might have 3 properties that indicates color:
+   * value - which value from [-1,1] range and needs to interpolate between minColorVal, neutralColorVal and maxColorVal
+   * color - which is integer representation of color and needs to be converted to hex string
+   * defaultColor - which is hex string representation of color. It occurs when color and value are not available
+   */
+  const getOverlayBioEntityColorByAvailableProperties = useCallback(
+    (entity: OverlayBioEntityRender) => {
+      if (typeof entity.value === 'number') {
+        return getHex3ColorGradientColorWithAlpha(entity.value || ZERO);
+      }
+      if (entity.color) {
+        return getHexColorFromRGBIntWithAlpha(entity.color.rgb);
+      }
+      return defaultColorHex;
+    },
+    [getHex3ColorGradientColorWithAlpha, getHexColorFromRGBIntWithAlpha, defaultColorHex],
+  );
+
+  return { getOverlayBioEntityColorByAvailableProperties };
+};
diff --git a/src/components/Map/MapViewer/utils/config/overlaysLayer/useOlMapOverlaysLayer.ts b/src/components/Map/MapViewer/utils/config/overlaysLayer/useOlMapOverlaysLayer.ts
index 71247c54a4bc0ae7ac0091de51336ac64c5d73cc..1fb0084b4de573f5a94c58e9145cfc18424a111a 100644
--- a/src/components/Map/MapViewer/utils/config/overlaysLayer/useOlMapOverlaysLayer.ts
+++ b/src/components/Map/MapViewer/utils/config/overlaysLayer/useOlMapOverlaysLayer.ts
@@ -1,16 +1,9 @@
-import { useTriColorLerp } from '@/hooks/useTriColorLerp';
-import { useAppSelector } from '@/redux/hooks/useAppSelector';
-import {
-  getOverlayOrderSelector,
-  overlayBioEntitiesForCurrentModelSelector,
-} from '@/redux/overlayBioEntity/overlayBioEntity.selector';
-import { usePointToProjection } from '@/utils/map/usePointToProjection';
-import { Feature } from 'ol';
-import { Geometry } from 'ol/geom';
+import Geometry from 'ol/geom/Geometry';
 import VectorLayer from 'ol/layer/Vector';
 import VectorSource from 'ol/source/Vector';
+import { Feature } from 'ol';
 import { useMemo } from 'react';
-import { getOverlayFeatures } from './getOverlayFeatures';
+import { useOverlayFeatures } from './useOverlayFeatures';
 
 /**
  * Prerequisites: "view" button triggers opening overlays -> it triggers downloading overlayBioEntityData for given overlay for ALL available submaps(models)
@@ -27,34 +20,13 @@ import { getOverlayFeatures } from './getOverlayFeatures';
  */
 
 export const useOlMapOverlaysLayer = (): VectorLayer<VectorSource<Feature<Geometry>>> => {
-  const pointToProjection = usePointToProjection();
-  const { getHex3ColorGradientColorWithAlpha, defaultColorHex } = useTriColorLerp();
-  const bioEntities = useAppSelector(overlayBioEntitiesForCurrentModelSelector);
-  const overlaysOrder = useAppSelector(getOverlayOrderSelector);
-
-  const features = useMemo(
-    () =>
-      getOverlayFeatures({
-        bioEntities,
-        pointToProjection,
-        getHex3ColorGradientColorWithAlpha,
-        defaultColor: defaultColorHex,
-        overlaysOrder,
-      }),
-    [
-      bioEntities,
-      getHex3ColorGradientColorWithAlpha,
-      pointToProjection,
-      defaultColorHex,
-      overlaysOrder,
-    ],
-  );
+  const overlaysFeatures = useOverlayFeatures();
 
   const vectorSource = useMemo(() => {
     return new VectorSource({
-      features,
+      features: overlaysFeatures,
     });
-  }, [features]);
+  }, [overlaysFeatures]);
 
   const overlaysLayer = useMemo(
     () =>
diff --git a/src/components/Map/MapViewer/utils/config/overlaysLayer/useOverlayFeatures.test.ts b/src/components/Map/MapViewer/utils/config/overlaysLayer/useOverlayFeatures.test.ts
new file mode 100644
index 0000000000000000000000000000000000000000..19c9b309415c6943c7c86e8b1fe477c606affe81
--- /dev/null
+++ b/src/components/Map/MapViewer/utils/config/overlaysLayer/useOverlayFeatures.test.ts
@@ -0,0 +1,69 @@
+/* eslint-disable no-magic-numbers */
+import { renderHook } from '@testing-library/react';
+import { getReduxWrapperWithStore } from '@/utils/testing/getReduxWrapperWithStore';
+import { CONFIGURATION_INITIAL_STORE_MOCKS } from '@/redux/configuration/configuration.mock';
+import { OVERLAYS_PUBLIC_FETCHED_STATE_MOCK } from '@/redux/overlays/overlays.mock';
+import { mapStateWithCurrentlySelectedMainMapFixture } from '@/redux/map/map.fixtures';
+import { MODELS_DATA_MOCK_WITH_MAIN_MAP } from '@/redux/models/models.mock';
+import { MOCKED_OVERLAY_BIO_ENTITY_RENDER } from '@/redux/overlayBioEntity/overlayBioEntity.mock';
+import { useOverlayFeatures } from './useOverlayFeatures';
+
+/**
+ * mocks for useOverlayFeatures
+ * are taken from helpers functions that are used inside useOverlayFeatures
+ * point of the test is to test if all helper functions work correctly when combined together
+ */
+
+describe('useOverlayFeatures', () => {
+  const { Wrapper } = getReduxWrapperWithStore({
+    configuration: {
+      ...CONFIGURATION_INITIAL_STORE_MOCKS,
+    },
+    overlayBioEntity: {
+      overlaysId: [11, 12],
+      data: {
+        // overlayId
+        11: {
+          // modelId
+          52: MOCKED_OVERLAY_BIO_ENTITY_RENDER,
+          53: MOCKED_OVERLAY_BIO_ENTITY_RENDER,
+        },
+        12: {
+          52: MOCKED_OVERLAY_BIO_ENTITY_RENDER,
+          53: MOCKED_OVERLAY_BIO_ENTITY_RENDER,
+        },
+      },
+    },
+    overlays: {
+      ...OVERLAYS_PUBLIC_FETCHED_STATE_MOCK,
+    },
+    map: {
+      ...mapStateWithCurrentlySelectedMainMapFixture,
+    },
+    models: {
+      ...MODELS_DATA_MOCK_WITH_MAIN_MAP,
+    },
+  });
+
+  it('should return an array of features', () => {
+    const {
+      result: { current: features },
+    } = renderHook(() => useOverlayFeatures(), {
+      wrapper: Wrapper,
+    });
+
+    expect(features).toHaveLength(6);
+    expect(features[0].getGeometry()?.getCoordinates()).toEqual([
+      [
+        [-13149141, 18867005],
+        [-13149141, 18881970],
+        [-13143529, 18881970],
+        [-13143529, 18867005],
+        [-13149141, 18867005],
+      ],
+    ]);
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
+    expect(features[0].getStyle().getFill().getColor()).toBe('#FFFFFFcc');
+  });
+});
diff --git a/src/components/Map/MapViewer/utils/config/overlaysLayer/useOverlayFeatures.ts b/src/components/Map/MapViewer/utils/config/overlaysLayer/useOverlayFeatures.ts
new file mode 100644
index 0000000000000000000000000000000000000000..06985195eb9dafe82dbf23f616b3214945c9aff2
--- /dev/null
+++ b/src/components/Map/MapViewer/utils/config/overlaysLayer/useOverlayFeatures.ts
@@ -0,0 +1,49 @@
+import { useMemo } from 'react';
+import { usePointToProjection } from '@/utils/map/usePointToProjection';
+import type Feature from 'ol/Feature';
+import type Polygon from 'ol/geom/Polygon';
+import { ZERO } from '@/constants/common';
+import { useAppSelector } from '@/redux/hooks/useAppSelector';
+import {
+  getOverlayOrderSelector,
+  overlayBioEntitiesForCurrentModelSelector,
+} from '@/redux/overlayBioEntity/overlayBioEntity.selector';
+import { createOverlayGeometryFeature } from './createOverlayGeometryFeature';
+import { getPolygonLatitudeCoordinates } from './getPolygonLatitudeCoordinates';
+import { useGetOverlayColor } from './useGetOverlayColor';
+
+export const useOverlayFeatures = (): Feature<Polygon>[] => {
+  const pointToProjection = usePointToProjection();
+  const { getOverlayBioEntityColorByAvailableProperties } = useGetOverlayColor();
+  const overlaysOrder = useAppSelector(getOverlayOrderSelector);
+  const bioEntities = useAppSelector(overlayBioEntitiesForCurrentModelSelector);
+
+  const features = useMemo(
+    () =>
+      bioEntities.map(entity => {
+        /**
+         * Depending on number of active overlays
+         * it's required to calculate xMin and xMax coordinates of the polygon
+         * so "entity" might be devided equality between active overlays
+         */
+        const { xMin, xMax } = getPolygonLatitudeCoordinates({
+          width: entity.width,
+          nOverlays: overlaysOrder.length,
+          xMin: entity.x1,
+          overlayIndexBasedOnOrder:
+            overlaysOrder.find(({ id }) => id === entity.overlayId)?.index || ZERO,
+        });
+
+        return createOverlayGeometryFeature(
+          [
+            ...pointToProjection({ x: xMin, y: entity.y1 }),
+            ...pointToProjection({ x: xMax, y: entity.y2 }),
+          ],
+          getOverlayBioEntityColorByAvailableProperties(entity),
+        );
+      }),
+    [overlaysOrder, bioEntities, pointToProjection, getOverlayBioEntityColorByAvailableProperties],
+  );
+
+  return features;
+};
diff --git a/src/hooks/useTriColorLerp.ts b/src/hooks/useTriColorLerp.ts
deleted file mode 100644
index f872b09c506edbf4b8c50c3e70d02e1a860d12f2..0000000000000000000000000000000000000000
--- a/src/hooks/useTriColorLerp.ts
+++ /dev/null
@@ -1,44 +0,0 @@
-import { useCallback } from 'react';
-import { WHITE_HEX_OPACITY_0 } from '@/constants/hexColors';
-import {
-  maxColorValSelector,
-  minColorValSelector,
-  neutralColorValSelector,
-  overlayOpacitySelector,
-  simpleColorValSelector,
-} from '@/redux/configuration/configuration.selectors';
-import { useAppSelector } from '@/redux/hooks/useAppSelector';
-import { getHexTricolorGradientColorWithAlpha } from '@/utils/convert/getHexTricolorGradientColorWithAlpha';
-import { ONE } from '@/constants/common';
-import { addAlphaToHexString } from '../utils/convert/addAlphaToHexString';
-
-export type GetHex3ColorGradientColorWithAlpha = (position: number) => string;
-
-type UseTriColorLerpReturn = {
-  getHex3ColorGradientColorWithAlpha: GetHex3ColorGradientColorWithAlpha;
-  defaultColorHex: string;
-};
-
-export const useTriColorLerp = (): UseTriColorLerpReturn => {
-  const minColorValHexString = useAppSelector(minColorValSelector) || '';
-  const maxColorValHexString = useAppSelector(maxColorValSelector) || '';
-  const neutralColorValHexString = useAppSelector(neutralColorValSelector) || '';
-  const overlayOpacityValue = useAppSelector(overlayOpacitySelector) || ONE;
-  const simpleColorValue = useAppSelector(simpleColorValSelector) || WHITE_HEX_OPACITY_0;
-
-  const getHex3ColorGradientColorWithAlpha = useCallback(
-    (position: number) =>
-      getHexTricolorGradientColorWithAlpha({
-        leftColor: minColorValHexString,
-        middleColor: neutralColorValHexString,
-        rightColor: maxColorValHexString,
-        position,
-        alpha: Number(overlayOpacityValue),
-      }),
-    [minColorValHexString, neutralColorValHexString, maxColorValHexString, overlayOpacityValue],
-  );
-
-  const defaultColorHex = addAlphaToHexString(simpleColorValue, Number(overlayOpacityValue));
-
-  return { getHex3ColorGradientColorWithAlpha, defaultColorHex };
-};
diff --git a/src/models/mocks/configurationOptionMock.ts b/src/models/mocks/configurationOptionMock.ts
index f658402ecdddcb0df80cf9a1e92e940b5c422679..c1e6a1e53d452fd0b9b66bf25538afdbe832623b 100644
--- a/src/models/mocks/configurationOptionMock.ts
+++ b/src/models/mocks/configurationOptionMock.ts
@@ -5,6 +5,7 @@ export const CONFIGURATION_OPTIONS_TYPES_MOCK: string[] = [
   'MAX_COLOR_VAL',
   'SIMPLE_COLOR_VAL',
   'NEUTRAL_COLOR_VAL',
+  'OVERLAY_OPACITY',
 ];
 
 export const CONFIGURATION_OPTIONS_COLOURS_MOCK: ConfigurationOption[] = [
@@ -44,4 +45,13 @@ export const CONFIGURATION_OPTIONS_COLOURS_MOCK: ConfigurationOption[] = [
     value: 'FFFFFF',
     group: 'Overlays',
   },
+  {
+    idObject: 33,
+    type: 'OVERLAY_OPACITY',
+    valueType: 'DOUBLE',
+    commonName: 'Opacity used when drawing data overlays (value between 0.0-1.0)',
+    isServerSide: false,
+    value: '0.8',
+    group: 'Overlays',
+  },
 ];
diff --git a/src/redux/configuration/configuration.mock.ts b/src/redux/configuration/configuration.mock.ts
index d371990411b2f4fc2e88b66f44c411da248d346e..638005508ce7df45bd030cb6862ef23b4ae6b00a 100644
--- a/src/redux/configuration/configuration.mock.ts
+++ b/src/redux/configuration/configuration.mock.ts
@@ -29,6 +29,7 @@ export const CONFIGURATION_INITIAL_STORE_MOCKS: ConfigurationState = {
       [CONFIGURATION_OPTIONS_TYPES_MOCK[1]]: CONFIGURATION_OPTIONS_COLOURS_MOCK[1],
       [CONFIGURATION_OPTIONS_TYPES_MOCK[2]]: CONFIGURATION_OPTIONS_COLOURS_MOCK[2],
       [CONFIGURATION_OPTIONS_TYPES_MOCK[3]]: CONFIGURATION_OPTIONS_COLOURS_MOCK[3],
+      [CONFIGURATION_OPTIONS_TYPES_MOCK[4]]: CONFIGURATION_OPTIONS_COLOURS_MOCK[4],
     },
     loading: 'idle',
     error: DEFAULT_ERROR,
diff --git a/src/redux/map/map.fixtures.ts b/src/redux/map/map.fixtures.ts
index 5cb2f16fe2683d2988f2a7bd16aff6e95a558eaf..be022b6972ad0c42f4ff1c7c9e2c95351f47af4e 100644
--- a/src/redux/map/map.fixtures.ts
+++ b/src/redux/map/map.fixtures.ts
@@ -40,3 +40,20 @@ export const initialMapStateFixture: MapState = {
   error: DEFAULT_ERROR,
   openedMaps: openedMapsInitialValueFixture,
 };
+
+export const mapStateWithCurrentlySelectedMainMapFixture: MapState = {
+  data: {
+    ...initialMapDataFixture,
+    modelId: 52,
+    size: {
+      width: 26779.25,
+      height: 13503,
+      tileSize: 256,
+      minZoom: 2,
+      maxZoom: 9,
+    },
+  },
+  loading: 'idle',
+  error: DEFAULT_ERROR,
+  openedMaps: openedMapsInitialValueFixture,
+};
diff --git a/src/redux/models/models.mock.ts b/src/redux/models/models.mock.ts
index e45763d82516d7ff30c12ee7512a8da5f2378cdf..b7658d3867c9d80e221fa59ffd8507c51b0cf46d 100644
--- a/src/redux/models/models.mock.ts
+++ b/src/redux/models/models.mock.ts
@@ -6,3 +6,27 @@ export const MODELS_INITIAL_STATE_MOCK: ModelsState = {
   loading: 'idle',
   error: DEFAULT_ERROR,
 };
+
+export const MODELS_DATA_MOCK_WITH_MAIN_MAP: ModelsState = {
+  data: [
+    {
+      idObject: 52,
+      width: 26779.25,
+      height: 13503,
+      defaultCenterX: null,
+      defaultCenterY: null,
+      description: '',
+      name: 'Core PD map',
+      defaultZoomLevel: null,
+      tileSize: 256,
+      references: [],
+      authors: [],
+      creationDate: null,
+      modificationDates: [],
+      minZoom: 2,
+      maxZoom: 9,
+    },
+  ],
+  loading: 'idle',
+  error: DEFAULT_ERROR,
+};
diff --git a/src/redux/overlayBioEntity/overlayBioEntity.mock.ts b/src/redux/overlayBioEntity/overlayBioEntity.mock.ts
index 4fa115d0c747d65e9d25369984108bc98c4ca6ce..84fab91d714d1acdbb49aa3275b6b5fe13cc668c 100644
--- a/src/redux/overlayBioEntity/overlayBioEntity.mock.ts
+++ b/src/redux/overlayBioEntity/overlayBioEntity.mock.ts
@@ -1,6 +1,49 @@
+import { OverlayBioEntityRender } from '@/types/OLrendering';
 import { OverlaysBioEntityState } from './overlayBioEntity.types';
 
 export const OVERLAY_BIO_ENTITY_INITIAL_STATE_MOCK: OverlaysBioEntityState = {
   overlaysId: [],
   data: [],
 };
+
+export const MOCKED_OVERLAY_BIO_ENTITY_RENDER: OverlayBioEntityRender[] = [
+  {
+    id: 1,
+    modelId: 52,
+    width: 30,
+    x1: 18412,
+    x2: 18492,
+    y1: 3128.653195488725,
+    y2: 3088.653195488725,
+    overlayId: 11,
+    height: 10,
+    value: 0,
+    color: null,
+  },
+  {
+    id: 2,
+    modelId: 52,
+    width: 30,
+    x1: 18412,
+    x2: 18492,
+    y1: 3128.653195488725,
+    y2: 3088.653195488725,
+    overlayId: 11,
+    height: 10,
+    value: -0.2137,
+    color: null,
+  },
+  {
+    id: 3,
+    modelId: 52,
+    width: 40,
+    x1: 18412,
+    x2: 18492,
+    y1: 3128.653195488725,
+    y2: 3088.653195488725,
+    overlayId: 11,
+    height: 10,
+    value: null,
+    color: { rgb: -65536, alpha: 0 },
+  },
+];
diff --git a/src/utils/convert/getHexStringColorFromRGBIntWithAlpha.test.ts b/src/utils/convert/getHexStringColorFromRGBIntWithAlpha.test.ts
new file mode 100644
index 0000000000000000000000000000000000000000..6b25bbe2aaa250963510220f32745b9f4ca3990b
--- /dev/null
+++ b/src/utils/convert/getHexStringColorFromRGBIntWithAlpha.test.ts
@@ -0,0 +1,17 @@
+import { getHexStringColorFromRGBIntWithAlpha } from './getHexStringColorFromRGBIntWithAlpha';
+
+const OPACITY_80 = 0.8;
+
+describe('getHexTricolorGradientColorWithAlpha ', () => {
+  it('should return the correct result with input with negative rgb integer', () => {
+    expect(getHexStringColorFromRGBIntWithAlpha({ rgbInt: -3342388, alpha: OPACITY_80 })).toEqual(
+      '#ccffcccc',
+    );
+  });
+
+  it('should return the correct result with input with positive rgb integer', () => {
+    expect(getHexStringColorFromRGBIntWithAlpha({ rgbInt: 57, alpha: OPACITY_80 })).toEqual(
+      '#000039cc',
+    );
+  });
+});
diff --git a/src/utils/convert/getHexStringColorFromRGBIntWithAlpha.ts b/src/utils/convert/getHexStringColorFromRGBIntWithAlpha.ts
new file mode 100644
index 0000000000000000000000000000000000000000..1317bd89bb02372279f7fbafc1dc9dc28ca2b42f
--- /dev/null
+++ b/src/utils/convert/getHexStringColorFromRGBIntWithAlpha.ts
@@ -0,0 +1,16 @@
+import { convertDecimalToHexColor } from './convertDecimalToHex';
+import { addAlphaToHexString } from './addAlphaToHexString';
+
+type GetHexStringColorFromRGBIntWithAlphaProps = {
+  rgbInt: number;
+  alpha: number;
+};
+
+export const getHexStringColorFromRGBIntWithAlpha = ({
+  rgbInt,
+  alpha,
+}: GetHexStringColorFromRGBIntWithAlphaProps): string => {
+  const hexStringColor = convertDecimalToHexColor(rgbInt);
+  const hexStringColorWithAlpha = addAlphaToHexString(hexStringColor, alpha);
+  return hexStringColorWithAlpha;
+};