Color Picker
Pick a color, view it as HEX, RGB, and HSL, and copy codes into your designs or CSS in a single click.
Pick colors and copy codes instantly
Design ToolUse the color input, edit HEX/RGB/HSL values, and preview the result on light and dark backgrounds.
Color controls
Preview #2563EB
How to pick and use colors
Get clean color codes for CSS, design systems, or UI mockups in a few steps.
1) Choose a color
Use the built‑in color picker or eyedropper (in supported browsers) to start from any color you like.[web:223][web:220][web:217]
2) Adjust HEX/RGB/HSL
Edit any of the HEX, RGB, or HSL inputs and the others will stay in sync automatically.[web:222][web:231][web:232][web:234]
3) Check preview
See how the color looks on light and dark backgrounds before using it in your interface.[web:229][web:230][web:235]
4) Copy and paste
Copy HEX, RGB, or HSL to your clipboard and paste straight into CSS, design tools, or documentation.[web:222][web:231][web:232][web:234]