Color Picker

1. 01Pick a color or paste a HEX codeUse the color picker, or type a HEX code like #3B82F6. Short codes like #0F0 work too.
2. 02Get HEX, RGB, and HSLThe code is instantly translated into every format, alongside a suggested palette and a contrast check.
3. 03Copy and use itClick any value to copy it, then use it in your website, design, or presentation.

• Website design and CSSCopy a HEX value or a CSS variable straight into your code or stylesheet.
• Branding and graphic designPick consistent brand colors and copy them into Canva, a presentation, or other design tools.
• Checking text contrastCheck whether light or dark text reads better on the background color you picked, to keep it easy to read.

• #3B82F6 (blue)A comfortable blue for buttons and links. Translates to rgb(59, 130, 246).
• #22C55E (green)A green suited to success or confirmation states. You also get the HSL value for finer adjustments.
• #F97316 (orange)An energetic orange for a call-to-action button. Can be used as the base for a lighter and darker palette.

• Check the contrastIt is worth checking the contrast between your text color and background, so the text stays easy to read.
• Keep brand colors consistentFor a brand, it is best to settle on 2-4 fixed colors and avoid changing them frequently.
• Screens can render color differentlyA color that looks great on one screen can look slightly different on another. It is worth checking on a few devices.

HEX is a six-digit code (like #3B82F6) commonly used on websites and in CSS. RGB describes a color by its red, green, and blue intensity. HSL describes it by hue, saturation, and lightness, which is especially convenient when lightening, darkening, or finding a complementary color. This tool converts between all three automatically.

All conversion happens in your browser using standard color-conversion formulas, with no server calls and no data saved. The palette is derived from the color you picked, and the contrast check uses the WCAG relative luminance calculation, checked against pure white and pure black — for checking contrast between two colors of your choosing, see the color contrast checker.

What is a color picker?

A tool that lets you choose a color and get its code in HEX, RGB, and HSL, along with a suggested palette and a contrast check.

What is the difference between HEX, RGB, and HSL?

HEX is a code commonly used on websites. RGB describes a color by red, green, and blue intensity. HSL describes it by hue, saturation, and lightness, which is convenient for lightening or darkening a color. All three represent the same color.

How do I copy a color code?

Click whichever value you want (HEX, RGB, HSL, or the CSS variable), and it is copied to your clipboard with a "Copied" confirmation.

Can I use these colors directly in CSS?

Yes. You can copy the HEX value or a ready-to-use CSS variable (like --color: #3B82F6;) and paste it straight into your code.

Is the color I pick saved anywhere?

No. Everything is calculated in your browser only, with no data saved. Refreshing the page resets your selection.

Why does a color look different on different screens?

Different screens render colors slightly differently due to calibration, brightness, and display technology. The code is identical, but the appearance can vary.