MAGETWO-89658: Add validation check and rule

 - added validation for color inputs

Author: Robert He

app/code/Magento/Ui/view/base/web/templates/form/element/colorPicker.html

@@ -4,11 +4,11 @@
  * See COPYING.txt for license details.
  */
 -->
-<div class="admin__field"
+<div class="admin__field-control"
      visible="visible"
      css="$data.additionalClasses">
     <input type="hidden" class="colorpicker-spectrum" data-bind="colorPicker: colorPickerConfig, attr: { disabled: disabled }" />
-    <input type="text" class="colorpicker-input" data-bind="
+    <input type="text" class="admin__control-text colorpicker-input" data-bind="
         value: value,
         hasFocus: focused,
         attr: { id: uid, placeholder: placeholder, disabled: disabled }" />

app/design/adminhtml/Magento/backend/web/css/source/components/_color-picker.less

@@ -12,6 +12,7 @@ License: MIT
 
 .colorpicker-input {
   vertical-align: middle;
+  width: 50% !important;
 }
 
 .sp-container {