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.
Frequently Asked Questions
What color format should I use in CSS?
For modern CSS, HSL is recommended for design systems because it makes color manipulation predictable — changing lightness or saturation is intuitive. HEX is the most common format in existing codebases. RGB and RGBA are useful when you need to programmatically manipulate color values. All four formats are equally supported in all modern browsers.
How do I find the HEX code of a color on my screen?
Use the "Pick from Screen" eyedropper button in this tool (Chrome/Edge only) to click any pixel on your screen and get its HEX code. Alternatively, browser developer tools have a built-in color picker in the CSS inspector.
What is the HEX code for common colors?
Some common web colors: White = #FFFFFF, Black = #000000, Red = #FF0000, Green = #008000, Blue = #0000FF, Yellow = #FFFF00, Orange = #FFA500, Purple = #800080, Pink = #FFC0CB, Gray = #808080.
How do I make a color transparent in CSS?
Use rgba() with an alpha value: rgba(255, 87, 51, 0.5) for 50% transparent. Or use an 8-character HEX code: #FF573380 where the last two characters (80 in hex = 128 in decimal = approximately 50% opacity). You can also use the CSS opacity property on the element itself, but that affects all child elements too.
What is the difference between a tint and a shade?
A tint is a color mixed with white — it becomes lighter. A shade is a color mixed with black — it becomes darker. A tone is a color mixed with grey. In everyday language these terms are often used interchangeably, but in color theory and design they have these specific meanings.