diff --git a/packages/plugins/custom-fields/README.md b/packages/plugins/color-picker/README.md
similarity index 63%
rename from packages/plugins/custom-fields/README.md
rename to packages/plugins/color-picker/README.md
index cfb8b94aba..aa642ec87a 100644
--- a/packages/plugins/custom-fields/README.md
+++ b/packages/plugins/color-picker/README.md
@@ -1,10 +1,6 @@
-# Strapi plugin Custom Fields
+# Strapi plugin Color Picker
 
-A custom field plugin to house Strapi maintained custom fields
-
-## Custom Fields
-
-- [Color Picker](#color-picker)
+A Strapi-maintainted color picker custom field
 
 ## Installation
 
@@ -12,10 +8,10 @@ To install this plugin, you need to add an NPM dependency to your Strapi applica
 
 ```sh
 # Using Yarn
-yarn add @strapi/custom-fields
+yarn add @strapi/plugin-color-picker
 
 # Or using NPM
-npm install @strapi/custom-fields
+npm install @strapi/plugin-color-picker
 ```
 
 Then, you'll need to build your admin panel:
@@ -28,7 +24,7 @@ yarn build
 npm run build
 ```
 
-## Color Picker
+## Usage
 
 Use saturation and hue sliders to select a color and save the value as a HEX string
 
diff --git a/packages/plugins/custom-fields/admin/src/components/ColorPicker/ColorPickerIcon/index.js b/packages/plugins/color-picker/admin/src/components/ColorPicker/ColorPickerIcon/index.js
similarity index 100%
rename from packages/plugins/custom-fields/admin/src/components/ColorPicker/ColorPickerIcon/index.js
rename to packages/plugins/color-picker/admin/src/components/ColorPicker/ColorPickerIcon/index.js
diff --git a/packages/plugins/custom-fields/admin/src/components/ColorPicker/ColorPickerInput/index.js b/packages/plugins/color-picker/admin/src/components/ColorPicker/ColorPickerInput/index.js
similarity index 100%
rename from packages/plugins/custom-fields/admin/src/components/ColorPicker/ColorPickerInput/index.js
rename to packages/plugins/color-picker/admin/src/components/ColorPicker/ColorPickerInput/index.js
diff --git a/packages/plugins/custom-fields/admin/src/components/tests/__snapshots__/color-picker-input.test.js.snap b/packages/plugins/color-picker/admin/src/components/tests/__snapshots__/color-picker-input.test.js.snap
similarity index 100%
rename from packages/plugins/custom-fields/admin/src/components/tests/__snapshots__/color-picker-input.test.js.snap
rename to packages/plugins/color-picker/admin/src/components/tests/__snapshots__/color-picker-input.test.js.snap
diff --git a/packages/plugins/custom-fields/admin/src/components/tests/color-picker-input.test.js b/packages/plugins/color-picker/admin/src/components/tests/color-picker-input.test.js
similarity index 96%
rename from packages/plugins/custom-fields/admin/src/components/tests/color-picker-input.test.js
rename to packages/plugins/color-picker/admin/src/components/tests/color-picker-input.test.js
index 85721984c5..c517d36aff 100644
--- a/packages/plugins/custom-fields/admin/src/components/tests/color-picker-input.test.js
+++ b/packages/plugins/color-picker/admin/src/components/tests/color-picker-input.test.js
@@ -5,7 +5,7 @@ import { IntlProvider } from 'react-intl';
 import ColorPickerInput from '../ColorPicker/ColorPickerInput';
 
 const mockAttribute = {
-  customField: 'plugin::custom-fields.color-picker',
+  customField: 'plugin::color-picker.color',
   pluginOptions: { i18n: { localized: true } },
   type: 'string',
 };
diff --git a/packages/plugins/custom-fields/admin/src/index.js b/packages/plugins/color-picker/admin/src/index.js
similarity index 96%
rename from packages/plugins/custom-fields/admin/src/index.js
rename to packages/plugins/color-picker/admin/src/index.js
index 5933e07007..2845534184 100644
--- a/packages/plugins/custom-fields/admin/src/index.js
+++ b/packages/plugins/color-picker/admin/src/index.js
@@ -6,13 +6,13 @@ import getTrad from './utils/getTrad';
 export default {
   register(app) {
     app.customFields.register({
-      name: 'color-picker',
-      pluginId: 'custom-fields',
+      name: 'color',
+      pluginId: 'color-picker',
       type: 'string',
       icon: ColorPickerIcon,
       intlLabel: {
         id: getTrad('color-picker.label'),
-        defaultMessage: 'Color Picker',
+        defaultMessage: 'Color',
       },
       intlDescription: {
         id: getTrad('color-picker.description'),
diff --git a/packages/plugins/custom-fields/admin/src/pluginId.js b/packages/plugins/color-picker/admin/src/pluginId.js
similarity index 100%
rename from packages/plugins/custom-fields/admin/src/pluginId.js
rename to packages/plugins/color-picker/admin/src/pluginId.js
diff --git a/packages/plugins/custom-fields/admin/src/translations/en.json b/packages/plugins/color-picker/admin/src/translations/en.json
similarity index 93%
rename from packages/plugins/custom-fields/admin/src/translations/en.json
rename to packages/plugins/color-picker/admin/src/translations/en.json
index dc48f2678a..c280602c57 100644
--- a/packages/plugins/custom-fields/admin/src/translations/en.json
+++ b/packages/plugins/color-picker/admin/src/translations/en.json
@@ -1,5 +1,5 @@
 {
-  "color-picker.label": "Color Picker",
+  "color-picker.label": "Color",
   "color-picker.description": "Select any color",
   "color-picker.settings": "Settings",
   "color-picket.input.format": "HEX",
@@ -9,4 +9,4 @@
   "color-picker.options.advanced.requiredField.description": "You won't be able to create an entry if this field is empty",
   "color-picker.toggle.aria-label": "Color picker toggle",
   "color-picker.input.aria-label": "Color picker input"
-}
\ No newline at end of file
+}
diff --git a/packages/plugins/custom-fields/admin/src/translations/fr.json b/packages/plugins/color-picker/admin/src/translations/fr.json
similarity index 100%
rename from packages/plugins/custom-fields/admin/src/translations/fr.json
rename to packages/plugins/color-picker/admin/src/translations/fr.json
diff --git a/packages/plugins/custom-fields/admin/src/utils/getTrad.js b/packages/plugins/color-picker/admin/src/utils/getTrad.js
similarity index 57%
rename from packages/plugins/custom-fields/admin/src/utils/getTrad.js
rename to packages/plugins/color-picker/admin/src/utils/getTrad.js
index a2b8632a8d..d0a071b26a 100644
--- a/packages/plugins/custom-fields/admin/src/utils/getTrad.js
+++ b/packages/plugins/color-picker/admin/src/utils/getTrad.js
@@ -1,5 +1,5 @@
 import pluginId from '../pluginId';
 
-const getTrad = id => `${pluginId}.${id}`;
+const getTrad = (id) => `${pluginId}.${id}`;
 
 export default getTrad;
diff --git a/packages/plugins/custom-fields/color-picker.png b/packages/plugins/color-picker/color-picker.png
similarity index 100%
rename from packages/plugins/custom-fields/color-picker.png
rename to packages/plugins/color-picker/color-picker.png
diff --git a/packages/plugins/custom-fields/jest.config.front.js b/packages/plugins/color-picker/jest.config.front.js
similarity index 100%
rename from packages/plugins/custom-fields/jest.config.front.js
rename to packages/plugins/color-picker/jest.config.front.js
diff --git a/packages/plugins/custom-fields/jest.config.js b/packages/plugins/color-picker/jest.config.js
similarity index 100%
rename from packages/plugins/custom-fields/jest.config.js
rename to packages/plugins/color-picker/jest.config.js
diff --git a/packages/plugins/custom-fields/package.json b/packages/plugins/color-picker/package.json
similarity index 70%
rename from packages/plugins/custom-fields/package.json
rename to packages/plugins/color-picker/package.json
index 926fcf27a4..e32560c962 100644
--- a/packages/plugins/custom-fields/package.json
+++ b/packages/plugins/color-picker/package.json
@@ -1,12 +1,12 @@
 {
-  "name": "@strapi/custom-fields",
+  "name": "@strapi/plugin-color-picker",
   "version": "4.3.4",
-  "description": "Strapi maintained Custom Fields",
+  "description": "Color picker custom field",
   "strapi": {
-    "name": "custom-fields",
-    "description": "Strapi maintained Custom Fields",
+    "name": "color-picker",
+    "description": "Color picker custom field",
     "kind": "plugin",
-    "displayName": "Custom Fields"
+    "displayName": "Color Picker"
   },
   "dependencies": {},
   "peerDependencies": {
@@ -15,7 +15,7 @@
   "repository": {
     "type": "git",
     "url": "https://github.com/strapi/strapi.git",
-    "directory": "packages/plugins/custom-fields"
+    "directory": "packages/plugins/color-picker"
   },
   "license": "SEE LICENSE IN LICENSE",
   "author": {
diff --git a/packages/plugins/custom-fields/server/index.js b/packages/plugins/color-picker/server/index.js
similarity index 100%
rename from packages/plugins/custom-fields/server/index.js
rename to packages/plugins/color-picker/server/index.js
diff --git a/packages/plugins/custom-fields/server/register.js b/packages/plugins/color-picker/server/register.js
similarity index 67%
rename from packages/plugins/custom-fields/server/register.js
rename to packages/plugins/color-picker/server/register.js
index 188a9af8e4..e46cc3feb3 100644
--- a/packages/plugins/custom-fields/server/register.js
+++ b/packages/plugins/color-picker/server/register.js
@@ -2,8 +2,8 @@
 
 module.exports = ({ strapi }) => {
   strapi.customFields.register({
-    name: 'color-picker',
-    plugin: 'custom-fields',
+    name: 'color',
+    plugin: 'color-picker',
     type: 'string',
   });
 };
diff --git a/packages/plugins/custom-fields/strapi-admin.js b/packages/plugins/color-picker/strapi-admin.js
similarity index 100%
rename from packages/plugins/custom-fields/strapi-admin.js
rename to packages/plugins/color-picker/strapi-admin.js
diff --git a/packages/plugins/custom-fields/strapi-server.js b/packages/plugins/color-picker/strapi-server.js
similarity index 100%
rename from packages/plugins/custom-fields/strapi-server.js
rename to packages/plugins/color-picker/strapi-server.js