RGB Converter
Convert between RGB, HEX, HSL, and CMYK color formats
How to use RGB Converter
- 1Enter values between 0 and 255 for red, green, blue.
- 2Drag a slider to preview the colour generated in real time.
- 3Copy HEX, HSL or CSS codes for your project.
How the RGB forms the colour
Colour = (R, G, B), 0 to 255 per channel; HEX = #RRRGGBBThe RGB mix of three light channels (0,0) is black, (255,255,255) is white, and the three equals are grey steps.
The screen is active, so the RGB is colored: contrary to paint, the supersing of all channels tends to be white rather than black.
RGB is** a coloured model** (a superheavy of light) for screen display: three channels full of 0 are black and 255 are white. This is the opposite of the CMYK for printing -- the more paints are mixed up, the more four colours and the less black. The script is good on the screen, but it's dark, mostly for this reason, and needs to be converted into colour space at the design stage.
HSL (colour/saturation/lightness) is closer to people's instincts than RGB: "Brighter" is added to L, "Brighter" is added to S, while RGB requires three numbers. ** Conchromic colours only need to fix H to S and L** - e.g. H = 210 blue, S from 80% to 30%, L from 40% to 90%, to get a coherent set of light blue steps. This is also the reason why the design systems such as Material Design and Tailwind press the HSL panel.
| Colours | HEX | RGB | HSL |
|---|---|---|---|
| Pure red. | #FF0000 | 255, 0, 0 | 0°, 100%, 50% |
| Clean green. | #00FF00 | 0, 255, 0 | 120°, 100%, 50% |
| Pure Blue | #0000FF | 0, 0, 255 | 240°, 100%, 50% |
| White | #FFFFFF | 255, 255, 255 | 0°, 0%, 100% |
| Black | #000000 | 0, 0, 0 | 0°, 0%, 0% |
| Medium Grey | #808080 | 128, 128, 128 | 0°, 0%, 50% |
| Cyan | #00FFFF | 0, 255, 255 | 180°, 100%, 50% |
| Magenta | #FF00FF | 255, 0, 255 | 300°, 100%, 50% |
Common colour RGB/ HEX/ HSL contrast
Frequently asked questions
What's the difference between RGB and CMYK?
RGB for screens (colored light); CMYK for printing (coloured ink).
Why 0 to 255?
Each channel is 8 bits and provides 0 to 255 grade 256, for a total of approximately 167.7 million colours.
HEX?
Turn every decimal into two hexadecimals and add #, e.g. 255, 0, 0 to #FF000.
Why is the color of the page different from what you actually see?
Three common reasons: colour space is different - the same RGB values are different on sRGB, Display P3, Adobe RGB monitors, and the sRGB colours on wide-colour screens are diluted; displays are not coloured, and white dots and gammas vary from device to device;3 browser colour management settings. Professional design requires regular calibration of a colour monitor, which is commonly used to ensure the correct colour configuration of the system.
What about the hexadecimal color?
#FF, #336699 #369 (333, 666, 999) Only two people in each channel can make it short, #FF8801 not short. Brief is fully equivalent in CSS, reducing the size of the document.