Color Picker — HEX, RGB, HSL and More
Our free online color picker lets you visually select any color and instantly get its value in HEX, RGB, HSL, HSV, and CMYK formats. Explore tints and shades, generate color harmonies, check WCAG accessibility contrast ratios, save your palette, and pick colors directly from your screen. Everything runs in your browser with no plugins or signup required.
Color Formats Explained
HEX Colors
HEX (hexadecimal) is the most common color format for web development. A HEX color code uses six hexadecimal characters (0–9 and A–F) to represent the red, green, and blue channels — two characters each. For example, #FF5733 has FF (255) red, 57 (87) green, and 33 (51) blue. An optional two-character alpha suffix (#RRGGBBAA) adds transparency.
RGB Colors
RGB represents colors as three numbers from 0 to 255 for red, green, and blue channels. rgb(255, 87, 51) is the same color as #FF5733. An optional alpha channel uses rgba(R, G, B, A) where A is a decimal from 0 (transparent) to 1 (opaque).
HSL Colors
HSL (Hue, Saturation, Lightness) is a more intuitive format for humans. Hue is a degree on the color wheel (0 and 360 = red, 120 = green, 240 = blue). Saturation controls color intensity (0% is grey, 100% is vivid). Lightness controls brightness (0% is black, 50% is the normal color, 100% is white). HSL is widely used in CSS because it makes color adjustments more predictable.
HSV/HSB Colors
HSV (Hue, Saturation, Value) — also called HSB (Hue, Saturation, Brightness) — is similar to HSL but uses Value/Brightness instead of Lightness. At 100% saturation and 100% value, you get the pure vivid hue. Reducing value darkens the color toward black. This model is used by Photoshop and many design tools because it matches how artists think about color mixing.
CMYK Colors
CMYK (Cyan, Magenta, Yellow, Key/Black) is a subtractive color model used in print design. Unlike RGB which adds light, CMYK subtracts light by adding ink. A design for digital display uses RGB or HEX; the same design prepared for print uses CMYK. Colors can shift when converting between models because RGB has a larger gamut than printable CMYK.
Color Format Comparison
| Format | Example | Used In | Human Readable? |
|---|---|---|---|
| HEX | #FF5733 | CSS, HTML, design tools | Moderately |
| RGB | rgb(255,87,51) | CSS, programming | Somewhat |
| HSL | hsl(11,100%,60%) | CSS, design | Yes — intuitive |
| HSV | hsv(11,80%,100%) | Design tools | Yes — intuitive |
| CMYK | cmyk(0,66,80,0) | Print design | Somewhat |
Color Theory — Understanding Color Harmonies
Color harmonies are combinations of colors that are visually pleasing because of their relationship on the color wheel. Using harmonic color relationships in design creates a sense of order and coherence.
| Harmony | How It Works | Colors | Best For |
|---|---|---|---|
| Complementary | Two colors opposite on the wheel | 2 (180° apart) | High contrast, vibrant designs |
| Analogous | Colors adjacent on the wheel | 3 (30° apart) | Harmonious, natural palettes |
| Triadic | Three equally spaced colors | 3 (120° apart) | Balanced, colorful designs |
| Split Complementary | Base + two neighbors of its complement | 3 | High contrast with less tension |
| Tetradic / Square | Four equally spaced colors | 4 (90° apart) | Rich, complex palettes |
| Monochromatic | Single hue in different lightness/saturation | 5+ | Clean, cohesive, minimal designs |
WCAG Color Contrast — Accessibility Guide
Web Content Accessibility Guidelines (WCAG) define minimum contrast ratios to ensure text is readable for users with low vision or color blindness. Contrast ratio is calculated from the relative luminance of the two colors, ranging from 1:1 (no contrast, same color) to 21:1 (black on white).
| WCAG Level | Text Type | Minimum Ratio | What It Means |
|---|---|---|---|
| AA | Normal text (< 18pt) | 4.5:1 | Minimum for standard compliance |
| AA | Large text (≥ 18pt or 14pt bold) | 3:1 | Easier to read at larger sizes |
| AAA | Normal text | 7:1 | Enhanced accessibility |
| AAA | Large text | 4.5:1 | Enhanced for large text |
| — | UI components, icons | 3:1 | Non-text contrast requirement |
Tints and Shades — When to Use Each
Tints are created by mixing a color with white, making it lighter and less saturated. Shades are created by mixing with black, making it darker and deeper. In UI design, tints are used for backgrounds, hover states, and subtle fills, while shades are used for borders, active states, and high-contrast elements.