Change color picker text color depending on background color

Author: roma84

Block/Adminhtml/System/Config/Form/Field/Color.php

@@ -12,14 +12,35 @@ protected function _getElementHtml(\Magento\Framework\Data\Form\Element\Abstract
                 $(document).ready(function () {
                     var $el = $("#' . $element->getHtmlId() . '");
                     $el.css("backgroundColor", "'. $value .'");
+                    $el.css("color", getContrastColor("'. $value .'"));
 
                     // Attach the color picker
                     $el.ColorPicker({
                         color: "'. $value .'",
                         onChange: function (hsb, hex, rgb) {
                             $el.css("backgroundColor", "#" + hex).val("#" + hex);
+                            $el.css("color", getContrastColor(hex));
                         }
                     });
+
+                    function getContrastColor(hexcolor) {
+                        var rgb = hexToRgb(hexcolor);
+                        if (rgb) {
+                            var o = Math.round(((parseInt(rgb.r) * 299) + (parseInt(rgb.g) * 587) + (parseInt(rgb.b) * 114)) / 1000);
+                            return (o >= 125) ? "black" : "white";
+                        } else {
+                            return "black";
+                        }
+                    }
+
+                    function hexToRgb(hex) {
+                        var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+                        return result ? {
+                            r: parseInt(result[1], 16),
+                            g: parseInt(result[2], 16),
+                            b: parseInt(result[3], 16)
+                        } : null;
+                    }
                 });
             });
             </script>';