diff --git a/components/color-picker/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/color-picker/__tests__/__snapshots__/demo-extend.test.ts.snap
index 46c42fd96141..717c27014ec1 100644
--- a/components/color-picker/__tests__/__snapshots__/demo-extend.test.ts.snap
+++ b/components/color-picker/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -296,7 +296,7 @@ Array [
                   <input
                     class="ant-input ant-input-sm"
                     type="text"
-                    value="1677FF"
+                    value="1677ff"
                   />
                 </span>
               </div>
@@ -680,7 +680,7 @@ Array [
                   <input
                     class="ant-input ant-input-sm"
                     type="text"
-                    value="1677FF"
+                    value="1677ff"
                   />
                 </span>
               </div>
@@ -1066,7 +1066,7 @@ exports[`renders components/color-picker/demo/change-completed.tsx extend contex
                   <input
                     class="ant-input ant-input-sm"
                     type="text"
-                    value="1677FF"
+                    value="1677ff"
                   />
                 </span>
               </div>
@@ -1450,7 +1450,7 @@ Array [
                   <input
                     class="ant-input ant-input-sm"
                     type="text"
-                    value="1677FF"
+                    value="1677ff"
                   />
                 </span>
               </div>
@@ -1839,7 +1839,7 @@ Array [
                   <input
                     class="ant-input ant-input-sm"
                     type="text"
-                    value="1677FF"
+                    value="1677ff"
                   />
                 </span>
               </div>
@@ -2202,7 +2202,7 @@ Array [
                   <input
                     class="ant-input ant-input-sm"
                     type="text"
-                    value="1677FF"
+                    value="1677ff"
                   />
                 </span>
               </div>
@@ -2530,7 +2530,7 @@ exports[`renders components/color-picker/demo/format.tsx extend context correctl
                             <input
                               class="ant-input ant-input-sm"
                               type="text"
-                              value="1677FF"
+                              value="1677ff"
                             />
                           </span>
                         </div>
@@ -4222,7 +4222,7 @@ exports[`renders components/color-picker/demo/panel-render.tsx extend context co
                               <input
                                 class="ant-input ant-input-sm"
                                 type="text"
-                                value="1677FF"
+                                value="1677ff"
                               />
                             </span>
                           </div>
@@ -5055,7 +5055,7 @@ exports[`renders components/color-picker/demo/panel-render.tsx extend context co
                                 <input
                                   class="ant-input ant-input-sm"
                                   type="text"
-                                  value="1677FF"
+                                  value="1677ff"
                                 />
                               </span>
                             </div>
@@ -5446,7 +5446,7 @@ Array [
                   <input
                     class="ant-input ant-input-sm"
                     type="text"
-                    value="1677FF"
+                    value="1677ff"
                   />
                 </span>
               </div>
@@ -6207,7 +6207,7 @@ exports[`renders components/color-picker/demo/pure-panel.tsx extend context corr
                     <input
                       class="ant-input ant-input-sm"
                       type="text"
-                      value="1677FF"
+                      value="1677ff"
                     />
                   </span>
                 </div>
@@ -6605,7 +6605,7 @@ exports[`renders components/color-picker/demo/size.tsx extend context correctly
                         <input
                           class="ant-input ant-input-sm"
                           type="text"
-                          value="1677FF"
+                          value="1677ff"
                         />
                       </span>
                     </div>
@@ -6987,7 +6987,7 @@ exports[`renders components/color-picker/demo/size.tsx extend context correctly
                         <input
                           class="ant-input ant-input-sm"
                           type="text"
-                          value="1677FF"
+                          value="1677ff"
                         />
                       </span>
                     </div>
@@ -7368,7 +7368,7 @@ exports[`renders components/color-picker/demo/size.tsx extend context correctly
                         <input
                           class="ant-input ant-input-sm"
                           type="text"
-                          value="1677FF"
+                          value="1677ff"
                         />
                       </span>
                     </div>
@@ -7763,7 +7763,7 @@ exports[`renders components/color-picker/demo/size.tsx extend context correctly
                         <input
                           class="ant-input ant-input-sm"
                           type="text"
-                          value="1677FF"
+                          value="1677ff"
                         />
                       </span>
                     </div>
@@ -8150,7 +8150,7 @@ exports[`renders components/color-picker/demo/size.tsx extend context correctly
                         <input
                           class="ant-input ant-input-sm"
                           type="text"
-                          value="1677FF"
+                          value="1677ff"
                         />
                       </span>
                     </div>
@@ -8536,7 +8536,7 @@ exports[`renders components/color-picker/demo/size.tsx extend context correctly
                         <input
                           class="ant-input ant-input-sm"
                           type="text"
-                          value="1677FF"
+                          value="1677ff"
                         />
                       </span>
                     </div>
@@ -8934,7 +8934,7 @@ exports[`renders components/color-picker/demo/text-render.tsx extend context cor
                     <input
                       class="ant-input ant-input-sm"
                       type="text"
-                      value="1677FF"
+                      value="1677ff"
                     />
                   </span>
                 </div>
@@ -9323,7 +9323,7 @@ exports[`renders components/color-picker/demo/text-render.tsx extend context cor
                     <input
                       class="ant-input ant-input-sm"
                       type="text"
-                      value="1677FF"
+                      value="1677ff"
                     />
                   </span>
                 </div>
@@ -9728,7 +9728,7 @@ exports[`renders components/color-picker/demo/text-render.tsx extend context cor
                     <input
                       class="ant-input ant-input-sm"
                       type="text"
-                      value="1677FF"
+                      value="1677ff"
                     />
                   </span>
                 </div>
@@ -10110,7 +10110,7 @@ Array [
                   <input
                     class="ant-input ant-input-sm"
                     type="text"
-                    value="1677FF"
+                    value="1677ff"
                   />
                 </span>
               </div>
@@ -10494,7 +10494,7 @@ Array [
                   <input
                     class="ant-input ant-input-sm"
                     type="text"
-                    value="1677FF"
+                    value="1677ff"
                   />
                 </span>
               </div>
diff --git a/components/color-picker/__tests__/__snapshots__/index.test.tsx.snap b/components/color-picker/__tests__/__snapshots__/index.test.tsx.snap
index d81f2ecdf702..abf3be3921fa 100644
--- a/components/color-picker/__tests__/__snapshots__/index.test.tsx.snap
+++ b/components/color-picker/__tests__/__snapshots__/index.test.tsx.snap
@@ -216,7 +216,7 @@ exports[`ColorPicker Should panelRender work 1`] = `
                     <input
                       class="ant-input ant-input-sm"
                       type="text"
-                      value="1677FF"
+                      value="1677ff"
                     />
                   </span>
                 </div>
@@ -505,7 +505,7 @@ exports[`ColorPicker Should panelRender work 2`] = `
                     <input
                       class="ant-input ant-input-sm"
                       type="text"
-                      value="1677FF"
+                      value="1677ff"
                     />
                   </span>
                 </div>
diff --git a/components/color-picker/components/ColorHexInput.tsx b/components/color-picker/components/ColorHexInput.tsx
index f98bf6520fa1..92130806c76d 100644
--- a/components/color-picker/components/ColorHexInput.tsx
+++ b/components/color-picker/components/ColorHexInput.tsx
@@ -37,7 +37,7 @@ const ColorHexInput: FC<ColorHexInputProps> = ({ prefixCls, value, onChange }) =
   return (
     <Input
       className={colorHexInputPrefixCls}
-      value={hexValue?.toUpperCase()}
+      value={hexValue}
       prefix="#"
       onChange={handleHexChange}
       size="small"
diff --git a/components/color-picker/style/input.ts b/components/color-picker/style/input.ts
index e4ac9bfa55ed..2aea1b876fd1 100644
--- a/components/color-picker/style/input.ts
+++ b/components/color-picker/style/input.ts
@@ -86,6 +86,7 @@ const genInputStyle: GenerateStyle<ColorPickerToken, CSSObject> = (token) => {
           padding: `0 ${paddingXS}px`,
           [`${antCls}-input`]: {
             fontSize: fontSizeSM,
+            textTransform: 'uppercase',
             lineHeight: `${controlHeightSM - 2 * lineWidth}px`,
           },
           [`${antCls}-input-prefix`]: {