Design tool
Color Converter
Paste a HEX code, an rgb() or hsl() value, or a CSS color name and get every common format back instantly. Drag the picker to explore nearby shades, then copy the value you need.
HEX, rgb(), hsl(), and all 148 CSS color names are supported.
Converted values
#1F6B45rgb(31, 107, 69)hsl(150, 55%, 27%)hsv(150, 71%, 42%)cmyk(71%, 0%, 36%, 58%)seagreenContrast (WCAG)
- AA normal: Pass
- AAA normal: Fail
- AA large: Pass
- AAA large: Pass
- AA normal: Fail
- AAA normal: Fail
- AA large: Pass
- AAA large: Fail
Normal text needs 4.5:1 for AA and 7:1 for AAA. Large text (18pt, or 14pt bold) needs 3:1 for AA and 4.5:1 for AAA.
How color models relate
Screens mix red, green, and blue light, so RGB is the native model for anything displayed on a monitor. Each channel runs from 0 (off) to 255 (full intensity). A HEX code is nothing more than those same three numbers written in base 16: two hexadecimal digits per channel, red first, then green, then blue.
HSL and HSV rearrange the same information so that it is easier to reason about. Both start with hue, the position on the color wheel in degrees. HSL then describes saturation and lightness, where 50% lightness is the purest version of a hue and 100% is always white. HSV uses saturation and value instead, where 100% value is the brightest version of the hue and white is reached by dropping saturation to zero.
CMYK is a subtractive model used for print. Instead of adding light it describes how much cyan, magenta, yellow, and black ink to lay down. The conversion shown here is the common mathematical one; real print output also depends on the paper, press, and color profile.
Formulas
To turn RGB into HEX, convert each channel to a two-digit hexadecimal number and join the results. For the brand green used as the default above, 31 becomes 1F, 107 becomes 6B, and 69 becomes 45.
Lightness in HSL is the midpoint of the strongest and weakest channels. Saturation compares the spread between those channels to how far the lightness sits from the extremes.
Value in HSV is simply the strongest channel, which is why a pure hue and a fully saturated tint share the same value but differ in lightness.
Common colors in every format
A quick reference for the primaries, secondaries, and a few everyday colors. Values are rounded to whole numbers, which is how most tools display them.
| Color | HEX | RGB | HSL | HSV | CMYK |
|---|---|---|---|---|---|
| White | #FFFFFF | rgb(255, 255, 255) | hsl(0, 0%, 100%) | hsv(0, 0%, 100%) | cmyk(0%, 0%, 0%, 0%) |
| Black | #000000 | rgb(0, 0, 0) | hsl(0, 0%, 0%) | hsv(0, 0%, 0%) | cmyk(0%, 0%, 0%, 100%) |
| Red | #FF0000 | rgb(255, 0, 0) | hsl(0, 100%, 50%) | hsv(0, 100%, 100%) | cmyk(0%, 100%, 100%, 0%) |
| Lime | #00FF00 | rgb(0, 255, 0) | hsl(120, 100%, 50%) | hsv(120, 100%, 100%) | cmyk(100%, 0%, 100%, 0%) |
| Blue | #0000FF | rgb(0, 0, 255) | hsl(240, 100%, 50%) | hsv(240, 100%, 100%) | cmyk(100%, 100%, 0%, 0%) |
| Yellow | #FFFF00 | rgb(255, 255, 0) | hsl(60, 100%, 50%) | hsv(60, 100%, 100%) | cmyk(0%, 0%, 100%, 0%) |
| Cyan | #00FFFF | rgb(0, 255, 255) | hsl(180, 100%, 50%) | hsv(180, 100%, 100%) | cmyk(100%, 0%, 0%, 0%) |
| Magenta | #FF00FF | rgb(255, 0, 255) | hsl(300, 100%, 50%) | hsv(300, 100%, 100%) | cmyk(0%, 100%, 0%, 0%) |
| Gray | #808080 | rgb(128, 128, 128) | hsl(0, 0%, 50%) | hsv(0, 0%, 50%) | cmyk(0%, 0%, 0%, 50%) |
| Orange | #FFA500 | rgb(255, 165, 0) | hsl(39, 100%, 50%) | hsv(39, 100%, 100%) | cmyk(0%, 35%, 100%, 0%) |
| Calquo green | #1F6B45 | rgb(31, 107, 69) | hsl(150, 55%, 27%) | hsv(150, 71%, 42%) | cmyk(71%, 0%, 36%, 58%) |
Frequently asked questions
What is the difference between HSL and HSV?
Both share the same hue. In HSL, lightness runs from black through the pure hue to white, so a vivid color sits at 50%. In HSV, value runs from black to the brightest version of the hue, and white is produced by reducing saturation instead. Designers often prefer HSL for tinting and shading; many picker widgets, including the one on this page, use HSV because it maps cleanly onto a square.
Why do HEX codes have six characters?
Each of the three channels (red, green, blue) needs a number from 0 to 255. That range fits in exactly two hexadecimal digits (00 to FF), so three channels take six characters. Three-character shorthand like #fff works only when each pair repeats the same digit.
Does an 8-digit HEX code include transparency?
Yes. The seventh and eighth digits are an alpha channel, where 00 is fully transparent and FF is fully opaque. This tool reads 8-digit codes and notes the alpha, but the converted values are shown as opaque colors.
Is my color sent anywhere?
No. Parsing, conversion, and contrast checks all run in your browser with plain JavaScript. Nothing you type is uploaded or stored on a server.
What is WCAG contrast?
The Web Content Accessibility Guidelines define a contrast ratio between text and its background, from 1:1 (identical) to 21:1 (black on white). Level AA requires at least 4.5:1 for normal text and 3:1 for large text; level AAA raises those to 7:1 and 4.5:1. The panel above checks your color against both white and black so you can see where it is safe to use.