Color Picker & Converter
Pick any color and instantly convert between HEX, RGB, HSL, HSV, and CMYK. Generate harmonies, tints, shades, and check WCAG contrast — all 100% in your browser.
Pick a Color
Click the swatch to open the color picker, or enter values manually below. Click any format value to copy it.
Manual Input
Type values directly — all fields sync bidirectionally in real time.
Color Harmonies
Explore harmonious color combinations based on color theory. Click a swatch to use that color.
Tints & Shades
10 lighter tints (mixed with white) and 10 darker shades (mixed with black). Click any swatch to copy its HEX value.
Contrast Checker
Check WCAG 2.1 contrast ratio between a text color and background color. Minimum 4.5:1 for AA normal text, 3:1 for AA large text, 7:1 for AAA normal text.
About Color Theory and Web Colors
Color is a fundamental element of design that influences perception, readability, and emotion. In digital design, colors are represented using mathematical models called color spaces. Each color space has different strengths depending on the context — screen display, print production, or perceptual uniformity.
Color Spaces Explained
- HEX — A six-digit hexadecimal notation (e.g.,
#6366F1) widely used in CSS and HTML. Each pair of digits represents red, green, and blue channels (0-255 mapped to 00-FF). - RGB — Red, Green, Blue — the additive color model used by all digital screens. Values range from 0 to 255 per channel, producing over 16.7 million possible colors.
- HSL — Hue, Saturation, Lightness — a cylindrical model that is more intuitive for humans. Hue is a degree on the color wheel (0-360), saturation and lightness are percentages.
- HSV/HSB — Hue, Saturation, Value (Brightness) — similar to HSL but models brightness differently. Popular in graphics editors like Photoshop and Figma.
- CMYK — Cyan, Magenta, Yellow, Key (Black) — the subtractive color model used in print. Converting from RGB to CMYK is an approximation since they represent fundamentally different color gamuts.
Color Harmonies
Color harmonies are combinations of colors that are visually pleasing based on their positions on the color wheel. The main harmony types are:
- Complementary — Two colors opposite each other on the wheel (180 degrees apart). Creates high contrast and visual tension.
- Triadic — Three colors equally spaced at 120 degrees. Offers vibrant contrast while maintaining balance.
- Analogous — Three colors adjacent on the wheel (typically 30 degrees apart). Creates serene, comfortable palettes found often in nature.
- Split-Complementary — A base color plus the two colors adjacent to its complement. Provides contrast without the intensity of a direct complementary pair.
Accessibility and WCAG Contrast
The Web Content Accessibility Guidelines (WCAG) 2.1 define minimum contrast ratios to ensure text is readable by people with visual impairments. The contrast ratio is calculated using the relative luminance of the foreground and background colors, ranging from 1:1 (no contrast) to 21:1 (black on white).
- WCAG AA Normal Text requires a minimum contrast ratio of
4.5:1. - WCAG AA Large Text (18pt or 14pt bold) requires
3:1. - WCAG AAA Normal Text requires
7:1. - WCAG AAA Large Text requires
4.5:1.
Ensuring sufficient color contrast is not just a legal requirement in many jurisdictions — it improves readability for all users, including those in bright sunlight or on low-quality displays.
Tints and Shades
A tint is created by mixing a color with white, making it lighter. A shade is created by mixing with black, making it darker. Together they form a monochromatic palette — a single hue at different brightness levels — which is useful for creating depth, hierarchy, and visual consistency in user interfaces.