# ColorPicker

**Path:** Components/Form Inputs

[Back to Documentation Index](http://rubicblazor.skyconis.com/docs.md)

---

ColorPicker

 RbColorPicker provides a native HTML5 color picker for selecting colors with hex value output.
 It's ideal for theme customization, design tools, and any application requiring color selection.

 Basic Usage

 Simple color picker examples with two-way data binding.

 Show code

 Theme Color

 Primary theme color 

 Background Color

 Page background 

 Accent Color

 Highlight color 

 Theme: #3b82f6

 Background: #f3f4f6

 Accent: #10b981

 Color Formats

 Display selected color in different formats: HEX, RGB, and HSL.

 Show code

 HEX Format

 HEX: #3b82f6

 RGB Format

 HEX: #10b981

 RGB: 16, 185, 129

 HSL Format

 HEX: #f59e0b

 RGB: 245, 158, 11

 HSL: 37, 0.92, 0.5

 All Formats

 HEX: #8b5cf6

 RGB: 139, 92, 246

 HSL: 258, 0.9, 0.66

 Readonly & Disabled

 Control interaction states with Readonly and Disabled parameters.

 Show code

 States

 Normal 

 Disabled 

 Readonly 

 Normal: #3b82f6

 Disabled: #ef4444

 Readonly: #10b981

 RTL Support

 Use the color picker inside a local RTL container to keep text flow and interaction aligned.

 Show code

 اللون الأساسي 
 #2563eb 

 لون التنبيه 
 #f59e0b 

 لون ثابت للقراءة فقط 
 #10b981 

 ✕

 Contents