Online color picker: HEX, RGB, HSL and more
A color picker allows choosing colors visually and obtaining their values in different formats. It is a fundamental tool for web designers, frontend developers, and anyone who works with digital color.
Digital color formats
- HEX: #FF5733 — six hexadecimal digits. Most used in CSS.
- RGB: rgb(255, 87, 51) — red, green, and blue values from 0 to 255.
- HSL: hsl(11°, 100%, 60%) — hue, saturation, and lightness. More intuitive.
- RGBA / HSLA: add an alpha channel for transparency (0 opaque, 1 transparent).
- OKLCH: new CSS standard with better perceptual uniformity.
Basic color theory
Complementary colors are opposite on the color wheel (red and green, blue and orange). Analogous colors are adjacent (blue, blue-green, green). Triadic palettes use equidistant colors. For accessible web palettes, contrast between text and background must meet WCAG 2.1 guidelines (minimum 4.5:1 ratio for normal text).
CSS variables for design systems
In modern projects, colors are defined as CSS variables: --color-primary: #6d28d9. This allows changing the entire color palette from one place. Design libraries like Tailwind CSS, Material UI, and Chakra UI follow this approach with color token systems.