RGB color picker
Pick a color with the native picker or by typing, and instantly get HEX (with alpha), RGB, HSL, HSV, CMYK and the CSS color name. Hue/saturation/lightness sliders stay in sync, a 100–900 shade scale is generated, and contrast ratios, WCAG levels and the readable text color are computed.
Runs in your browserEvery computation happens in your browser — your data never leaves this device.
Preview
Result
#3B82F6
#3B82F6#3B82F6 (a=1)rgb(59, 130, 246)hsl(217, 91%, 60%)hsv(217, 76%, 96%)cmyk(76%, 47%, 0%, 4%)No exact CSS color nameShade scale (100–900)
The current color is 500; lighter steps mix white, darker steps mix black.
Contrast and readable text color
3.68 : 15.71 : 1#000000AA0.2355What this tool does
- The design spec gives HEX, a teammate says RGB and the printer wants CMYK: type any one of them and get HEX, RGB, HSL, HSV, CMYK and the CSS color name at once.
- Tune a color with the hue, saturation and lightness sliders, or grab a color straight off the screen with the native picker — the numbers stay in sync.
- Build dark themes or button states from the 100–900 shade scale: the current color is 500, lighter steps mix white, darker steps mix black, ready to paste into CSS variables.
- Check accessibility with contrast ratios against black and white, the WCAG level and a suggested readable text color.
Example
Input
#3B82F6
Output
HEX #3B82F6 · RGB rgb(59, 130, 246) · HSL hsl(217, 91%, 60%) · HSV hsv(217, 76%, 96%) · CMYK cmyk(76%, 47%, 0%, 4%) · contrast with white 3.68 (AA Large) · contrast with black 5.71 (AA) · relative luminance 0.2355 · readable text color #000000
Contrast uses the WCAG relative luminance formula and ranges from 1 to 21; the AA threshold for body text is 4.5, so 3.68 only qualifies for large text.
Frequently asked questions
Which color formats are accepted?
#RGB, #RGBA, #RRGGBB, #RRGGBBAA, rgb(), rgba(), hsl(), hsla(), hsv(), hsb(), cmyk(), CSS color names such as tomato, and transparent. Anything malformed reports that the color format is not valid.
Why do the CMYK values differ from Photoshop?
This uses a naive conversion with no color management (K = 1 − max(R,G,B)) — pure math. Print software derives CMYK from actual inks, paper white and an ICC profile, so the numbers legitimately differ; trust your printer profile for production.
How is the color name matched?
A name only appears when the hex value matches exactly, so #FF6347 reports tomato while #FF6348 does not. Aliases like gray and grey resolve to whichever name appears first in the table.
How are WCAG levels decided?
Body text thresholds are 4.5 (AA) and 7 (AAA), while large text uses 3 (AA) and 4.5 (AAA). Anything below 3 fails outright, and a ratio between 3 and 4.5 is labelled AA Large, meaning it is only suitable for larger type.
Does picking or converting a color upload anything?
No. All conversions, shade generation and contrast math run in the browser with no requests, and any color you pick from the screen stays on your machine.
Keywords：颜色color picker取色器rgbhexhslhsvcmyk色阶对比度contrast