#Home

The MarsScreen Color Picker CSS was created to help web developers and designers find the perfect color for their next project. The color picker makes it easy by allowing you to click and drag your cursor inside the picker area to highlight a color on the screen. You can then input Hex, RGB and HSL values to search for a particular color in the fields.

HEX

Here is the default roundness color palette: ⟵ Click the circle to change the color.


          <body>
            ...
            <input type="text" class="color" value="#FF9F29">
            ...
            <script>
            var cp = new ColorPickerFS();
            </script>
          </body>

RGB

And here is square color palette ⟵ Click the square to change the color.


          <body>
            ...
            <input type="text" class="color" value="rgb(106, 44, 112)">
            ...
            <script>
            var cp = new ColorPickerFS({
              palette: {
                roundness: '0px'
              }
            });
            </script>
          </body>

HSL

Here is Pink color palette ⟵ Click the Pink color palette to change the color.


          <body>
            ...
            <input type="text" class="color" value="hsl(342deg 97% 65%)">
            ...
            <script>
            var cp = new ColorPickerFS({
              palette: {
                width: '75px',
                roundness: '3px'
              }
            });
            </script>
          </body>

#Getting Started

Make ColorPickerFS a Part of Your Project Today: For all the web pages or templates you'd like to apply ColorPickerFS, simply link the files in the <head> section. 


          <head>
            <!-- load ColorPickerFS styles -->
            <link rel="stylesheet" href="/your-path-to-ColorPickerFS/assets/css/ColorPickerFS.css">
            <!-- load ColorPickerFS script -->
            <script src="/your-path-to-ColorPickerFS/assets/js/ColorPickerFS.js"></script>
          </head>

Double-Check Your Paths

Double-check that the file paths you've included in your pages <head> are correct and match up with where all of your project's files have been relocated.

#How To Use

It's time to begin your journey with ColorPickerFS! To get started, we must include a text input in our page with both the color value and class "color". 


          <input type="text" class="color" value="#FF9F29">

Now, you can create the color picker. Just add a script to our page before the closing </body> tag:


          <script>
          var cp = new ColorPickerFS();
          </script>

#Palette Width

You can also control width of Palette.

The default value: 30px.


          <script>
          var cp = new ColorPickerFS({
            palette: {
              ...
              width: '30px',
              ...
            }
          });
          </script>

#Palette Height

Or control height of Palette.

The default value: 30px.


          <script>
          var cp = new ColorPickerFS({
            palette: {
              ...
              height: '30px',
              ...
            }
          });
          </script>

#Palette Roundness

And control roundness of Palette.

The default value: 15px.


          <script>
          var cp = new ColorPickerFS({
            palette: {
              ...
              roundness: '15px',
              ...
            }
          });
          </script>

#Custom Class for Palette

If you need to change default class for Palette, just use container parameter.

The default value: .color.


          <script>
          var cp = new ColorPickerFS({
            ...
            container: '.your-custom-class',
            ...
          });
          </script>