Color Picker / Gradient Generator
Pick a color to get its HEX/RGB/HSL codes, or generate a CSS gradient between two colors.
Color Picker
Gradient Generator
How to use this tool
Click the color swatch in the Color Picker card to choose any shade; the HEX, RGB, and HSL values below update instantly, and clicking any one of them copies that value to your clipboard. In the Gradient Generator card, pick a start and end color and drag the angle slider to rotate the gradient direction from 0° to 360°. The preview box updates live, and clicking the CSS field copies a ready-to-use background: linear-gradient(...) rule you can paste straight into your stylesheet.
Related Tools
Related Blog Posts
Best Free Tools Every Developer Should Bookmark
Five browser-based utilities worth bookmarking for everyday development tasks, and what each one is actually good for.
Read moreHEX, RGB, and HSL Explained: A Developer's Guide to Color Formats
The three most common ways to represent color in CSS, plus alpha transparency, and when to reach for each format.
Read more10 CSS Gradient Ideas You Can Copy and Customize
Ready-to-use linear and radial gradient combinations for buttons, backgrounds, and cards, plus an accessibility tip.
Read more