Hex Color Code Generator - Demo

Pre-Requirements

                        
                            <div id="TrixCG"></div>
                            <link href="/applications/color-code-generator/v1/css/default.css" rel="stylesheet" />
                            <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>    
                            <script type="text/javascript" src="/applications/color-code-generator/v1/js/trixcg.min.js"></script>
                            
                            
                        

Set the color to start

                        
                            <script type="text/javascript">
                                $(document).ready(function(){ 
                                    $("#TrixCG").colorCodeGenerator({         
                                        'startColor':'#66dddd'
                                    });
                                });
                            </script>                            
                        

Using the onchange event

                        
                            <script type="text/javascript">
                                $(document).ready(function(){ 
                                    $("#TrixCG").colorCodeGenerator({         
                                        'onchange':function(hex){
                                            $('body').css('background-color',hex);
                                        }
                                    });
                                });
                            </script>                            
                        

Set Color Based on the Input

#

                        
                            <script type="text/javascript">                                
                                $(document).ready(function(){                                     
                                    $("#TrixCG").colorCodeGenerator('setColor','#ddccff');
                                });
                            </script>                            
                        

Disable Matching Colors Panel

                        
                            <script type="text/javascript">
                                $(document).ready(function(){ 
                                    $("#TrixCG").colorCodeGenerator({         
                                        'matchingColorsEnabled':false
                                    });
                                });
                            </script>