Color Picker
Pick any colour and instantly get HEX, RGB, HSL, and CMYK codes — with palette generation and contrast checking.
What is Color Picker?
A colour picker is an essential tool for designers, developers, and anyone working with digital or print media. When working on a website, brand identity, or digital design, you regularly need to identify exact colour values — from a brand colour in a logo, from a photograph, from a competitor's website, or from a design brief that specifies a colour in one format when you need it in another. Colours are expressed in multiple formats for different contexts: HEX (#FF5733) for web CSS and HTML, RGB (255, 87, 51) for screen design and programming, HSL (11°, 100%, 60%) for intuitive colour adjustments in CSS, and CMYK (0%, 66%, 80%, 0%) for print design. Converting between these formats manually requires complex formulas. This tool provides a full-featured colour picker with instant conversion between all formats, colour harmony palette generation, and WCAG accessibility contrast ratio checking.
How to Use Color Picker
- 1
Select a Colour
Use the visual colour picker canvas, enter a HEX/RGB/HSL value directly, or use the eyedropper tool to pick a colour from anywhere on your screen (supported in Chrome/Edge).
- 2
Get All Colour Codes
Instantly see the selected colour in HEX, RGB, HSL, HSV, and CMYK formats — click any format to copy it to your clipboard.
- 3
Generate Palettes
Generate harmonious colour palettes from your selected colour: complementary, analogous, triadic, tetradic, and monochromatic — with HEX codes for each colour.
Use Cases
Web Development
Developers use colour pickers to translate design mockups (which show colours visually) into CSS values. When a designer hands over a mockup with a specific shade of blue, the colour picker identifies the exact HEX or RGB value for CSS, and the contrast checker verifies the text colour on that background meets accessibility requirements before shipping.
Brand Colour Matching
When working with brand guidelines, you often need a colour in multiple formats: the brand book says Pantone 485 C, the web designer needs HEX, the print designer needs CMYK, and the motion designer needs RGB. The colour picker converts between all these formats from a single reference point.
Accessibility Auditing
The WCAG contrast checker is essential for accessibility compliance. WCAG 2.1 AA requires a 4.5:1 contrast ratio for normal text and 3:1 for large text. Many designers choose colour combinations that look attractive but fail accessibility standards — the contrast checker flags these issues during design rather than after development.
Features
Multi-Format Output
Converts any colour to HEX, RGB, RGBA, HSL, HSLA, HSV, and CMYK simultaneously — covering all formats used in web development, design tools, and print production.
Colour Harmony Palettes
Generates complementary, analogous, split-complementary, triadic, and tetradic colour palettes based on colour theory — giving you a harmonious colour scheme from a single starting colour.
WCAG Contrast Checker
Tests any two colours for WCAG 2.1 accessibility compliance — shows the contrast ratio and whether the pair passes AA (4.5:1) and AAA (7:1) standards for normal text, large text, and UI components.
Colour History
Saves a history of recently used colours for quick reference — useful when working on a project that uses a specific colour palette and needing to re-select colours without re-entering values.
Frequently Asked Questions
HEX is a six-character hexadecimal code (#RRGGBB) where each pair represents the red, green, and blue channel (0–255) in base 16. #FF0000 is pure red. RGB uses the same three channels but in decimal: rgb(255, 0, 0) is pure red. Both describe colour by mixing red, green, and blue light. HSL describes colour differently: Hue (0–360°, the colour angle on the colour wheel), Saturation (0–100%, how vivid vs grey), and Lightness (0–100%, dark to light). HSL is more intuitive for making colour adjustments — increasing lightness makes any colour lighter without changing its hue.
WCAG (Web Content Accessibility Guidelines) defines minimum contrast ratios between text and background colours to ensure readability for users with low vision or colour blindness. The contrast ratio is calculated from the relative luminance of the two colours. AA level (the standard for most web content) requires 4.5:1 for normal text and 3:1 for large text (18pt+ or 14pt+ bold). AAA level (enhanced accessibility) requires 7:1. Failing contrast is one of the most common accessibility issues — approximately 1 in 12 men and 1 in 200 women have some form of colour vision deficiency, making contrast compliance a significant real-world concern.
Complementary colours sit opposite each other on the colour wheel — they create maximum contrast and visual tension when placed together. Red and green, blue and orange, yellow and purple are complementary pairs. In design, complementary colours are used to create high-impact accents: a predominantly blue design with orange call-to-action buttons uses complementary contrast to make CTAs stand out. Analogous colours (adjacent on the wheel) create harmonious, calm palettes. Triadic colours (three equally spaced on the wheel) create vibrant, balanced palettes.
In Chrome or Edge, open Developer Tools (F12), click the colour swatch in any CSS rule to open the built-in colour picker. For colours in images, use the browser's eyedropper tool or a dedicated screen colour picker. On Windows, the PowerToys Color Picker utility (free from Microsoft) lets you pick any colour from anywhere on screen. On Mac, the Digital Color Meter app (built into macOS) does the same. This tool's eyedropper feature uses the browser's EyeDropper API (Chrome/Edge only) to pick colours from any element on screen.
Need a Professional Website?
JAIDOO EMPIRE builds fast, SEO-optimised websites for businesses worldwide. All free tools are built and maintained by our team.
Start Your Project
