diff --git a/src/mol-plugin/ui/controls/parameters.tsx b/src/mol-plugin/ui/controls/parameters.tsx index b1a8775ddc594562b5af5b5ce17c02734f81b485..11a06d873281951badac21054cdd659d6f8dc8a9 100644 --- a/src/mol-plugin/ui/controls/parameters.tsx +++ b/src/mol-plugin/ui/controls/parameters.tsx @@ -174,7 +174,7 @@ function ColorOptions() { function ColorValueOption(color: Color) { return !ColorNamesValueMap.has(color) ? <option key={Color.toHexString(color)} value={color} style={{ background: `${Color.toStyle(color)}` }} > - {Color.toHexString(color)} + {Color.toRgbString(color)} </option> : null } diff --git a/src/mol-util/color/color.ts b/src/mol-util/color/color.ts index 9fd800b4b0a78ee9a32606efb172666ed4e326ca..3a1d2434757bee80dbe1808233ff247c7f075fdf 100644 --- a/src/mol-util/color/color.ts +++ b/src/mol-util/color/color.ts @@ -18,6 +18,10 @@ export namespace Color { return '0x' + ('000000' + hexColor.toString(16)).slice(-6) } + export function toRgbString(hexColor: Color) { + return `RGB: ${Color.toRgb(hexColor).join(', ')}` + } + export function toRgb(hexColor: Color) { return [ hexColor >> 16 & 255, hexColor >> 8 & 255, hexColor & 255 ] }