primereact/components/colorpicker/ColorPicker.css

[](https://gitter.im/primefaces/primereact?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)

.ui-colorpicker {
    display: inline-block;
} 

.ui-colorpicker-dragging {
    cursor: pointer;
} 

.ui-colorpicker-overlay {
    position: relative;
} 

.ui-colorpicker-panel {
    position: relative;
    width: 193px;
    height: 166px;
    background-color: #323232;
    border-color: #191919;
}

.ui-colorpicker-overlay-panel {
    display: none;
    position: absolute;
} 

.ui-colorpicker-preview {
    width: 2em;
    cursor: pointer;
}

.ui-colorpicker-panel .ui-colorpicker-content {
    position: relative;
}

.ui-colorpicker-panel .ui-colorpicker-color-selector {
    width: 150px;
    height: 150px;
    top: 8px;
    left: 8px;
    position: absolute;
}

.ui-colorpicker-panel .ui-colorpicker-color {
     width: 150px;
     height: 150px;
     background: transparent url("./images/color.png") no-repeat left top; 
}

.ui-colorpicker-panel .ui-colorpicker-color-handle {
     position: absolute;
     top: 0px;
     left: 150px;
     border-radius: 100%;
     width: 10px;
     height: 10px;
     border: 1px solid #ffffff;
     margin: -5px 0 0 -5px;
     cursor: pointer;
}

.ui-colorpicker-panel .ui-colorpicker-hue {
    background: transparent url("./images/hue.png") no-repeat left top; 
    width: 17px;
    height: 150px;
    top: 8px;
    left: 167px;
    position: absolute;
    opacity: .85;
}

.ui-colorpicker-panel .ui-colorpicker-hue-handle {
     position: absolute;
     top: 150px;
     left: 0px;
     width: 21px;
     margin-left: -2px;
     margin-top: -5px;
     height: 10px;
     border: 2px solid #ffffff;
     opacity: .85;
     cursor: pointer;
 }
 
 .ui-colorpicker-panel.ui-state-disabled .ui-colorpicker-hue-handle,
 .ui-colorpicker-panel.ui-state-disabled .ui-colorpicker-color-handle  {
      opacity: .5;
 }