Color Picker & Converter
Pick, convert, and explore colours with HEX, RGB, HSL, HSV, CMYK — palettes, contrast checker, and CSS code
Pick a Colour
Colour Values
Edit any value — all formats update in real time
Colour Harmonies
Mathematically related colours that work well together
Tints & Shades
Lighter tints (mixed with white) and darker shades (mixed with black)
Tints (Lighter)
Shades (Darker)
Contrast Checker (WCAG)
Check text readability against WCAG 2.1 accessibility standards
Colour Blindness Simulator
See how your colour appears to people with different types of colour vision deficiency
CSS Code
Ready-to-use CSS code for your projects
Gradient Generator
Create beautiful gradients using your selected colour
Colour Name
Frequently Asked Questions
What is HEX colour code?
HEX is a 6-digit hexadecimal code representing Red, Green, and Blue values. Each pair (00-FF) represents a channel intensity from 0-255. For example, #FF0000 is pure red, #00FF00 is green, #0000FF is blue.
What is the difference between RGB and HSL?
RGB defines colour by mixing Red, Green, and Blue light (0-255 each). HSL defines colour by Hue (0-360°), Saturation (0-100%), and Lightness (0-100%). HSL is more intuitive for humans — you can easily make a colour lighter or more vivid.
What is WCAG contrast ratio?
WCAG (Web Content Accessibility Guidelines) defines minimum contrast ratios for text readability. AA requires 4.5:1 for normal text and 3:1 for large text. AAA requires 7:1 for normal text and 4.5:1 for large text.
What are colour harmonies?
Colour harmonies are combinations of colours based on their position on the colour wheel. Complementary colours are opposite, analogous are adjacent, triadic are evenly spaced at 120°, etc. They create visually pleasing palettes.
What is CMYK used for?
CMYK (Cyan, Magenta, Yellow, Key/Black) is used in print. Unlike RGB which adds light, CMYK subtracts light from white paper. Always convert to CMYK before sending designs to print.
Colour Info
Saved Colours
Click the heart to save colours
Popular Colours
Tailwind CSS Palette
History
Recent colours will appear here