All docs
V20.2
21.2
21.1
20.2
20.1
19.2
The page you are viewing does not exist in version 19.2. This link will take you to the root page.
19.1
The page you are viewing does not exist in version 19.1. This link will take you to the root page.
18.2
The page you are viewing does not exist in version 18.2. This link will take you to the root page.
18.1
The page you are viewing does not exist in version 18.1. This link will take you to the root page.
17.2
The page you are viewing does not exist in version 17.2. This link will take you to the root page.
A newer version of this page is available. Switch to the current version.

Overview

The ColorBox is a UI component that allows an end user to enter a color or pick it out from the drop-down editor.

View Demo

The following code adds a simple ColorBox to your page.

jQuery
HTML
JavaScript
<div id="colorBoxContainer"></div>
$(function() {
    $("#colorBoxContainer").dxColorBox({
        value: "#FF0000"
    });
});
Angular
HTML
TypeScript
<dx-color-box
    [(value)]="color">
</dx-color-box>
import { DxColorBoxModule } from "devextreme-angular";
// ...
export class AppComponent {
    color: string = "#FF0000"
}
@NgModule({
    imports: [
        // ...
        DxColorBoxModule
    ],
    // ...
})
Vue
App.vue
<template>
    <DxColorBox
        v-model:value="color"
    />
</template>

<script>
import 'devextreme/dist/css/dx.common.css';
import 'devextreme/dist/css/dx.light.css';

import DxColorBox from 'devextreme-vue/color-box';

export default {
    components: {
        DxColorBox
    },
    data() {
        return {
            color: "#FF0000"
        };
    }
}
</script>
React
App.js
import React from 'react';
import 'devextreme/dist/css/dx.common.css';
import 'devextreme/dist/css/dx.light.css';

import ColorBox from 'devextreme-react/color-box';

class App extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            color: "#FF0000"
        };
        this.handleValueChange = this.handleValueChange.bind(this);
    }

    handleValueChange(e) {
        this.setState({
            color: e.value
        });
    }

    render() {
        return (
            <ColorBox
                value={this.state.color}
                onValueChanged={this.handleValueChange}
            />
        );
    }
}
export default App;

The ColorBox accepts colors in hexadecimal ("#FF0000"), RGB ("rgb(255, 0, 0)") and RGBA ("rgba(255, 0, 0, 1)") formats, as well as color names. When an end user selects a color from the drop-down editor, the textual representation of the selected color is hexadecimal.

See Also