Tip: edit any value directly — all other formats update automatically.
Schemes are generated from the current color's hue. Click any swatch to apply it.
Check whether the contrast between foreground and background meets accessibility standards (WCAG 2.1).
The same color can be expressed in several formats, each suited to different tasks. This tool supports live conversion between HEX, RGB, HSL, HSV, and CMYK.
Written as #FF6B6B, using 6 hex digits for the red, green, and blue channels (2 digits each, 00–FF). A 3-digit shorthand like #F00 is also valid. It is the most compact and widely used notation in CSS.
Written as rgb(255, 107, 107), with three values from 0–255 representing the intensity of red, green, and blue light (additive color). CSS supports rgb() and the alpha-aware rgba().
Written as hsl(0, 100%, 71%): hue H is an angle on the color wheel (0 red, 120 green, 240 blue); saturation S and lightness L are percentages. HSL matches how people think about color, making it easy to adjust hue and brightness.
Similar to HSL, but the third component is Value instead of Lightness. HSV is common in image editors (such as the Photoshop color picker); at V=100% you get the purest version of that hue.
Written as cmyk(0%, 58%, 58%, 0%), based on subtractive color and used for printing. All four components are percentages; K (black) deepens shadows and saves ink. Since screens are RGB, CMYK values here are approximate conversions for reference.
Effective palettes are usually built on relationships around the color wheel. This tool generates four classic schemes from the current hue:
In practice, follow the 60-30-10 rule: 60% dominant color, 30% secondary, 10% accent, so the composition has clear hierarchy.
The Web Content Accessibility Guidelines (WCAG) 2.1 measure text-background legibility using a contrast ratio, ranging from 1:1 to 21:1, computed from the relative luminance of weighted RGB channels.
This checker computes the foreground-background ratio automatically and flags each level. UI elements such as buttons, links, and icons should also maintain at least 3:1 contrast against their background.
| Color | Name | HEX | RGB |
|---|
Converting with the Online Color Picker takes just three steps:
Drag the color control at the top, or click any swatch in the preset palette. HEX/RGB/HSL/HSV/CMYK update instantly, and each Copy button copies that format to your clipboard.
HEX and RGB directly describe red/green/blue light intensity for screens; HSL and HSV describe hue/saturation/lightness-or-value for more intuitive editing; CMYK is subtractive and used for print. This tool converts between all five with one click.
Set the foreground and background in the contrast checker. The tool computes the ratio from relative luminance and flags AA/AAA for both normal and large text (4.5:1, 3:1, 7:1).
Complementary colors sit opposite each other on the wheel (180° apart) for maximum contrast; analogous colors are neighbors (about 30° apart) for a softer, more harmonious look.
Yes. Picked colors are stored in Color History and persisted in your browser's localStorage, so they survive a page refresh (up to 24 entries). You can clear them at any time.
It is completely free, dependency-free, and pure frontend. All color math and conversions run locally in your browser — nothing is uploaded, and it works offline.
Per W3C CSS Color specification: HEX (#RRGGBB) is the most common web color notation; RGB (rgb(r,g,b)) is the digital display standard; HSL (hsl(h,s,l)) is based on hue/saturation/lightness and is more intuitive for humans. All three formats are interconvertible.