HEX colors like #FF5733 are the most common format in web development. Each pair of hex digits represents red, green, and blue intensity from 00 (none) to FF (maximum). RGB expresses the same thing in decimal: rgb(255, 87, 51).
HSL (Hue, Saturation, Lightness) is more intuitive for designers. Hue is the color angle on the wheel (0°=red, 120°=green, 240°=blue), saturation is intensity (0%=gray, 100%=vivid), and lightness is brightness (0%=black, 50%=pure color, 100%=white). HSL makes it easy to create tints, shades, and color harmonies.
Color harmonies are mathematically related colors that look good together. Complementary colors sit opposite on the wheel (180° apart), analogous colors are neighbors (30° apart), and triadic colors form an equilateral triangle (120° apart). This tool generates these palettes automatically from any color you pick.
This tool in other languages:
Français:
Sélecteur de couleurs
Español:
Selector de color
Deutsch:
Farbwähler
Português:
Seletor de cores
日本語:
カラーピッカー
中文:
颜色选择器
한국어:
색상 선택기
العربية:
منتقي الألوان
Click or drag on the color picker to choose a color. The HEX, RGB, and HSL values update live. Click any value to copy it. The tool also generates a matching palette (complementary, analogous, shades) for the chosen color.
HEX (#FF5733) is compact and universal in web design. RGB (rgb(255,87,51)) gives you each channel as a decimal 0-255. HSL (hsl(11,100%,60%)) uses hue, saturation, and lightness — more intuitive for tweaking shades and creating palettes. All three represent the same color.
Pick your base color, and the tool automatically generates a complementary palette (opposite on the color wheel), analogous palette (adjacent colors), and shades (lighter and darker variants). Click any swatch to copy its value.
Complementary: two colors opposite on the wheel (red + green) — high contrast, use sparingly. Analogous: three neighboring colors (red + orange + yellow) — harmonious, great for backgrounds. Triadic: three colors evenly spaced (red + yellow + blue) — vibrant but balanced. Each serves different design goals.
Use the Contrast Checker to verify your foreground and background colors meet WCAG contrast ratios. A color palette looks great in isolation but might fail accessibility when used for text.