Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Details

Privacy

Go PRO Window blinds lowered to protect code. Code Editor with window blinds (raised) and a light blub turned on.

Keep it secret; keep it safe.

Private Pens are hidden everywhere on CodePen, except to you. You can still share them and other people can see them, they just can't find them through searching or browsing.

Upgrade to PRO

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

Template

Make Template?

Templates are Pens that can be used to start other Pens quickly from the create menu. The new Pen will copy all the code and settings from the template and make a new Pen (that is not a fork). You can view all of your templates, or learn more in the documentation.

Template URL

Any Pen can act as a template (even if you don't flip the toggle above) with a special URL you can use yourself or share with others. Here's this Pen's template URL:

Screenshot

Screenshot or Custom Thumbnail

Screenshots of Pens are shown in mobile browsers, RSS feeds, to users who chose images instead of iframes, and in social media sharing.

This Pen is using the default Screenshot, generated by CodePen. Upgrade to PRO to upload your own thumbnail that will be displayed on previews of this pen throughout the site and when sharing to social media.

Upgrade to PRO

HTML

              
                <div id="container2">
  <div id="container1">
    		<div id="col1">
       	<div id="colors">
          <img id="colorWheel" width="400" height="400" title="" alt="" src="data:image/png;base64,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" />
                
        <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
        <svg version="1.1" id="ColorLabels" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
             width="400px" height="400px" viewBox="0 0 400 400" enable-background="new 0 0 400 400" xml:space="preserve">
        <g>
            <path id="rotateKnob" fill="#CCCCCC" d="M200.026,312.307C138,312.307,87.717,262.027,87.717,200c0-62.025,50.283-112.308,112.309-112.308
        c61.361,0,111.197,49.219,112.256,110.328H200.026v3.96h112.256C311.224,263.09,261.388,312.307,200.026,312.307z"/>
        </g>
			<path fill="#000" d="M192.571,381.306c0,0.052-0.013,0.098-0.039,0.137s-0.072,0.07-0.137,0.093s-0.151,0.042-0.259,0.059
		s-0.239,0.024-0.396,0.024c-0.169,0-0.306-0.008-0.41-0.024s-0.189-0.036-0.254-0.059s-0.111-0.054-0.137-0.093
		s-0.039-0.085-0.039-0.137V375.7h-5.752v5.605c0,0.052-0.013,0.098-0.039,0.137s-0.072,0.07-0.137,0.093s-0.151,0.042-0.259,0.059
		s-0.243,0.024-0.405,0.024c-0.156,0-0.29-0.008-0.4-0.024s-0.199-0.036-0.264-0.059s-0.111-0.054-0.137-0.093
		s-0.039-0.085-0.039-0.137v-12.129c0-0.052,0.013-0.098,0.039-0.137s0.072-0.07,0.137-0.093s0.153-0.042,0.264-0.059
		s0.244-0.024,0.4-0.024c0.163,0,0.298,0.008,0.405,0.024s0.194,0.036,0.259,0.059s0.111,0.054,0.137,0.093s0.039,0.085,0.039,0.137
		v5.059h5.752v-5.059c0-0.052,0.013-0.098,0.039-0.137s0.072-0.07,0.137-0.093s0.15-0.042,0.254-0.059s0.241-0.024,0.41-0.024
		c0.156,0,0.288,0.008,0.396,0.024s0.194,0.036,0.259,0.059s0.111,0.054,0.137,0.093s0.039,0.085,0.039,0.137V381.306z
		 M203.274,381.315c0,0.052-0.012,0.096-0.034,0.132s-0.063,0.066-0.122,0.093s-0.135,0.046-0.229,0.059s-0.21,0.02-0.347,0.02
		c-0.149,0-0.271-0.007-0.366-0.02s-0.169-0.032-0.225-0.059s-0.093-0.057-0.112-0.093s-0.029-0.08-0.029-0.132v-1.162
		c-0.501,0.554-0.996,0.957-1.484,1.211s-0.983,0.381-1.484,0.381c-0.586,0-1.079-0.098-1.479-0.293s-0.724-0.461-0.972-0.796
		s-0.425-0.726-0.532-1.172s-0.161-0.988-0.161-1.626v-5.332c0-0.052,0.011-0.096,0.034-0.132s0.067-0.068,0.132-0.098
		s0.15-0.049,0.254-0.059s0.234-0.015,0.391-0.015s0.287,0.005,0.391,0.015s0.187,0.029,0.249,0.059s0.106,0.062,0.132,0.098
		s0.039,0.08,0.039,0.132v5.117c0,0.515,0.038,0.926,0.112,1.235s0.189,0.573,0.342,0.791s0.347,0.388,0.581,0.508
		s0.508,0.181,0.82,0.181c0.404,0,0.806-0.144,1.206-0.43s0.825-0.706,1.274-1.26v-6.143c0-0.052,0.012-0.096,0.034-0.132
		s0.066-0.068,0.132-0.098s0.148-0.049,0.249-0.059s0.232-0.015,0.396-0.015c0.156,0,0.286,0.005,0.391,0.015
		s0.186,0.029,0.244,0.059s0.103,0.062,0.132,0.098s0.044,0.08,0.044,0.132V381.315z M213.753,376.54
		c0,0.254-0.063,0.435-0.191,0.542s-0.272,0.161-0.437,0.161h-5.788c0,0.488,0.049,0.928,0.147,1.318
		c0.098,0.391,0.262,0.726,0.49,1.006c0.229,0.28,0.526,0.495,0.894,0.645c0.366,0.149,0.814,0.225,1.344,0.225
		c0.419,0,0.792-0.034,1.119-0.103s0.609-0.145,0.849-0.229c0.238-0.085,0.435-0.161,0.589-0.229c0.153-0.068,0.27-0.103,0.349-0.103
		c0.046,0,0.086,0.012,0.122,0.034s0.064,0.057,0.084,0.103s0.034,0.109,0.044,0.19s0.015,0.181,0.015,0.298
		c0,0.085-0.003,0.158-0.01,0.22s-0.015,0.117-0.024,0.166s-0.026,0.093-0.049,0.132s-0.052,0.076-0.088,0.112
		s-0.142,0.095-0.317,0.176s-0.403,0.161-0.684,0.239s-0.604,0.148-0.972,0.21s-0.76,0.093-1.177,0.093
		c-0.723,0-1.355-0.101-1.899-0.303s-1.001-0.501-1.372-0.898s-0.651-0.896-0.84-1.494s-0.283-1.296-0.283-2.09
		c0-0.755,0.098-1.434,0.293-2.036s0.477-1.113,0.845-1.533s0.813-0.742,1.333-0.967s1.104-0.337,1.748-0.337
		c0.69,0,1.277,0.11,1.763,0.332s0.884,0.52,1.196,0.894s0.542,0.813,0.688,1.318s0.22,1.043,0.22,1.616V376.54z M212.132,376.062
		c0.02-0.847-0.169-1.511-0.565-1.992c-0.396-0.481-0.983-0.723-1.764-0.723c-0.399,0-0.75,0.075-1.051,0.225
		c-0.302,0.149-0.554,0.349-0.757,0.596s-0.36,0.535-0.472,0.864s-0.174,0.672-0.187,1.03H212.132z"/>
        </svg>

          <svg version="1.1" id="Brightness" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
           width="400px" height="100px" viewBox="0 0 400 100" enable-background="new 0 0 400 100" xml:space="preserve">
        <line id="path1" fill="none" stroke="#999999" stroke-width="3" stroke-miterlimit="10" x1="34" y1="50" x2="366" y2="50"/>
        <circle class="handle" fill="#CD6632" cx="34" cy="50" r="20.349"/>
            		<path d="M165.77,85.437c0,0.397-0.05,0.764-0.151,1.099s-0.243,0.637-0.425,0.903s-0.402,0.501-0.659,0.703
			s-0.547,0.371-0.869,0.508s-0.667,0.239-1.035,0.308s-0.79,0.103-1.265,0.103h-3.301c-0.15,0-0.292-0.051-0.425-0.151
			s-0.2-0.278-0.2-0.532v-11.27c0-0.254,0.067-0.432,0.2-0.532s0.275-0.151,0.425-0.151h2.871c0.755,0,1.374,0.071,1.855,0.215
			s0.884,0.352,1.206,0.625s0.565,0.608,0.728,1.006s0.244,0.847,0.244,1.348c0,0.3-0.036,0.586-0.107,0.859s-0.177,0.525-0.317,0.757
			s-0.316,0.438-0.527,0.62s-0.454,0.332-0.728,0.449c0.345,0.065,0.667,0.184,0.967,0.356s0.562,0.393,0.786,0.659
			s0.402,0.579,0.532,0.938S165.77,85.007,165.77,85.437z M163.24,79.782c0-0.306-0.042-0.583-0.126-0.83
			c-0.084-0.247-0.218-0.457-0.4-0.63c-0.182-0.173-0.419-0.305-0.711-0.396c-0.292-0.091-0.679-0.137-1.159-0.137h-1.734v4.092h1.91
			c0.435,0,0.786-0.057,1.052-0.171c0.266-0.114,0.487-0.267,0.662-0.459c0.176-0.192,0.304-0.417,0.385-0.674
			C163.2,80.321,163.24,80.056,163.24,79.782z M164.002,85.534c0-0.378-0.06-0.71-0.18-0.996c-0.121-0.286-0.296-0.527-0.526-0.723
			c-0.231-0.195-0.52-0.344-0.868-0.444s-0.785-0.151-1.311-0.151h-2.008v4.453h2.437c0.383,0,0.718-0.046,1.004-0.137
			c0.286-0.091,0.538-0.227,0.755-0.405c0.217-0.179,0.388-0.402,0.512-0.669C163.94,86.195,164.002,85.886,164.002,85.534z
			 M173.27,80.603c0,0.144-0.003,0.264-0.01,0.361s-0.02,0.174-0.039,0.229s-0.044,0.098-0.073,0.127s-0.07,0.044-0.122,0.044
			s-0.116-0.015-0.19-0.044s-0.16-0.059-0.254-0.088s-0.2-0.057-0.317-0.083s-0.244-0.039-0.381-0.039
			c-0.163,0-0.322,0.032-0.479,0.098s-0.321,0.173-0.493,0.322s-0.353,0.349-0.542,0.596s-0.397,0.55-0.625,0.908v5.781
			c0,0.052-0.013,0.096-0.039,0.132s-0.068,0.066-0.127,0.093s-0.14,0.046-0.244,0.059s-0.238,0.02-0.4,0.02
			c-0.156,0-0.287-0.007-0.391-0.02s-0.187-0.032-0.249-0.059s-0.104-0.057-0.127-0.093s-0.034-0.08-0.034-0.132v-8.789
			c0-0.052,0.01-0.096,0.029-0.132s0.059-0.068,0.117-0.098s0.133-0.049,0.225-0.059s0.211-0.015,0.361-0.015
			c0.143,0,0.262,0.005,0.356,0.015s0.167,0.029,0.22,0.059s0.089,0.062,0.112,0.098s0.034,0.08,0.034,0.132v1.279
			c0.241-0.352,0.467-0.638,0.679-0.859s0.412-0.396,0.601-0.522s0.376-0.215,0.562-0.264s0.373-0.073,0.562-0.073
			c0.084,0,0.181,0.005,0.288,0.015s0.22,0.027,0.337,0.054s0.223,0.056,0.317,0.088s0.161,0.065,0.2,0.098s0.065,0.063,0.078,0.093
			s0.024,0.066,0.034,0.112s0.016,0.112,0.02,0.2S173.27,80.453,173.27,80.603z M176.902,77.058c0,0.378-0.072,0.635-0.215,0.771
			s-0.407,0.205-0.791,0.205c-0.377,0-0.636-0.066-0.776-0.2s-0.21-0.386-0.21-0.757c0-0.378,0.072-0.635,0.215-0.771
			s0.407-0.205,0.791-0.205c0.377,0,0.636,0.066,0.776,0.2S176.902,76.687,176.902,77.058z M176.717,88.815
			c0,0.052-0.013,0.096-0.039,0.132s-0.068,0.066-0.127,0.093s-0.14,0.046-0.244,0.059s-0.238,0.02-0.4,0.02
			c-0.156,0-0.287-0.007-0.391-0.02s-0.187-0.032-0.249-0.059s-0.104-0.057-0.127-0.093s-0.034-0.08-0.034-0.132v-8.789
			c0-0.046,0.011-0.088,0.034-0.127s0.065-0.071,0.127-0.098s0.145-0.046,0.249-0.059s0.234-0.02,0.391-0.02
			c0.163,0,0.296,0.007,0.4,0.02s0.186,0.032,0.244,0.059s0.101,0.059,0.127,0.098s0.039,0.081,0.039,0.127V88.815z M187.039,80.427
			c0,0.228-0.031,0.393-0.093,0.493s-0.142,0.151-0.239,0.151h-1.26c0.228,0.234,0.387,0.493,0.479,0.776s0.137,0.578,0.137,0.884
			c0,0.508-0.082,0.957-0.244,1.348s-0.396,0.721-0.698,0.991s-0.663,0.477-1.079,0.62s-0.879,0.215-1.387,0.215
			c-0.358,0-0.698-0.047-1.021-0.142s-0.571-0.213-0.747-0.356c-0.117,0.117-0.213,0.251-0.288,0.4s-0.112,0.322-0.112,0.518
			c0,0.228,0.106,0.417,0.317,0.566s0.493,0.231,0.845,0.244l2.295,0.098c0.436,0.013,0.836,0.073,1.201,0.181s0.68,0.261,0.947,0.459
			s0.475,0.442,0.625,0.732s0.225,0.627,0.225,1.011c0,0.403-0.084,0.788-0.254,1.152s-0.428,0.686-0.776,0.962
			s-0.792,0.495-1.333,0.654s-1.178,0.239-1.914,0.239c-0.709,0-1.313-0.061-1.812-0.181s-0.907-0.285-1.226-0.493
			s-0.55-0.457-0.693-0.747s-0.215-0.604-0.215-0.942c0-0.215,0.026-0.423,0.078-0.625s0.132-0.394,0.239-0.576s0.241-0.356,0.4-0.522
			s0.343-0.33,0.552-0.493c-0.319-0.163-0.555-0.368-0.708-0.615s-0.229-0.515-0.229-0.801c0-0.397,0.082-0.752,0.244-1.064
			s0.365-0.593,0.605-0.84c-0.202-0.241-0.361-0.513-0.479-0.815s-0.176-0.669-0.176-1.099c0-0.501,0.084-0.95,0.254-1.348
			s0.404-0.732,0.703-1.006s0.659-0.483,1.079-0.63s0.877-0.22,1.372-0.22c0.267,0,0.516,0.015,0.747,0.044s0.448,0.07,0.649,0.122
			h2.656c0.111,0,0.194,0.054,0.249,0.161S187.039,80.205,187.039,80.427z M185.33,89.704c0-0.378-0.155-0.669-0.464-0.874
			s-0.728-0.314-1.255-0.327l-2.275-0.078c-0.208,0.163-0.379,0.317-0.513,0.464s-0.239,0.286-0.317,0.42s-0.132,0.266-0.161,0.396
			s-0.044,0.264-0.044,0.4c0,0.423,0.215,0.744,0.645,0.962s1.029,0.327,1.797,0.327c0.488,0,0.897-0.047,1.226-0.142
			s0.594-0.22,0.796-0.376s0.347-0.335,0.435-0.537S185.33,89.926,185.33,89.704z M184.52,82.741c0-0.599-0.165-1.066-0.493-1.401
			s-0.796-0.503-1.401-0.503c-0.313,0-0.584,0.052-0.815,0.156s-0.423,0.247-0.576,0.43s-0.267,0.393-0.342,0.63
			s-0.112,0.486-0.112,0.747c0,0.579,0.165,1.035,0.493,1.367s0.79,0.498,1.382,0.498c0.319,0,0.596-0.051,0.83-0.151
			s0.428-0.241,0.581-0.42s0.267-0.386,0.342-0.62S184.52,82.995,184.52,82.741z M196.678,88.815c0,0.052-0.013,0.096-0.039,0.132
			s-0.068,0.066-0.127,0.093s-0.14,0.046-0.244,0.059s-0.234,0.02-0.391,0.02c-0.163,0-0.296-0.007-0.4-0.02s-0.186-0.032-0.244-0.059
			s-0.101-0.057-0.127-0.093s-0.039-0.08-0.039-0.132v-5.146c0-0.501-0.039-0.905-0.117-1.211s-0.192-0.569-0.342-0.791
			s-0.343-0.391-0.581-0.508s-0.513-0.176-0.825-0.176c-0.404,0-0.807,0.144-1.211,0.43s-0.827,0.706-1.27,1.26v6.143
			c0,0.052-0.013,0.096-0.039,0.132s-0.068,0.066-0.127,0.093s-0.14,0.046-0.244,0.059s-0.238,0.02-0.4,0.02
			c-0.156,0-0.287-0.007-0.391-0.02s-0.187-0.032-0.249-0.059s-0.104-0.057-0.127-0.093s-0.034-0.08-0.034-0.132V75.769
			c0-0.052,0.011-0.098,0.034-0.137s0.065-0.071,0.127-0.098s0.145-0.046,0.249-0.059s0.234-0.02,0.391-0.02
			c0.163,0,0.296,0.007,0.4,0.02s0.186,0.032,0.244,0.059s0.101,0.059,0.127,0.098s0.039,0.085,0.039,0.137v5.264
			c0.462-0.488,0.928-0.852,1.396-1.089s0.941-0.356,1.416-0.356c0.586,0,1.079,0.1,1.479,0.298s0.724,0.464,0.972,0.796
			s0.425,0.721,0.532,1.167s0.161,0.984,0.161,1.616V88.815z M204.002,88.171c0,0.188-0.013,0.339-0.039,0.449
			s-0.065,0.192-0.117,0.244s-0.13,0.101-0.234,0.146s-0.223,0.083-0.356,0.112s-0.275,0.054-0.425,0.073s-0.3,0.029-0.449,0.029
			c-0.455,0-0.846-0.061-1.172-0.181c-0.326-0.12-0.592-0.303-0.801-0.547s-0.36-0.554-0.454-0.928s-0.142-0.815-0.142-1.323V81.11
			h-1.23c-0.098,0-0.176-0.052-0.234-0.156s-0.088-0.273-0.088-0.508c0-0.124,0.008-0.228,0.024-0.313s0.038-0.154,0.063-0.21
			s0.06-0.095,0.103-0.117s0.089-0.034,0.142-0.034h1.221v-2.09c0-0.046,0.011-0.088,0.034-0.127s0.065-0.073,0.127-0.103
			s0.145-0.051,0.249-0.063s0.234-0.02,0.391-0.02c0.163,0,0.296,0.007,0.4,0.02c0.104,0.013,0.186,0.034,0.244,0.063
			s0.102,0.063,0.127,0.103s0.039,0.081,0.039,0.127v2.09h2.256c0.052,0,0.098,0.012,0.137,0.034s0.073,0.062,0.103,0.117
			s0.051,0.125,0.063,0.21s0.02,0.188,0.02,0.313c0,0.234-0.029,0.403-0.088,0.508s-0.137,0.156-0.234,0.156h-2.256v4.902
			c0,0.605,0.09,1.063,0.269,1.372s0.5,0.464,0.962,0.464c0.149,0,0.283-0.015,0.4-0.044s0.222-0.061,0.313-0.093
			s0.169-0.063,0.234-0.093s0.124-0.044,0.176-0.044c0.032,0,0.063,0.008,0.093,0.024s0.052,0.047,0.068,0.093
			s0.031,0.107,0.044,0.186S204.002,88.054,204.002,88.171z M213.699,88.815c0,0.052-0.013,0.096-0.039,0.132
			s-0.068,0.066-0.127,0.093s-0.14,0.046-0.244,0.059s-0.234,0.02-0.391,0.02c-0.163,0-0.296-0.007-0.4-0.02s-0.186-0.032-0.244-0.059
			s-0.101-0.057-0.127-0.093s-0.039-0.08-0.039-0.132v-5.146c0-0.501-0.039-0.905-0.117-1.211s-0.192-0.569-0.342-0.791
			s-0.344-0.391-0.581-0.508s-0.513-0.176-0.825-0.176c-0.403,0-0.808,0.144-1.211,0.43s-0.827,0.706-1.27,1.26v6.143
			c0,0.052-0.013,0.096-0.039,0.132s-0.068,0.066-0.127,0.093s-0.14,0.046-0.244,0.059s-0.237,0.02-0.4,0.02
			c-0.156,0-0.286-0.007-0.391-0.02s-0.188-0.032-0.249-0.059s-0.104-0.057-0.127-0.093s-0.034-0.08-0.034-0.132v-8.789
			c0-0.052,0.01-0.096,0.029-0.132s0.059-0.068,0.117-0.098s0.134-0.049,0.225-0.059s0.212-0.015,0.361-0.015
			c0.144,0,0.262,0.005,0.356,0.015s0.168,0.029,0.22,0.059s0.09,0.062,0.112,0.098s0.034,0.08,0.034,0.132v1.162
			c0.495-0.554,0.988-0.959,1.479-1.216s0.988-0.386,1.489-0.386c0.586,0,1.079,0.1,1.479,0.298s0.725,0.464,0.972,0.796
			s0.425,0.721,0.532,1.167s0.161,0.981,0.161,1.606V88.815z M224.139,84.04c0,0.254-0.063,0.435-0.191,0.542
			s-0.272,0.161-0.437,0.161h-5.788c0,0.488,0.049,0.928,0.147,1.318c0.098,0.391,0.262,0.726,0.49,1.006
			c0.229,0.28,0.526,0.495,0.894,0.645c0.366,0.149,0.814,0.225,1.344,0.225c0.419,0,0.792-0.034,1.119-0.103s0.609-0.145,0.849-0.229
			c0.238-0.085,0.435-0.161,0.589-0.229c0.153-0.068,0.27-0.103,0.349-0.103c0.046,0,0.086,0.012,0.122,0.034s0.064,0.057,0.084,0.103
			s0.034,0.109,0.044,0.19s0.015,0.181,0.015,0.298c0,0.085-0.003,0.158-0.01,0.22s-0.015,0.117-0.024,0.166s-0.026,0.093-0.049,0.132
			s-0.052,0.076-0.088,0.112s-0.142,0.095-0.317,0.176s-0.403,0.161-0.684,0.239s-0.604,0.148-0.972,0.21s-0.76,0.093-1.177,0.093
			c-0.723,0-1.355-0.101-1.899-0.303s-1.001-0.501-1.372-0.898s-0.651-0.896-0.84-1.494s-0.283-1.296-0.283-2.09
			c0-0.755,0.098-1.434,0.293-2.036s0.477-1.113,0.845-1.533s0.813-0.742,1.333-0.967s1.104-0.337,1.748-0.337
			c0.69,0,1.277,0.11,1.763,0.332s0.884,0.52,1.196,0.894s0.542,0.813,0.688,1.318s0.22,1.043,0.22,1.616V84.04z M222.518,83.562
			c0.02-0.847-0.169-1.511-0.565-1.992c-0.396-0.481-0.983-0.723-1.764-0.723c-0.399,0-0.75,0.075-1.051,0.225
			c-0.302,0.149-0.554,0.349-0.757,0.596s-0.36,0.535-0.472,0.864s-0.174,0.672-0.187,1.03H222.518z M232.107,86.423
			c0,0.449-0.083,0.85-0.249,1.201s-0.402,0.647-0.708,0.889s-0.671,0.423-1.094,0.547s-0.889,0.186-1.396,0.186
			c-0.313,0-0.61-0.024-0.894-0.073s-0.537-0.11-0.762-0.186s-0.415-0.153-0.571-0.234s-0.271-0.154-0.342-0.22
			s-0.124-0.156-0.156-0.273s-0.049-0.276-0.049-0.479c0-0.124,0.007-0.228,0.02-0.313s0.029-0.153,0.049-0.205
			s0.047-0.09,0.083-0.112s0.076-0.034,0.122-0.034c0.071,0,0.178,0.044,0.317,0.132s0.313,0.184,0.518,0.288s0.447,0.2,0.728,0.288
			s0.603,0.132,0.967,0.132c0.273,0,0.521-0.029,0.742-0.088s0.413-0.145,0.576-0.259s0.288-0.259,0.376-0.435
			s0.132-0.384,0.132-0.625c0-0.247-0.063-0.456-0.19-0.625s-0.295-0.319-0.503-0.449s-0.442-0.246-0.703-0.347
			s-0.529-0.207-0.806-0.317s-0.547-0.236-0.811-0.376s-0.5-0.311-0.708-0.513s-0.376-0.442-0.503-0.723s-0.19-0.615-0.19-1.006
			c0-0.345,0.066-0.676,0.2-0.991s0.334-0.593,0.601-0.83s0.601-0.428,1.001-0.571s0.867-0.215,1.401-0.215
			c0.234,0,0.469,0.02,0.703,0.059s0.446,0.088,0.635,0.146s0.35,0.122,0.483,0.19s0.234,0.129,0.303,0.181s0.114,0.098,0.137,0.137
			s0.039,0.083,0.049,0.132s0.02,0.109,0.029,0.181s0.015,0.159,0.015,0.264c0,0.11-0.005,0.207-0.015,0.288s-0.026,0.148-0.049,0.2
			s-0.051,0.09-0.083,0.112s-0.068,0.034-0.107,0.034c-0.059,0-0.144-0.036-0.254-0.107s-0.254-0.148-0.43-0.229
			s-0.383-0.158-0.62-0.229s-0.51-0.107-0.815-0.107c-0.273,0-0.515,0.031-0.723,0.093s-0.379,0.149-0.513,0.264
			s-0.234,0.249-0.303,0.405s-0.103,0.325-0.103,0.508c0,0.254,0.065,0.467,0.195,0.64s0.3,0.324,0.508,0.454s0.446,0.247,0.713,0.352
			s0.539,0.212,0.815,0.322s0.55,0.234,0.82,0.371s0.51,0.303,0.718,0.498s0.376,0.43,0.503,0.703S232.107,86.045,232.107,86.423z
			 M239.93,86.423c0,0.449-0.083,0.85-0.249,1.201s-0.402,0.647-0.708,0.889s-0.671,0.423-1.094,0.547s-0.889,0.186-1.396,0.186
			c-0.313,0-0.61-0.024-0.894-0.073s-0.537-0.11-0.762-0.186s-0.415-0.153-0.571-0.234s-0.271-0.154-0.342-0.22
			s-0.124-0.156-0.156-0.273s-0.049-0.276-0.049-0.479c0-0.124,0.007-0.228,0.02-0.313s0.029-0.153,0.049-0.205
			s0.047-0.09,0.083-0.112s0.076-0.034,0.122-0.034c0.071,0,0.178,0.044,0.317,0.132s0.313,0.184,0.518,0.288s0.447,0.2,0.728,0.288
			s0.603,0.132,0.967,0.132c0.273,0,0.521-0.029,0.742-0.088s0.413-0.145,0.576-0.259s0.288-0.259,0.376-0.435
			s0.132-0.384,0.132-0.625c0-0.247-0.063-0.456-0.19-0.625s-0.295-0.319-0.503-0.449s-0.442-0.246-0.703-0.347
			s-0.529-0.207-0.806-0.317s-0.547-0.236-0.811-0.376s-0.5-0.311-0.708-0.513s-0.376-0.442-0.503-0.723s-0.19-0.615-0.19-1.006
			c0-0.345,0.066-0.676,0.2-0.991s0.334-0.593,0.601-0.83s0.601-0.428,1.001-0.571s0.867-0.215,1.401-0.215
			c0.234,0,0.469,0.02,0.703,0.059s0.446,0.088,0.635,0.146s0.35,0.122,0.483,0.19s0.234,0.129,0.303,0.181s0.114,0.098,0.137,0.137
			s0.039,0.083,0.049,0.132s0.02,0.109,0.029,0.181s0.015,0.159,0.015,0.264c0,0.11-0.005,0.207-0.015,0.288s-0.026,0.148-0.049,0.2
			s-0.051,0.09-0.083,0.112s-0.068,0.034-0.107,0.034c-0.059,0-0.144-0.036-0.254-0.107s-0.254-0.148-0.43-0.229
			s-0.383-0.158-0.62-0.229s-0.51-0.107-0.815-0.107c-0.273,0-0.515,0.031-0.723,0.093s-0.379,0.149-0.513,0.264
			s-0.234,0.249-0.303,0.405s-0.103,0.325-0.103,0.508c0,0.254,0.065,0.467,0.195,0.64s0.3,0.324,0.508,0.454s0.446,0.247,0.713,0.352
			s0.539,0.212,0.815,0.322s0.55,0.234,0.82,0.371s0.51,0.303,0.718,0.498s0.376,0.43,0.503,0.703S239.93,86.045,239.93,86.423z"/>

      </svg>
     </div>
    </div>
    		<div id="col2">
          <div id="colorContainer">
            <img id="colorChange" src="http://dummyimage.com/300x200/0009ff/ffffff">
          </div> 
    </div>
		  </div>
</div>

    

              
            
!

CSS

              
                #container2 {
	clear:left;
	float:left;
	width:100%;
	overflow:hidden;
}
#container1 {
	float:left;
	width:100%;
	position:relative;
	right:50%;
}
#col1 {
	float:left;
	width:46%;
	position:relative;
	left:52%;
	overflow:hidden;
}
#col2 {
	float:left;
	width:46%;
	position:relative;
	left:56%;
	overflow:hidden;
}

