Developer · Color Picker
Color Picker
& Converter
Pick any color, convert between HEX, RGB, HSL, and CMYK, generate palettes, and check WCAG accessibility contrast ratios — all in one place.
#3B82F6
Cornflower Blue
Pick a Color
Color Values
HEX#3B82F6Copy
RGBrgb(59,130,246)Copy
HSLhsl(217,91%,60%)Copy
CMYKcmyk(76,47,0,4)Copy
CSScolor(srgb …)Copy
Color Palettes
Complementary
Triadic
Analogous
Split-Comp
Shades
Tints
WCAG Contrast Checker
Background color — click to change
Aa
Normal text sample
0:1
Aa
Normal text sample
0:1
WCAG AA requires 4.5:1 for normal text, 3:1 for large text. AAA requires 7:1 and 4.5:1.
Color Harmony Info
Perceived Brightness—
Is Dark Color?—
Nearest Web Safe—
Complementary—
HEX Color Codes
HEX codes are 6-digit hexadecimal representations: #RRGGBB. Each pair (00–FF) represents Red, Green, and Blue intensity. #000000 is black, #FFFFFF is white. Short form: #RGB expands to #RRGGBB (so #36f = #3366ff).
WCAG Contrast Ratios
Web Content Accessibility Guidelines require minimum contrast for readability. AA standard: 4.5:1 for body text, 3:1 for large text (18pt+ or 14pt+ bold). AAA: 7:1 and 4.5:1. Always test your color choices for accessibility.
HSL vs RGB
RGB defines colors by their red/green/blue component intensities — intuitive for screens. HSL (Hue, Saturation, Lightness) is more intuitive for humans: spin the hue to change color, adjust saturation for vibrancy, lightness for dark/light variants.
Color Harmony
Complementary colors (180° apart) create maximum contrast. Triadic (120° apart) are vibrant and balanced. Analogous (30° apart) are harmonious and calming. Split-complementary offers contrast with more variety than pure complementary.
Frequently Asked Questions
How do I convert HEX to RGB? ▾
Split the HEX code into three pairs and convert each from base-16 to decimal. #3B82F6 → 3B=59, 82=130, F6=246 → rgb(59, 130, 246). This tool does it instantly — paste any HEX code into the input above.
What is WCAG contrast and why does it matter? ▾
The Web Content Accessibility Guidelines define minimum contrast ratios so text is readable for people with visual impairments, including color blindness. Poor contrast is one of the most common accessibility failures. Meeting AA standard (4.5:1) is required in many jurisdictions under accessibility law.
How do I choose accessible brand colors? ▾
Pick your brand color, then test it against white and black backgrounds. If neither passes AA, slightly darken (for lighter colors) or lighten (for darker colors) until you achieve 4.5:1. Avoid pairing similar hues — e.g. red text on a red background fails even when the colors look distinct to some people.
Advertisement
Frequently Asked Questions
What is the difference between HEX, RGB, and HSL? ▾
HEX is a six-character code used in HTML and CSS (e.g. #3b82f6). RGB defines a colour by its Red, Green, and Blue components from 0–255. HSL defines colour by Hue (0–360° around the colour wheel), Saturation (0–100% intensity), and Lightness (0–100% brightness). For design work, HSL is often the most intuitive — you can darken a colour by reducing lightness without changing the hue.
How do I check if two colours have enough contrast? ▾
The WCAG accessibility standard requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text. This tool calculates the contrast ratio between your selected colour and black or white automatically. For accessible web design, always check your text colour against its background before publishing.
What is a complementary colour? ▾
Complementary colours sit directly opposite each other on the colour wheel — e.g. blue and orange, red and green. They create high contrast and visual tension, making them useful for call-to-action buttons. Analogous colours sit next to each other on the wheel and create harmony. This tool shows your colour's complement and analogous neighbours automatically.
How do I find the colour of something on my screen? ▾
Use your operating system's built-in colour picker: on Mac, open Digital Color Meter. On Windows, open the Snipping Tool or use PowerToys' Colour Picker (Win+Shift+C). For web pages, right-click → Inspect → click any colour swatch in DevTools. On mobile, screenshot then open in a photo editor to sample the pixel colour.
What does the alpha / opacity channel do? ▾
Alpha controls transparency from 0 (fully transparent) to 1 (fully opaque). In CSS you express this as rgba(59, 130, 246, 0.5) or hsla(217, 91%, 60%, 0.5) or as an 8-character HEX code where the last two characters are the alpha (e.g. #3b82f680). Partial transparency is useful for overlays, shadows, and glass-morphism effects.
How to Use the Colour Picker & Converter
Pick colours, convert between formats, and generate harmonious colour palettes instantly.
01
Pick a colour
Click anywhere in the colour picker canvas to select a hue, or drag the vertical slider to change the colour family. The preview updates in real time.
02
Enter a known value
Already have a HEX code? Paste it in. Have an RGB value? Enter it directly. The tool converts all formats simultaneously.
03
Copy any format
Each format (HEX, RGB, HSL, RGBA) has a copy button. Click to copy the exact format your CSS or design tool requires.
04
Generate a colour palette
Use the harmony buttons (complementary, analogous, triadic, split-complementary) to generate colour schemes based on your chosen colour. All palette colours are individually copyable.
05
Check contrast ratio
Paste a background and foreground colour to see the WCAG contrast ratio. 4.5:1 is the minimum for readable body text.
💡 HEX is best for static colours in CSS. Use RGBA (with alpha channel) when you need transparency. HSL is easiest to mentally adjust — increase/decrease the L (lightness) value to lighten or darken.