Color converter
Convert colors between HEX, RGB, HSL, HSV, HWB and CMYK, handle alpha and CSS named colors, and check the closest name, luminance and WCAG contrast.
Runs in your browserEvery computation happens in your browser — your data never leaves this device.
Preview
The swatch on the left, and the same color as text on white and on black
All formats
#3366FF
#3366FFFFrgb(51, 102, 255)hsl(225, 100%, 60%)hsv(225, 80%, 100%)hwb(225, 20%, 0%)cmyk(80%, 60%, 0%, 0%)Color info
royalblue · #4169E1 · Color distance 54.45100%40.9%0.17434.68:1 · normal text AA · large text AAA4.49:1 · normal text Fail · large text AA#FFFFFFWhat this tool does
- Turn the color in a design file into whatever your code needs: one #3366FF value yields RGB, HSL, HSV, HWB and CMYK at once instead of five hand conversions.
- Fine-tune a theme color in HSL — knowing it is hsl(225, 100%, 60%) lets you shift lightness for the lighter and darker steps, which is far clearer than nudging hex digits.
- Judge how close a named color is: enter a swatch and see the nearest CSS name plus the color distance, so you know what you give up by using the name.
- Check accessibility before shipping: relative luminance, perceived brightness and WCAG contrast against white and black are shown together, with a note on whether it works for body text or only large text.
Example
Input
#3366FF
Output
RGB rgb(51, 102, 255); HSL hsl(225, 100%, 60%); HSV hsv(225, 80%, 100%); HWB hwb(225, 20%, 0%); CMYK cmyk(80%, 60%, 0%, 0%); closest named color royalblue #4169E1 (distance 54.45, not an exact match); perceived brightness 40.9, relative luminance 0.1743, contrast 4.68 on white (AA)
The distance metric is the redmean weighted RGB approximation — smaller is closer and 0 means identical. Named colors and rgb()/hsl() input are accepted as well.
Frequently asked questions
Which input formats work?
Hex in 3, 4, 6 or 8 digits (the # is optional), rgb()/rgba(), hsl()/hsla(), the 148 CSS named colors, and the keyword transparent. Anything else reports an unrecognised color instead of silently falling back to a default.
Can I send the CMYK numbers to a printer?
Treat them as indicative only. The CMYK values here come from a straightforward mathematical conversion of the sRGB value with no ICC profile or black-generation strategy, so another tool may differ by a few percentage points. For color-critical print work, convert in a design app with the right profile.
What is the difference between relative and perceived brightness?
Relative luminance is the linearised WCAG weighting on a 0–1 scale and exists purely to compute contrast ratios. Perceived brightness uses the 299/587/114 coefficients on a 0–100 scale and answers "does this look bright?". For legibility decisions trust the contrast ratio derived from relative luminance.
Why is there no exact named color for my value?
CSS only defines 148 names, so almost every value is an approximation. The tool picks the closest candidate with the redmean weighted distance and flags whether it is an exact match — only a distance of 0 means the two are the same color.
Does alpha survive the conversion?
Yes. An eight-digit hex such as #3366FF80 parses to alpha ≈ 0.5 and the RGB output becomes rgba(51, 102, 255, 0.5). HSL, HSV, HWB and CMYK only describe hue and lightness, so write alpha separately in your CSS.
Keywords：colorcolor converterhexrgbhslhsvhwbcmyk颜色取色器颜色转换透明度对比度wcag色相命名色