.colorSection{ 
	position:absolute; 
	top:0px; 
	left:0px; 
} 

#colors{ 
	MIN-HEIGHT:500PX; 
}

#Brightness{
	position:absolute;
	top:375px; 
	left:50%;
	transform: translate(-50%);
	z-index:2	
}


#colorWheel, #ColorLabels{ 
	position:absolute; 
	top:0px; 
	left:50%;
	transform: translate(-50%);
	z-index:1;
} 

#colorContainer{ 
	position:relative; 
	margin-left: auto; 
	margin-right:auto; 
	width:300px; 
	height:200px;
} 

#ColorLabels, #Brightness, #rotateKnob{
	max-width:100%; 
	height:auto; 
}
              
            
!

JS

              
                var maxSliderRange = 330,
    colorDrag, rotationDrag; 

TweenLite.set("#rotateKnob", {transformOrigin:"50% 50%"});
rotationDrag = Draggable.create("#rotateKnob", {type: "rotation", onThrowUpdate :applyColor, onDrag :applyColor, throwProps: true})[0];

colorDrag = Draggable.create(".handle", {
	type:'x',
	throwProps:true,
	bounds:{minX:0, maxX:maxSliderRange},
	onDrag:applyColor,
	onThrowUpdate:applyColor
})[0];

TweenMax.to(".handle", 2, {x:165, onUpdate:function() {
    colorDrag.update();
    applyColor();
  }, ease:Back.easeOut});

function applyColor() {
   var tlp = ((colorDrag.x / maxSliderRange) * 100) * 2 >> 0;
	 TweenMax.set(['#colorChange'], {'-webkit-filter':'hue-rotate(' + rotationDrag.rotation +'deg) brightness(' + tlp + '%)'})
};

              
            
!
999px
Save your sass for CSS. Everywhere else be kind.

Console