Color Picker
Pick colours and instantly get HEX, RGB, HSL, and OKLCH values.
WCAG Contrast
How the Color Picker Works
Click the colour swatch to open your browser's native colour picker. As you choose a colour, all five format outputs — HEX, RGB, HSL, HSV, and CMYK — update instantly. Use the alpha slider to add transparency. Click Generate Palette to create five harmony sets, or use the Eyedropper to sample any colour on screen (Chrome and Edge only). Every colour you pick is saved in Recent Colors for quick access.
Frequently Asked Questions
+What is a HEX color code?
A HEX color code is a six-digit hexadecimal number (e.g. #3B82F6) that represents a color in the RGB model. Each pair of digits represents the red, green, and blue channels (0–255). HEX codes are widely used in web design, CSS, and graphic design software.
+How do I convert HEX to RGB?
Split the HEX code into three pairs and convert each from base-16 to base-10. For example, #3B82F6 → R=0x3B=59, G=0x82=130, B=0xF6=246. This tool converts HEX to RGB automatically as you pick any color.
+What is the difference between HSL and HSV?
Both use Hue (the color angle 0–360°), Saturation (color intensity), and a third component. HSL uses Lightness (0% = black, 50% = full color, 100% = white), while HSV uses Value/Brightness (0% = black, 100% = full brightness). HSL is more intuitive for lightening or darkening a color; HSV matches many professional color-picker UIs.
+What is CMYK and when is it used?
CMYK stands for Cyan, Magenta, Yellow, and Key (Black). It is a subtractive color model used in color printing. Designers converting from screen (RGB) to print (CMYK) need to be aware that some vivid RGB colors cannot be accurately reproduced in CMYK.
+What is WCAG contrast ratio?
The Web Content Accessibility Guidelines (WCAG) define minimum contrast ratios for text legibility. AA level requires 4.5:1 for normal text and 3:1 for large text. AAA (enhanced) requires 7:1 for normal text. This tool shows your color's contrast against white and black so you can meet accessibility standards.
+What is the EyeDropper tool?
The EyeDropper lets you sample any color visible on your screen — from images, web pages, or other apps — and import it directly into the picker. It uses the browser's native EyeDropper API, supported in Chrome and Edge. Safari and Firefox do not yet support this feature.
+What are color harmonies (complementary, triadic, etc.)?
Color harmonies are sets of colors that look visually balanced together, based on their positions on the color wheel. Complementary colors are opposite each other (high contrast). Analogous colors are adjacent (cohesive). Triadic colors form an equilateral triangle (vibrant balance). This tool generates all five major harmony types from your chosen color.