custom.html

<div class="control-section">
    <div id="colorpicker-control">
        <div class="row">
            <div id="e-shirt-preview"></div>
        </div>
        <div id="colorpicker-content" class="row">
            <div class="col-xs-12 col-sm-12 col-lg-6 col-md-6 e-circle-wrap">
                <input id="circle-palette" type="color">
            </div>
            <div class="col-xs-12 col-sm-12 col-lg-6 col-md-6 e-rounded-wrap">
                <input id="rounded-palette" type="color">
            </div>
            <div class="col-xs-12 col-sm-12 col-lg-6 col-md-6 e-square-wrap">
                <input id="square-palette" type="color">
            </div>
            <div class="col-xs-12 col-sm-12 col-lg-6 col-md-6 e-scroll-wrap">
                <input id="scroll-palette" type="color">
            </div>
        </div>
    </div>
</div>
<div id="action-description">
    <p>This sample demonstrates how to customize the color palettes with different types and styles.</p>
</div>
<div id="description">
    <p>
        The ColorPicker component is a user interface to select and adjust color values. This supports various color specifications
        like RGB (Red Green Blue), HSV (Hue Saturation Value), and Hex codes.
    </p>
    <p>
        In this sample,</p>
    <ul>
        <li>
            Select the shirt color from different customized palettes. It contains circle, square, rounded edge, and multiple scroll
            palettes.
        </li>
        <li>Using the
            <code>
                <a target="_blank" class="code" href="https://ej2.syncfusion.com/javascript/documentation/api/color-picker/#presetcolors">presetColors
                </a>
            </code> property, you can specify the custom colors to be loaded.</li>
    </ul>
    <p>
        More information about ColorPicker can be found in this
        <a target="_blank" href="https://ej2.syncfusion.com/javascript/documentation/color-picker/es5-getting-started/">
            documentation section</a>.
    </p>
</div>
<style>
     /* Circle palette customization */
    .e-container .e-palette .e-circle-palette {
        border: 0;
        height: 32px;
        width: 32px;
        border-radius: 20px;
        margin: 4px;
    }
    .e-bigger .e-container .e-palette .e-circle-palette {
        height: 32px;
        width: 32px;
    }
    .e-container .e-palette .e-circle-palette:hover {
        box-shadow: none;
        transform: scale(1.2);
        transition: transform .2s ease-out;
    }
    .e-circle-palette .e-circle-selection {
        height: 32px;
        width: 32px;
        border-radius: 20px;
        display: inline-block;
        transform: scale(0);
        transition: transform 1.2s ease-in;
    }
    .e-circle-palette.e-selected .e-circle-selection {
        transform: scale(0.8);
        background-color: #fff;
        transition: transform .2s ease-out;
    }
    #circle-palette+.e-container,
    #scroll-palette+.e-container {
        background-color: transparent;
        border-color: transparent;
        box-shadow: none;
    }

    /* Scrollable palette customization */
    #scroll-palette+.e-container .e-custom-palette.e-palette-group,
    .e-bigger #scroll-palette+.e-container .e-custom-palette.e-palette-group {
        height: 125px;
    }
    .e-container .e-palette .e-scroll-palette {
        border: 0;
        color: #fff;
        line-height: 24px;
        font-size: 16px;
        height: 24px;
        width: 35px;
        margin-top: 2px;
        margin-left: 10px;
    }
    .e-bigger .e-container .e-palette .e-scroll-palette {
        height: 24px;
        width: 35px;
    }
    .e-container .e-palette .e-scroll-palette.e-selected::before {
        content: '\e933';
    }
    .highcontrast .e-container .e-palette {
        border-bottom-color: transparent;
    }

    /* Square palette customization */
    .e-container .e-palette .e-square-palette,
    .e-bigger .e-container .e-palette .e-square-palette {
        width: 20px;
        height: 20px;
    }
    #square-palette+.e-container .e-custom-palette .e-palette,
    #rounded-palette+.e-container .e-custom-palette .e-palette {
        padding: 5px;
    }

    /* Rounded corner palette customization */
    .e-container .e-palette .e-rounded-palette {
        border-radius: 4px;
        margin: 3px;
        height: 16px;
        width: 16px;
    }
    .e-bigger .e-container .e-palette .e-rounded-palette {
        height: 16px;
        width: 16px;
    }
    .e-container .e-palette .e-rounded-palette:hover,
    .e-container .e-palette .e-scroll-palette:hover {
        box-shadow: none;
    }
    .e-container .e-palette .e-circle-palette.e-selected,
    .e-container .e-palette .e-rounded-palette.e-selected,
    .e-container .e-palette .e-square-palette.e-selected,
    .e-container .e-palette .e-scroll-palette.e-selected {
        outline: none;
    }
</style>

<!-- custom code start -->

<style>
    /* Common sample level styles */
    #colorpicker-control {
        margin: auto 0;
        text-align: center;
    }
    #colorpicker-control .col-lg-6 {
        margin-bottom: 20px;
    }
    #colorpicker-control .col-lg-6.e-circle-wrap {
        width: 26%;
    }
    #colorpicker-control .col-lg-6.e-square-wrap {
        margin-top: 37px;
        width: 22%;
    }
    #colorpicker-control .col-lg-6.e-rounded-wrap {
        margin-top: 35px;
        width: 20%;
    }
    #colorpicker-control .col-lg-6.e-scroll-wrap {
        width: 32%;
    }

    /* Preview area styles */
    #colorpicker-control #e-shirt-preview {
        background: transparent url('./src/color-picker/images/shirt.png') no-repeat;
        height: 320px;
        margin: 20px auto;
        display: inline-block;
        width: 400px;
        background-color: rgb(244, 67, 54);
    }
    #colorpicker-control.e-mobile-control #e-shirt-preview {
        margin-left: -21%;
        width: 320px;
    }
    .highcontrast #colorpicker-control #e-shirt-preview {
        background: transparent url('./src/color-picker/images/shirt_highcontrast.png') no-repeat;
        background-color: rgb(244, 67, 54);
    }

    /* Common sample level styles for mobile */
    #colorpicker-control.e-mobile-control .col-lg-6 {
        width: 55%;
    }
    @media only screen and (min-width: 768px) {
        #colorpicker-control.e-mobile-control .col-sm-12 {
            width: 25%;
        }
    }
    #colorpicker-control.e-mobile-control #colorpicker-content {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
    }
    #colorpicker-control.e-mobile-control #colorpicker-content .col-xs-12 {
        flex: 0 0 auto;
    }
</style>

<!-- custom code end -->