diff --git a/apps/common/mobile/lib/component/ThemeColorPalette.jsx b/apps/common/mobile/lib/component/ThemeColorPalette.jsx
index 72d9063a8..73107dc27 100644
--- a/apps/common/mobile/lib/component/ThemeColorPalette.jsx
+++ b/apps/common/mobile/lib/component/ThemeColorPalette.jsx
@@ -2,7 +2,7 @@ import React, { useState, useEffect } from 'react';
 import { f7, ListItem, List, Icon } from 'framework7-react';
 import { useTranslation } from 'react-i18next';
 
-const ThemeColors = ({ themeColors, onColorClick, curColor }) => {
+const ThemeColors = ({ themeColors, onColorClick, curColor, isTypeCustomColors }) => {
     return (
         <div className='palette'>
             {themeColors.map((row, rowIndex) => {
@@ -11,7 +11,7 @@ const ThemeColors = ({ themeColors, onColorClick, curColor }) => {
                         {row.map((effect, index) => {
                             return(
                                 <a key={`tc-${rowIndex}-${index}`}
-                                   className={(curColor && ((curColor.color === effect.color && curColor.effectValue === effect.effectValue) || (curColor === effect.color))) ? 'active' : ''}
+                                   className={(curColor && !isTypeCustomColors && ((curColor.color === effect.color && curColor.effectValue === effect.effectValue) || (curColor === effect.color)))  ? 'active' : ''}
                                    style={{ background: `#${effect.color}`}}
                                    onClick={() => {onColorClick(effect.color, effect.effectId, effect.effectValue)}}
                                 ></a>
@@ -108,12 +108,14 @@ const ThemeColorPalette = props => {
         customColors = customColors ? customColors.toLowerCase().split(',') : [];
     }
 
+    let isTypeCustomColors = customColors.some( value => value === curColor );
+
     return (
         <div className={'color-palettes' + (props.cls ? (' ' + props.cls) : '')}>
             <List>
                 <ListItem className='theme-colors'>
                     <div>{ _t.textThemeColors }</div>
-                    <ThemeColors themeColors={themeColors} onColorClick={props.changeColor} curColor={curColor}/>
+                    <ThemeColors isTypeCustomColors={isTypeCustomColors} themeColors={themeColors} onColorClick={props.changeColor} curColor={curColor}/>
                 </ListItem>
                 <ListItem className='standart-colors'>
                     <div>{ _t.textStandartColors }</div>
diff --git a/apps/documenteditor/mobile/src/store/tableSettings.js b/apps/documenteditor/mobile/src/store/tableSettings.js
index 2454e3d00..1bd19c457 100644
--- a/apps/documenteditor/mobile/src/store/tableSettings.js
+++ b/apps/documenteditor/mobile/src/store/tableSettings.js
@@ -12,10 +12,17 @@ export class storeTableSettings {
             setStyles: action,
             updateCellBorderWidth: action,
             updateCellBorderColor: action,
+            setAutoColor: action,
+            colorAuto: observable,
         });
     }
 
     arrayStyles = [];
+    colorAuto = 'auto';
+
+    setAutoColor(value) {
+        this.colorAuto = value;
+    }
 
     initTableTemplates () {
         this.arrayStyles = [];
@@ -164,7 +171,13 @@ export class storeTableSettings {
             const size = parseFloat(this.cellBorderWidth);
             border.put_Value(1);
             border.put_Size(size * 25.4 / 72.0);
-            const color = Common.Utils.ThemeColor.getRgbColor(this.cellBorderColor);
+            let color;
+            if(this.colorAuto === 'auto') {
+                color = new Asc.asc_CColor();
+                color.put_auto(true);
+            } else {
+                color = Common.Utils.ThemeColor.getRgbColor(this.cellBorderColor);
+            }
             border.put_Color(color);
         }
         else {
diff --git a/apps/documenteditor/mobile/src/view/edit/EditTable.jsx b/apps/documenteditor/mobile/src/view/edit/EditTable.jsx
index 01ae5d89c..7e993375e 100644
--- a/apps/documenteditor/mobile/src/view/edit/EditTable.jsx
+++ b/apps/documenteditor/mobile/src/view/edit/EditTable.jsx
@@ -340,6 +340,7 @@ const PageCustomBorderColor = props => {
         props.storeTableSettings.updateCellBorderColor(color);
         props.f7router.back();
     };
+    const autoColor = props.storeTableSettings.colorAuto === 'auto' ? window.getComputedStyle(document.getElementById('font-color-auto')).backgroundColor : null;
     return(
         <Page>
             <Navbar title={_t.textCustomColor} backLink={_t.textBack}>
@@ -351,19 +352,19 @@ const PageCustomBorderColor = props => {
                     </NavRight>
                 }
             </Navbar>
-            <CustomColorPicker currentColor={borderColor} onAddNewColor={onAddNewColor}/>
+            <CustomColorPicker autoColor={autoColor} currentColor={borderColor} onAddNewColor={onAddNewColor}/>
         </Page>
     )
 };
 
 const PageBorderColor = props => {
     const { t } = useTranslation();
-    const _t = t('Edit', {returnObjects: true});
     const storeTableSettings = props.storeTableSettings;
     const borderColor = storeTableSettings.cellBorderColor;
     const customColors = props.storePalette.customColors;
     const changeColor = (color, effectId, effectValue) => {
         if (color !== 'empty') {
+            storeTableSettings.setAutoColor(null);
             if (effectId !==undefined ) {
                 const newColor = {color: color, effectId: effectId, effectValue: effectValue};
                 storeTableSettings.updateCellBorderColor(newColor);
@@ -377,7 +378,7 @@ const PageBorderColor = props => {
     };
     return(
         <Page>
-            <Navbar title={_t.textColor} backLink={_t.textBack}>
+            <Navbar title={t('Edit.textColor')} backLink={t('Edit.textBack')}>
                 {Device.phone &&
                     <NavRight>
                         <Link sheetClose='#edit-sheet'>
@@ -386,9 +387,18 @@ const PageBorderColor = props => {
                     </NavRight>
                 }
             </Navbar>
-            <ThemeColorPalette changeColor={changeColor} curColor={borderColor} customColors={customColors}/>
             <List>
-                <ListItem title={_t.textAddCustomColor} link={'/edit-table-custom-border-color/'}></ListItem>
+                <ListItem className={'item-color-auto' + (storeTableSettings.colorAuto === 'auto' ? ' active' : '')} title={t('Edit.textAutomatic')} onClick={() => {
+                   storeTableSettings.setAutoColor('auto');
+                }}>
+                    <div slot="media">
+                        <div id='font-color-auto' className={'color-auto'}></div>
+                    </div>
+                </ListItem>
+            </List>
+            <ThemeColorPalette changeColor={changeColor} curColor={storeTableSettings.colorAuto || borderColor} customColors={customColors}/>
+            <List>
+                <ListItem title={t('Edit.textAddCustomColor')} link={'/edit-table-custom-border-color/'}></ListItem>
             </List>
         </Page>
     )
@@ -410,7 +420,6 @@ const TabBorder = inject("storeFocusObjects", "storeTableSettings")(observer(pro
         storeTableSettings.updateBordersStyle(type);
         props.onBorderTypeClick(storeTableSettings.cellBorders);
     };
-
     const borderColor = storeTableSettings.cellBorderColor;
     const displayBorderColor = borderColor !== 'transparent' ? `#${(typeof borderColor === "object" ? borderColor.color : borderColor)}` : borderColor;
 
@@ -434,7 +443,7 @@ const TabBorder = inject("storeFocusObjects", "storeTableSettings")(observer(pro
             <ListItem title={_t.textColor} link='/edit-table-border-color/'>
                 <span className="color-preview"
                       slot="after"
-                      style={{ background: displayBorderColor}}
+                      style={{ background: storeTableSettings.colorAuto === 'auto' ? '#000' : displayBorderColor}}
                 ></span>
             </ListItem>
             <ListItem className='buttons table-presets'>
diff --git a/apps/presentationeditor/mobile/locale/en.json b/apps/presentationeditor/mobile/locale/en.json
index 34c5d95b1..6cc90a707 100644
--- a/apps/presentationeditor/mobile/locale/en.json
+++ b/apps/presentationeditor/mobile/locale/en.json
@@ -257,6 +257,7 @@
       "textAllCaps": "All Caps",
       "textApplyAll": "Apply to All Slides",
       "textAuto": "Auto",
+      "textAutomatic": "Automatic",
       "textBack": "Back",
       "textBandedColumn": "Banded Column",
       "textBandedRow": "Banded Row",
diff --git a/apps/presentationeditor/mobile/src/store/tableSettings.js b/apps/presentationeditor/mobile/src/store/tableSettings.js
index 8b47ee275..7296cfc16 100644
--- a/apps/presentationeditor/mobile/src/store/tableSettings.js
+++ b/apps/presentationeditor/mobile/src/store/tableSettings.js
@@ -12,10 +12,17 @@ export class storeTableSettings {
             setStyles: action,
             updateCellBorderWidth: action,
             updateCellBorderColor: action,
+            setAutoColor: action,
+            colorAuto: observable,
         });
     }
 
     arrayStyles = [];
+    colorAuto = 'auto';
+
+    setAutoColor(value) {
+        this.colorAuto = value;
+    }
 
     initTableTemplates () {
         this.arrayStyles = [];
@@ -146,7 +153,13 @@ export class storeTableSettings {
             const size = parseFloat(this.cellBorderWidth);
             border.put_Value(1);
             border.put_Size(size * 25.4 / 72.0);
-            const color = Common.Utils.ThemeColor.getRgbColor(this.cellBorderColor);
+            let color;
+            if(this.colorAuto === 'auto') {
+                color = new Asc.asc_CColor();
+                color.put_auto(true);
+            } else {
+                color = Common.Utils.ThemeColor.getRgbColor(this.cellBorderColor);
+            }
             border.put_Color(color);
         }
         else {
diff --git a/apps/presentationeditor/mobile/src/view/edit/EditTable.jsx b/apps/presentationeditor/mobile/src/view/edit/EditTable.jsx
index 9c3ffd8af..8c0423fe4 100644
--- a/apps/presentationeditor/mobile/src/view/edit/EditTable.jsx
+++ b/apps/presentationeditor/mobile/src/view/edit/EditTable.jsx
@@ -184,7 +184,7 @@ const PageCustomBorderColor = props => {
         props.storeTableSettings.updateCellBorderColor(color);
         props.f7router.back();
     };
-
+    const autoColor = props.storeTableSettings.colorAuto === 'auto' ? window.getComputedStyle(document.getElementById('font-color-auto')).backgroundColor : null;
     return (
         <Page>
             <Navbar title={_t.textCustomColor} backLink={_t.textBack}>
@@ -196,20 +196,20 @@ const PageCustomBorderColor = props => {
                     </NavRight>
                 }
             </Navbar>
-            <CustomColorPicker currentColor={borderColor} onAddNewColor={onAddNewColor}/>
+            <CustomColorPicker autoColor={autoColor} currentColor={borderColor} onAddNewColor={onAddNewColor}/>
         </Page>
     )
 };
 
 const PageBorderColor = props => {
     const { t } = useTranslation();
-    const _t = t('View.Edit', {returnObjects: true});
     const storeTableSettings = props.storeTableSettings;
     const borderColor = storeTableSettings.cellBorderColor;
     const customColors = props.storePalette.customColors;
 
     const changeColor = (color, effectId, effectValue) => {
         if (color !== 'empty') {
+            storeTableSettings.setAutoColor(null);
             if (effectId !==undefined ) {
                 const newColor = {color: color, effectId: effectId, effectValue: effectValue};
                 storeTableSettings.updateCellBorderColor(newColor);
@@ -224,7 +224,7 @@ const PageBorderColor = props => {
 
     return (
         <Page>
-            <Navbar title={_t.textColor} backLink={_t.textBack}>
+            <Navbar title={t('View.Edit.textColor')} backLink={t('View.Edit.textBack')}>
                 {Device.phone &&
                     <NavRight>
                         <Link sheetClose='#edit-sheet'>
@@ -233,9 +233,18 @@ const PageBorderColor = props => {
                     </NavRight>
                 }
             </Navbar>
-            <ThemeColorPalette changeColor={changeColor} curColor={borderColor} customColors={customColors}/>
             <List>
-                <ListItem title={_t.textAddCustomColor} link={'/edit-table-custom-border-color/'}></ListItem>
+                <ListItem className={'item-color-auto' + (storeTableSettings.colorAuto === 'auto' ? ' active' : '')} title={t('View.Edit.textAutomatic')} onClick={() => {
+                   storeTableSettings.setAutoColor('auto');
+                }}>
+                    <div slot="media">
+                        <div id='font-color-auto' className={'color-auto'}></div>
+                    </div>
+                </ListItem>
+            </List>
+            <ThemeColorPalette changeColor={changeColor} curColor={storeTableSettings.colorAuto || borderColor} customColors={customColors}/>
+            <List>
+                <ListItem title={t('View.Edit.textAddCustomColor')} link={'/edit-table-custom-border-color/'}></ListItem>
             </List>
         </Page>
     )
@@ -280,7 +289,7 @@ const TabBorder = inject("storeFocusObjects", "storeTableSettings")(observer(pro
             <ListItem title={_t.textColor} link='/edit-table-border-color/'>
                 <span className="color-preview"
                       slot="after"
-                      style={{ background: displayBorderColor}}
+                      style={{ background: storeTableSettings.colorAuto === 'auto' ? '#000' : displayBorderColor}}
                 ></span>
             </ListItem>
             <ListItem className='buttons table-presets'>
diff --git a/apps/spreadsheeteditor/mobile/locale/en.json b/apps/spreadsheeteditor/mobile/locale/en.json
index c0fa31b41..e8b47900f 100644
--- a/apps/spreadsheeteditor/mobile/locale/en.json
+++ b/apps/spreadsheeteditor/mobile/locale/en.json
@@ -361,6 +361,7 @@
       "textAngleClockwise": "Angle Clockwise",
       "textAngleCounterclockwise": "Angle Counterclockwise",
       "textAuto": "Auto",
+      "textAutomatic": "Automatic",
       "textAxisCrosses": "Axis Crosses",
       "textAxisOptions": "Axis Options",
       "textAxisPosition": "Axis Position",
diff --git a/apps/spreadsheeteditor/mobile/src/controller/edit/EditCell.jsx b/apps/spreadsheeteditor/mobile/src/controller/edit/EditCell.jsx
index 02046beaa..06c0ce2f4 100644
--- a/apps/spreadsheeteditor/mobile/src/controller/edit/EditCell.jsx
+++ b/apps/spreadsheeteditor/mobile/src/controller/edit/EditCell.jsx
@@ -1,11 +1,13 @@
 import React, {Component} from 'react';
 import { EditCell } from '../../view/edit/EditCell';
+import {observer, inject} from "mobx-react";
 
 class EditCellController extends Component {
     constructor (props) {
         super(props);
         this.dateFormats = this.initFormats(Asc.c_oAscNumFormatType.Date, 38822);
         this.timeFormats = this.initFormats(Asc.c_oAscNumFormatType.Time, 1.534);
+        this.onBorderStyle = this.onBorderStyle.bind(this);
     }
 
     initFormats(type, exampleVal) {
@@ -152,10 +154,17 @@ class EditCellController extends Component {
     }
 
     onBorderStyle(type, borderInfo) {
-        const api = Common.EditorApi.get();  
+        const api = Common.EditorApi.get();
         let newBorders = [],
             bordersWidth = borderInfo.width,
+            bordersColor;
+            
+        if (this.props.storeCellSettings.colorAuto === 'auto') {
+            bordersColor = new Asc.asc_CColor();
+            bordersColor.put_auto(true);
+        } else {
             bordersColor = Common.Utils.ThemeColor.getRgbColor(borderInfo.color);
+        }
 
         if (type == 'inner') {
             newBorders[Asc.c_oAscBorderOptions.InnerV] = new Asc.asc_CBorder(bordersWidth, bordersColor);
@@ -180,6 +189,13 @@ class EditCellController extends Component {
         api.asc_setCellBorders(newBorders);
     }
 
+    onTextColorAuto() {
+        const api = Common.EditorApi.get();
+        const color = new Asc.asc_CColor();
+        color.put_auto(true);
+        api.asc_setCellTextColor(color);
+    }
+
     render () {
         return (
             <EditCell 
@@ -200,9 +216,10 @@ class EditCellController extends Component {
                 onAccountingCellFormat={this.onAccountingCellFormat}
                 dateFormats={this.dateFormats}
                 timeFormats={this.timeFormats}
+                onTextColorAuto={this.onTextColorAuto}
             />
         )
     }
 }
 
-export default EditCellController;
\ No newline at end of file
+export default inject("storeCellSettings")(observer(EditCellController));
\ No newline at end of file
diff --git a/apps/spreadsheeteditor/mobile/src/store/cellSettings.js b/apps/spreadsheeteditor/mobile/src/store/cellSettings.js
index c34c0d6a3..4ea4f5c96 100644
--- a/apps/spreadsheeteditor/mobile/src/store/cellSettings.js
+++ b/apps/spreadsheeteditor/mobile/src/store/cellSettings.js
@@ -18,7 +18,8 @@ export class storeCellSettings {
             hAlignStr: observable, 
             vAlignStr: observable, 
             isWrapText: observable, 
-            orientationStr: observable, 
+            orientationStr: observable,
+            colorAuto: observable,
             initCellSettings: action, 
             initTextFormat: action, 
             initTextOrientation: action, 
@@ -30,7 +31,8 @@ export class storeCellSettings {
             changeFillColor: action, 
             changeBorderColor: action, 
             changeBorderSize: action, 
-            changeBorderStyle: action
+            changeBorderStyle: action,
+            setAutoColor: action,
         });
     }
 
@@ -64,6 +66,12 @@ export class storeCellSettings {
 
     orientationStr = 'horizontal';
 
+    colorAuto = 'auto';
+
+    setAutoColor(value) {
+        this.colorAuto = value;
+    }
+
     initCellSettings(cellInfo) {
 
         let xfs = cellInfo.asc_getXfs();
diff --git a/apps/spreadsheeteditor/mobile/src/view/edit/EditCell.jsx b/apps/spreadsheeteditor/mobile/src/view/edit/EditCell.jsx
index 34d17750f..0f86f8515 100644
--- a/apps/spreadsheeteditor/mobile/src/view/edit/EditCell.jsx
+++ b/apps/spreadsheeteditor/mobile/src/view/edit/EditCell.jsx
@@ -29,7 +29,7 @@ const EditCell = props => {
 
     const fontColorPreview = fontColor !== 'auto' ?
         <span className="color-preview" style={{ background: `#${(typeof fontColor === "object" ? fontColor.color : fontColor)}`}}></span> :
-        <span className="color-preview"></span>;
+        <span className="color-preview auto"></span>;
     
     const fillColorPreview = fillColor !== 'transparent' ?
         <span className="color-preview" style={{ background: `#${(typeof fillColor === "object" ? fillColor.color : fillColor)}`}}></span> :
@@ -53,7 +53,8 @@ const EditCell = props => {
                             </Row>
                         </ListItem>
                         <ListItem title={_t.textTextColor} link="/edit-cell-text-color/" routeProps={{
-                            onTextColor: props.onTextColor
+                            onTextColor: props.onTextColor,
+                            onTextColorAuto: props.onTextColorAuto,
                         }}>
                             {!isAndroid ?
                                 <Icon slot="media" icon="icon-text-color">{fontColorPreview}</Icon> :
@@ -284,16 +285,25 @@ const PageTextColorCell = props => {
   
     return (
         <Page>
-            <Navbar title={_t.textTextColor} backLink={_t.textBack}>
+            <Navbar title={t('View.Edit.textTextColor')} backLink={t('View.Edit.textBack')}>
                 {Device.phone &&
                     <NavRight>
                         <Link icon='icon-expand-down' sheetClose></Link>
                     </NavRight>
                 }
             </Navbar>
+            <List>
+                <ListItem  className={'item-color-auto' + (fontColor === 'auto' ? ' active' : '')} title={t('View.Edit.textAutomatic')} onClick={() => {
+                   props.onTextColorAuto();
+                }}>
+                    <div slot="media">
+                        <div id='font-color-auto' className={'color-auto'}></div>
+                    </div>
+                </ListItem>
+            </List>
             <ThemeColorPalette changeColor={changeColor} curColor={fontColor} customColors={customColors} />
             <List>
-                <ListItem title={_t.textAddCustomColor} link={'/edit-cell-text-custom-color/'} routeProps={{
+                <ListItem title={t('View.Edit.textAddCustomColor')} link={'/edit-cell-text-custom-color/'} routeProps={{
                     onTextColor: props.onTextColor
                 }}></ListItem>
             </List>
@@ -360,13 +370,13 @@ const PageCustomTextColorCell = props => {
         fontColor = fontColor.color;
     }
 
+    const autoColor = fontColor === 'auto' ? window.getComputedStyle(document.getElementById('font-color-auto')).backgroundColor : null;
     const onAddNewColor = (colors, color) => {
         props.storePalette.changeCustomColors(colors);
         props.onTextColor(color);
         props.storeCellSettings.changeFontColor(color);
         props.f7router.back();
     };
-
     return (
         <Page>
             <Navbar title={_t.textCustomColor} backLink={_t.textBack}>
@@ -376,7 +386,7 @@ const PageCustomTextColorCell = props => {
                     </NavRight>
                 }
             </Navbar>
-            <CustomColorPicker currentColor={fontColor} onAddNewColor={onAddNewColor} />
+            <CustomColorPicker autoColor={autoColor} currentColor={fontColor} onAddNewColor={onAddNewColor} />
         </Page>
     )
 };
@@ -586,7 +596,8 @@ const PageBorderStyleCell = props => {
         $$('.sheet-modal.modal-in').length > 0 && f7.sheet.close();
         return null;
     }
-
+    
+    const displayBorderColor = `#${(typeof borderInfo.color === "object" ? borderInfo.color.color : borderInfo.color)}`;
     return (
         <Page>
             <Navbar title={_t.textBorderStyle} backLink={_t.textBack}>
@@ -676,7 +687,7 @@ const PageBorderStyleCell = props => {
                 }}>
                     <span className="color-preview"
                         slot="after"
-                        style={{background:`#${(typeof borderInfo.color === "object" ? borderInfo.color.color : borderInfo.color)}`}}
+                        style={{background: storeCellSettings.colorAuto === 'auto' ? '#000' : displayBorderColor}}
                     ></span>
                 </ListItem>
                 <ListItem title={_t.textSize} link='/edit-border-size-cell/' after={borderSizes[borderInfo.width]} routeProps={{
@@ -690,16 +701,15 @@ const PageBorderStyleCell = props => {
 
 const PageBorderColorCell = props => {
     const { t } = useTranslation();
-    const _t = t("View.Edit", { returnObjects: true });
     const storePalette = props.storePalette;
     const storeCellSettings = props.storeCellSettings;
     const borderInfo = storeCellSettings.borderInfo;
     const borderColor = borderInfo.color;
     const borderStyle = storeCellSettings.borderStyle;
     const customColors = storePalette.customColors;
-
     const changeColor = (color, effectId, effectValue) => {
         if (color !== 'empty') {
+            storeCellSettings.setAutoColor(null);
             if (effectId !== undefined ) {
                 const newColor = {color: color, effectId: effectId, effectValue: effectValue};
                 storeCellSettings.changeBorderColor(newColor);
@@ -716,16 +726,25 @@ const PageBorderColorCell = props => {
   
     return (
         <Page>
-            <Navbar backLink={_t.textBack}>
+            <Navbar backLink={t('View.Edit.textBack')}>
                 {Device.phone &&
                     <NavRight>
                         <Link icon='icon-expand-down' sheetClose></Link>
                     </NavRight>
                 }
             </Navbar>
-            <ThemeColorPalette changeColor={changeColor} curColor={borderColor} customColors={customColors} />
             <List>
-                <ListItem title={_t.textAddCustomColor} link={'/edit-border-custom-color-cell/'} routeProps={{
+                <ListItem className={'item-color-auto' + (storeCellSettings.colorAuto === 'auto' ? ' active' : '')} title={t('View.Edit.textAutomatic')} onClick={() => {
+                   storeCellSettings.setAutoColor('auto');
+                }}>
+                    <div slot="media">
+                        <div id='font-color-auto' className={'color-auto'}></div>
+                    </div>
+                </ListItem>
+            </List>
+            <ThemeColorPalette changeColor={changeColor} curColor={storeCellSettings.colorAuto || borderColor} customColors={customColors} />
+            <List>
+                <ListItem title={t('View.Edit.textAddCustomColor')} link={'/edit-border-custom-color-cell/'} routeProps={{
                     onBorderStyle: props.onBorderStyle
                 }}></ListItem>
             </List>
@@ -746,7 +765,7 @@ const PageCustomBorderColorCell = props => {
     }
 
     const borderStyle = storeCellSettings.borderStyle;
-    
+    const autoColor = storeCellSettings.colorAuto === 'auto' ? window.getComputedStyle(document.getElementById('font-color-auto')).backgroundColor : null;
     const onAddNewColor = (colors, color) => {
         storePalette.changeCustomColors(colors);
         storeCellSettings.changeBorderColor(color);
@@ -763,7 +782,7 @@ const PageCustomBorderColorCell = props => {
                     </NavRight>
                 }
             </Navbar>
-            <CustomColorPicker currentColor={borderColor} onAddNewColor={onAddNewColor} />
+            <CustomColorPicker autoColor={autoColor} currentColor={borderColor} onAddNewColor={onAddNewColor} />
         </Page>
     )
 };