Color Picker Online Free
Pick a colour and instantly get its HEX, RGB, and HSL values. Generate harmonious palettes and check WCAG contrast ratios for accessibility — all in your browser.
Colour Palette Generator
5 hues side-by-side on the colour wheel — harmonious and calm.
Contrast Checker
Verify text-to-background contrast for WCAG 2.1 accessibility compliance.
Large Text (18 pt / Bold 14 pt)
Normal text — The quick brown fox jumps over the lazy dog. 0123456789
How to Use the Colour Picker
- 1Click the colour swatch to open your browser's native colour picker. Choose any colour visually, or type a known HEX, RGB, or HSL value directly into the inputs — all three stay in sync.
- 2Use the Copy buttons next to each format to copy the value to your clipboard and paste it straight into your CSS, design tool, or code editor.
- 3Scroll to Colour Palette Generator and select a harmony type — Analogous, Complementary, Triadic, Split-Complementary, Tetradic, or Monochromatic. The palette updates instantly from your base colour.
- 4Click any palette swatch to copy its HEX value. The base colour is highlighted with a ring so you can always identify it in the palette.
- 5Open the Contrast Checker, set a text colour and background colour, and read the WCAG 2.1 pass/fail results for AA and AAA at both normal and large text sizes.
Understanding Colour Models
Designers and developers work with three main colour models. HEX encodes red, green, and blue channels as a six-character base-16 string — fast to type and universally supported in HTML and CSS. RGB expresses the same channels as integers 0–255, which maps directly to how screens mix light. HSL (Hue, Saturation, Lightness) is the most human-readable model: spin the hue dial to change colour family, reduce saturation to grey, and adjust lightness from black to white.
When making a colour darker or lighter in code, HSL is far more intuitive than adjusting all three RGB channels manually. When sharing colours with clients or developers, HEX is the safest format because every design tool and browser understands it.
Colour Harmony Types — When to Use Each
Analogous
Adjacent hues create a calm, natural feel. Ideal for nature brands, wellness apps, and editorial layouts where cohesion matters more than contrast.
Complementary
Two opposite hues at maximum contrast. Best for call-to-action buttons, product highlights, and sports branding where impact is the goal.
Triadic
Three evenly-spaced hues — vibrant and balanced. Great for playful brands, children's products, and colourful illustration work.
Split-Complementary
Softer than complementary — the two accent hues sit adjacent to the complement, reducing visual tension while keeping a lively contrast.
Tetradic (Square)
Four hues forming a rectangle or square on the wheel. Rich colour variety, but requires careful balance — one hue should dominate.
Monochromatic
Single hue at varying lightness levels. The cleanest, most professional scheme — widely used in SaaS dashboards, fintech, and minimalist design.
Practical Uses for This Tool
Web Design
Extract HEX values for CSS variables, verify contrast for accessible text, and build a complete colour system from a single brand colour.
UI / Product Design
Generate tints and shades with the monochromatic palette for button states, card backgrounds, and hover effects that feel systematically designed.
Branding & Logos
Start from a brand's primary colour and generate complementary accent colours for marketing materials, social assets, and style guides.
Accessibility Auditing
Paste your existing text and background colours into the contrast checker to quickly identify WCAG AA/AAA failures before publishing.
Frequently Asked Questions
What is the difference between HEX, RGB, and HSL?
HEX is a 6-character hexadecimal code (e.g. #3b82f6) used in HTML and CSS. RGB expresses the red, green, and blue light channels as integers 0–255. HSL describes the colour as Hue (0–360°), Saturation (0–100%), and Lightness (0–100%). All three describe the same colour — choosing a format depends on your workflow: HEX is most common in code, HSL is the easiest for humans to reason about when adjusting colours.
What is WCAG contrast ratio and why does it matter?
The Web Content Accessibility Guidelines (WCAG) define minimum contrast ratios between text and its background so that people with low vision or colour blindness can read content. Level AA requires at least 4.5:1 for normal text and 3:1 for large text (18pt or bold 14pt). Level AAA requires 7:1 and 4.5:1 respectively. Meeting at least AA is a legal requirement for many public-sector and e-commerce websites.
What is an analogous colour palette?
Analogous palettes use colours that sit next to each other on the colour wheel (±30° and ±60° from your base hue). They are naturally harmonious because the colours share a common hue family. Analogous schemes are common in nature and work well for calm, cohesive designs like landing pages, dashboards, and illustrations.
When should I use a complementary vs. triadic palette?
Complementary palettes pair your base colour with the colour directly opposite on the wheel (180° away), creating maximum contrast — ideal for call-to-action buttons or bold branding. Triadic palettes use three colours evenly spaced 120° apart, which gives a vibrant, balanced feel while maintaining more variety than complementary. Use complementary for high contrast and focus; triadic for energetic, multi-element designs.
Can I use this tool to find colours from an image?
This tool generates and converts colours you pick or type manually. To extract colours from an image (an eye-dropper), use your browser's built-in eye-dropper (available in Chrome/Edge via the Colour Picker DevTools panel), the CSS Eye-dropper API in supporting browsers, or a dedicated tool like Adobe Color or Coolors.co. The palette generator here then helps you build a scheme once you have your base colour.
What is a monochromatic palette?
A monochromatic palette keeps the same hue and saturation while varying only the lightness — from dark to light. This produces a cohesive, elegant scheme that is easy to apply consistently across backgrounds, text, and UI components. It is especially popular in minimalist design, documentation sites, and product UIs.
How do I use the copied colour value in CSS?
You can paste any copied format directly into a CSS property. HEX is used as `color: #3b82f6;`, RGB as `color: rgb(59, 130, 246);`, and HSL as `color: hsl(217, 91%, 60%);`. In modern CSS you can also use `oklch()` for perceptually uniform colours, but HEX, RGB, and HSL have universal browser support back to IE 9.
Does the contrast checker work for UI components, not just text?
WCAG 2.1 specifies contrast requirements specifically for text against its background. For non-text UI components (icons, borders, input outlines) the requirement is 3:1 against adjacent colours — this is the same as the AA Large Text threshold. WCAG 3.0 (in development) proposes the APCA model for more nuanced contrast scoring, but AA/AAA from WCAG 2.1 remains the current widely-adopted standard.