What each color format is for
Every format below describes the same color. They just suit different jobs, so it helps to know which one a tool or printer expects.
- HEX (#2875C5): the short code used in web design, Canva and brand guides. Two digits each for red, green and blue.
- RGB (rgb(40, 117, 197)): the same three channels as numbers from 0 to 255. Screens, CSS and most apps read it.
- HSL (hsl(211, 66%, 46%)): hue, saturation and lightness. Easy to tweak by hand, like making a color 10% lighter.
- HSV or HSB: hue, saturation and value (brightness). It's what Photoshop, Procreate and Figma's picker use.
- CMYK: cyan, magenta, yellow and black ink, for printing flyers, cards and packaging.
- OKLCH (oklch(55.7% 0.144 252.8)): a newer CSS format built around how people see color, so equal steps look equal.
How to convert HEX to RGB by hand
Split the six digits into three pairs and read each pair as a number in base 16. For #2875C5, 28 is 2 × 16 + 8 = 40, 75 is 117 and C5 is 197, so the color is rgb(40, 117, 197). Going back, turn each number into two hex digits.
Three-digit codes are shorthand: #3AF is the same as #33AAFF. Eight-digit codes add a pair for transparency, which this converter ignores.
Why CMYK numbers are only a starting point
Screens mix light and printers mix ink, and ink can't reach every color a screen can show, especially bright blues and greens. The CMYK here is the standard simple formula with no printer profile. It's fine for a first proof, but ask your printer which profile they use, and order a sample before a big run if the color matters.
When to use OKLCH
OKLCH keeps lightness steady while you change the hue, so a set of buttons in different colors all look equally bright. That makes it great for color scales and themes. Every current browser supports it in CSS. Some OKLCH colors are brighter than a normal screen can show; the converter clips those to the closest color that fits, so the HEX may round trip to a slightly different OKLCH.
Nearest CSS color names
CSS has around 140 named colors, like tomato, steelblue and rebeccapurple. The converter finds the closest one by how different the colors look, not just by the numbers. Names are handy for quick mockups and notes, but use the exact HEX in your brand kit.
Frequently asked questions
How do I convert HEX to RGB?
Paste the HEX code above and copy the RGB line. By hand, read each pair of digits as a base 16 number: #2875C5 becomes 40, 117 and 197.
Is the CMYK value exact for printing?
No. It uses the common simple formula without a printer profile. Use it as a starting point and check a printed proof with your printer.
What's the difference between HSL and HSV?
Both start with hue. HSL's lightness runs from black through the pure color to white. HSV's value runs from black to the pure color, which is how most design app pickers work.
Can I paste a color with transparency?
Yes. Eight-digit HEX and rgba() values are accepted, but the alpha part is ignored and you get the solid color.
Does OKLCH work in all browsers?
It works in current Chrome, Safari, Firefox and Edge. For very old browsers, add a HEX fallback on the line before it.