Free tool / Color
Color picker &
palette builder
Use this free HEX color picker to find HTML color codes, convert RGB and HSL values, and build a palette. Click the base color to open the color selector, then check contrast before using it on your website.
#d4ff00
- HEX
#D4FF00 - RGB
rgb(212, 255, 0) - HSL
hsl(70, 100%, 50%)
Saved colors
Nothing saved yet. Saved colors stay in this browser only.
Opposite on the color wheel. High tension, good for a single call to action. Select a swatch to make it the base.
WCAG contrast check
Large headline
Body copy at regular size. This is how your base color reads as text on the chosen background.
RATIO
1.11:1
- AA normal text (4.5:1)Fail
- AA large text (3:1)Fail
- AAA normal text (7:1)Fail
- AAA large text (4.5:1)Fail
Large text means 24px regular or 18.66px bold and up. Ratios use the WCAG 2.x relative luminance formula.
Website palette
Pull colors from a live site
Find color values in a public page's inline styles and linked same-site stylesheets, including CSS imports. Colors loaded only by scripts, images or external-domain stylesheets may not appear. Some sites block automated requests.
How to use the HEX color picker
Click anywhere on the base-color swatch to open your browser's color selector. Choose a shade, or paste a HEX, RGB or HSL value and apply it. The color code finder shows all three formats so you can copy the value your design tool or website needs.
HTML color picker for websites
HTML and CSS use color codes to style text, backgrounds, borders and buttons. For example, the HEX code #FF0000, RGB value rgb(255, 0, 0) and HSL value hsl(0, 100%, 50%) all describe red. Use the copy buttons to take a value into your stylesheet.
Find a color and build a palette
Use the color finder to explore complementary, analogous, triadic and other palette combinations. Save useful swatches in this browser or share a link to your selected color. Website import finds color values in a public page's inline styles and linked same-site stylesheets, but it does not extract image colors or execute JavaScript.
Check text and background contrast
A color that looks good alone may be difficult to read on a button or background. Compare your selected color against a background using the built-in WCAG contrast checker. Aim for at least 4.5:1 for normal text or 3:1 for large text to meet WCAG AA contrast requirements.
Frequently asked questions
Color picker FAQ
What is a HEX code picker?
A HEX code picker lets you select a color and read its hexadecimal code. A six-digit HEX value uses two digits each for red, green and blue. For example, #000000 is black and #FFFFFF is white. This HEX picker also converts your selection to RGB and HSL.
Is a colorpicker the same as a color selector?
Yes. Colorpicker, color picker and color selector are common names for a tool that lets you choose a color visually. A HEX code color picker also gives you a code you can reuse in HTML, CSS or a design application.
How do I use this HTML color picker?
Click anywhere on the base-color swatch to open the native color selector. Choose a shade, or paste a HEX, RGB or HSL value and select Apply. Copy the format you need to use it in your website's CSS, email template or design application.
How do I convert HEX to RGB or HSL?
Paste a color code, such as #FF0000, into the color input and select Apply. The tool displays its HEX, RGB and HSL equivalents together. For red, these are #FF0000, rgb(255, 0, 0) and hsl(0, 100%, 50%). Copy any of the three values.
Can I pick a color from my screen or an image?
Click the base color to open the native picker. Some browsers and operating systems include an eyedropper that can sample your screen, including an image you have open. If yours does not, paste a known color code. This tool does not upload or analyze images.
Can the color finder extract a website's complete palette?
Website palette import finds color values in a public page's inline styles and up to six linked same-site stylesheets, including CSS imports. Stylesheets can be up to 1 MB each. It may miss colors in images, external-domain stylesheets or JavaScript-only styles. Treat the result as a starting point rather than a complete brand palette.
What color contrast ratio should I use for website text?
For WCAG 2.x AA text contrast, aim for at least 4.5:1 for normal text and 3:1 for large text. Large text means at least 24 CSS pixels in regular weight or about 18.66 CSS pixels in bold. Passing a text contrast check alone does not establish that an entire website is accessible.
Is this online color picker free, and can I save or share colors?
Yes. You can pick colors, generate palettes and check contrast without an account. Saved swatches stay in this browser when local storage is available and do not sync between devices. Sharing a color-picker link includes the selected base color, but not your saved swatch collection.
Colors are set. Now make them convert.
We design and test landing pages and ad creative that hold up on every screen.