Default Color Picker
To add a basic color picker with default styling, use the
data-kt-color-picker
attribute on a container element.
The color picker will be initialized automatically when the page loads.
Input Mode
To attach a color picker to an input field, use the
data-kt-color-picker-input-mode="true"
attribute.
The color picker will appear when the input is focused and automatically update the input value when a color is selected.
<!--begin::Input with Color Picker-->
<div class="kt-input">
<input class="form-control" data-kt-color-picker="true" data-kt-color-picker-default="#4CAF50" data-kt-color-picker-input-mode="true" id="color-picker-input" placeholder="Select a color" type="text"/>
</div>
<!--end::Input with Color Picker-->
Themes
Pickr supports three different themes:
classic
(default),
monolith
, and
nano
.
Use the
data-kt-color-picker-theme
attribute to change the theme.
<!--begin::Classic Theme-->
<div class="text-center mb-4">
<label class="form-label mb-2">
Classic Theme (Default)
</label>
<div data-kt-color-picker="true" data-kt-color-picker-default="#F44336" data-kt-color-picker-theme="classic" id="color-picker-theme-classic">
</div>
</div>
<!--end::Classic Theme-->
<!--begin::Monolith Theme-->
<div class="text-center mb-4">
<label class="form-label mb-2">
Monolith Theme
</label>
<div data-kt-color-picker="true" data-kt-color-picker-default="#2196F3" data-kt-color-picker-theme="monolith" id="color-picker-theme-monolith">
</div>
</div>
<!--end::Monolith Theme-->
<!--begin::Nano Theme-->
<div class="text-center">
<label class="form-label mb-2">
Nano Theme
</label>
<div data-kt-color-picker="true" data-kt-color-picker-default="#FF9800" data-kt-color-picker-theme="nano" id="color-picker-theme-nano">
</div>
</div>
<!--end::Nano Theme-->
Color Swatches
Add predefined color swatches to the color picker for quick selection. Swatches are defined as a comma-separated list of HEX colors using the
data-kt-color-picker-swatches
attribute.
<!--begin::Color Picker with Swatches-->
<div data-kt-color-picker="true" data-kt-color-picker-default="#9C27B0" data-kt-color-picker-swatches="#F44336,#E91E63,#9C27B0,#673AB7,#3F51B5,#2196F3,#03A9F4,#00BCD4,#009688,#4CAF50,#8BC34A,#CDDC39,#FFEB3B,#FFC107,#FF9800,#FF5722,#795548,#9E9E9E,#607D8B" id="color-picker-swatches">
</div>
<!--end::Color Picker with Swatches-->
Color Formats
The color picker supports multiple color formats including HEX, RGB, RGBA, HSL, HSLA, HSVA, and CMYK.
The format can be controlled through Pickr's component configuration. By default, HEX, RGBA, and HSLA formats are enabled.
<!--begin::Color Picker with Multiple Formats-->
<div class="kt-input">
<input class="form-control" data-kt-color-picker="true" data-kt-color-picker-default="#00BCD4" data-kt-color-picker-input-mode="true" id="color-picker-formats" placeholder="Select a color (HEX, RGB, HSL formats available)" type="text"/>
</div>
<!--end::Color Picker with Multiple Formats-->
API Interaction
Use the
KTColorPicker
component's API methods to programmatically control the color picker.
You can access methods like
show()
,
hide()
,
getColor()
,
reset()
, and
getPickr()
to access the underlying Pickr instance.
<!--begin::Color Picker with API Controls-->
<div class="kt-input mb-4">
<input class="form-control" data-kt-color-picker="true" data-kt-color-picker-default="#E91E63" data-kt-color-picker-input-mode="true" id="color-picker-api" placeholder="Select a color" type="text"/>
</div>
<div class="flex gap-2">
<button class="kt-btn kt-btn-sm kt-btn-primary" onclick="showColorPicker()" type="button">
Show Picker
</button>
<button class="kt-btn kt-btn-sm kt-btn-outline" onclick="hideColorPicker()" type="button">
Hide Picker
</button>
<button class="kt-btn kt-btn-sm kt-btn-outline" onclick="getColorValue()" type="button">
Get Color
</button>
<button class="kt-btn kt-btn-sm kt-btn-outline" onclick="resetColorPicker()" type="button">
Reset
</button>
</div>
<div class="mt-2 text-sm" id="color-value-display">
</div>
<!--end::Color Picker with API Controls-->
<script>
function showColorPicker() {
const picker = KTColorPicker.getInstance('#color-picker-api');
if (picker) picker.show();
}
function hideColorPicker() {
const picker = KTColorPicker.getInstance('#color-picker-api');
if (picker) picker.hide();
}
function getColorValue() {
const picker = KTColorPicker.getInstance('#color-picker-api');
if (picker) {
const color = picker.getColor();
document.getElementById('color-value-display').textContent = 'Selected color: ' + (color || 'None');
}
}
function resetColorPicker() {
const picker = KTColorPicker.getInstance('#color-picker-api');
if (picker) picker.reset();
}
</script>
