Click on a color in the palette below to select it, or use the color picker above to add new colors.
Use the color selector or palette to choose the shade you need for your project.
See the color as HEX, RGB, and HSL automatically as you adjust the picker.
Click copy next to the format you need: HEX for CSS, RGB for design tools, or HSL for readable lightness tweaks.
Switch between HEX, RGB, and HSL without manual math or spreadsheet formulas.
One-click copy for stylesheets, Figma swatches, and brand guidelines.
Pick and convert colors on desktop or mobile. No install required.
HEX (#RRGGBB) is common in CSS and design handoffs. RGB expresses red, green, and blue channels for screens. HSL describes hue, saturation, and lightness, handy when you want to lighten or darken a brand color without shifting its tone.
Save palette swatches in the tool for quick reuse across pages. Pair with image tools when you need to compress or resize assets that use the same brand colors.
They describe the same color in different notation. HEX is compact for CSS (#336699). RGB uses decimal channels (rgb(51, 102, 153)) that some design apps prefer.
HSL makes it easier to adjust lightness or saturation while keeping the same hue, useful for building accessible tints and shades from one brand color.
Recent picks can stay in your browser palette during the session. Copy important codes to your project notes if you need them long term.
This page focuses on manual picking and format conversion. Use image editing tools on the site when you need to sample colors from a specific photo file.