Working with color is an essential part of web design and development. Understanding color formats helps you set shades correctly in CSS, support accessibility, and build consistent palettes. An online color picker makes it easier to choose colors and convert between formats.
Color formats: HEX, RGB, HSL, HSV
Web development uses several ways to specify a color. Each has its own advantages.
HEX
Hexadecimal notation is the most common format in CSS:
color: #FF5733; /* полная запись */
color: #F53; /* сокращённая (если пары совпадают) */
color: #FF5733CC; /* с прозрачностью (альфа-канал) */Format: #RRGGBB, where each pair is a channel value from 00 (0) to FF (255).
RGB
An explicit notation for the three channels—red, green, and blue:
color: rgb(255, 87, 51);
color: rgba(255, 87, 51, 0.8); /* с прозрачностью */Each channel is an integer from 0 to 255. This format is useful when you need to control channels programmatically.
HSL
The Hue–Saturation–Lightness color model:
color: hsl(14, 100%, 60%);
color: hsla(14, 100%, 60%, 0.8); /* с прозрачностью */- H (Hue) — hue, an angle on the color wheel from 0° to 360°
- S (Saturation) — saturation: 0% is gray, 100% is a pure color
- L (Lightness) — lightness: 0% is black, 50% is medium, 100% is white
HSL is intuitive: to make a color darker, decrease L.
HSV (HSB)
Similar to HSL, but uses Value/Brightness instead of Lightness:
| Parameter | HSL | HSV |
|---|---|---|
| H = 0, S = 100%, L/V = 50% | Red | Red |
| H = 0, S = 100%, L/V = 100% | White | Pure red |
| H = 0, S = 0%, L/V = 50% | Gray | Gray |
HSV is more commonly used in image editors (Photoshop, Figma), while HSL is used in CSS.
Converting between formats
The color picker lets you enter a value in any format and automatically get the others. For example, #FF5733 is equivalent to:
- RGB:
rgb(255, 87, 51) - HSL:
hsl(14, 100%, 60%) - HSV:
hsv(14, 80%, 100%)
For programmatic color conversion, use the color converter.
WCAG contrast and accessibility
WCAG 2.1 requires a minimum contrast ratio for text against its background:
| Level | Normal text | Large text (18pt+) |
|---|---|---|
| AA | 4.5:1 | 3:1 |
| AAA | 7:1 | 4.5:1 |
Contrast check examples:
- Black
#000000on white#FFFFFF→ 21:1 — excellent contrast - Gray
#767676on white → 4.54:1 — meets AA - Light gray
#AAAAAAon white → 2.32:1 — does not meet any level
When choosing colors for an interface, always check contrast using the contrast checker. This is especially important for users with visual impairments.
Creating color palettes
Harmonious palettes follow the rules of the color wheel:
Complementary — two colors opposite each other (180°). Creates high contrast.
Analogous — three neighboring colors (±30°). Creates a soft, unified impression.
Triadic — three evenly spaced colors (120°). Provides vibrancy while maintaining balance.
Split-complementary — a base color plus two colors adjacent to its complement. Creates less aggressive contrast.
To automatically generate palettes from a base color, use the gradient generator.
Modern CSS color functions
CSS Color Level 4 adds color-mix() for mixing colors, oklch() for specifying shades with perceptual uniformity, and relative color syntax. These features are supported in Chrome 111+, Firefox 113+, and Safari 16.4+.
The tool on reChecker
The reChecker color picker lets you choose any color from a visual palette and instantly get its value in HEX, RGB, and HSL formats. Copy the format you need with one click.