All docs
V21.1
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.

Support Alpha Channel

By default, the ColorBox does not allow an end user to control the transparency, or alpha channel component, of the selected color. If you need to allow this, set the editAlphaChannel property to true. This setting adds a slider that regulates transparency to the drop-down editor, and changes the textual representation of the selected color from hexadecimal to RGBA.

jQuery
JavaScript
 $(function() {
    $("#colorBoxContainer").dxColorBox({
        value: "rgba(255, 144, 0, 0.3)",
        editAlphaChannel: true
    });
});
Angular
HTML
TypeScript
<dx-color-box
    [(value)]="color"
    [editAlphaChannel]="true">
</dx-color-box>
import { DxColorBoxModule } from "devextreme-angular";
// ...
export class AppComponent {
    color: string = "rgba(255, 144, 0, 0.3)"
}
@NgModule({
    imports: [
        // ...
        DxColorBoxModule
    ],
    // ...
})
Vue
App.vue
<template>
    <DxColorBox
        v-model:value="color"
        :edit-alpha-channel="true"
    />
</template>

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

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

export default {
    components: {
        DxColorBox
    },
    data() {
        return {
            color: "rgba(255, 144, 0, 0.3)"
        };
    }
}
</script>
React
App.js
import React from 'react';
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 = {
            value: "rgba(255, 144, 0, 0.3)"
        }
        this.handleValueChange = this.handleValueChange.bind(this);
    }

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

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