CSS Color Picker
Pick a colour and copy ready-to-paste CSS — HEX, rgb() and hsl() — plus HSV and CMYK. Adjust opacity for rgba() too.
A colour picker lets you choose any colour and read its codes — HEX, RGB, HSL, HSV and CMYK. Drag on the palette below, sample a pixel from your screen, or hit random — then copy any format in one click.
Our color tools run on our own catalogue of 26,000+ real paint colors across 16 brands — Benjamin Moore, Sherwin-Williams, Behr, Dulux, RAL and more — with the color math (HSL and CIELAB matching) computed in-house, not scraped from summaries. Every color you pick maps to a real, buyable paint with its code, so what you see here you can actually take to the store. We review and update these tools and their data regularly.
Created by Denis Kataev, founder of DSGN.HOUSE — a software engineer and digital entrepreneur building professional color-design tools for everyone.
How do I get the CSS for a colour?+
Pick a colour above and copy any format — HEX, rgb(), hsl() — straight into your CSS. Adjust the opacity slider for an rgba() value with transparency.
Can I pick a colour from my screen?+
Yes — use the eyedropper button to sample any pixel on screen (supported in Chrome and Edge). You can also pick from a photo with the image colour picker.
How do I copy a colour code?+
Pick a colour on the palette, then click any format below — HEX, RGB, HSL, HSV or CMYK — to copy it to your clipboard.
Does the picker show matching paint?+
Yes — under the codes it shows the nearest real paint across 16 brands (Benjamin Moore, Sherwin-Williams, Behr, Dulux and more) with its code, so you can buy the colour.