Paste a color in any format and every other format appears as you type: HEX, HEX with alpha, RGB, HSL, HWB, OKLCH, OKLab, CIE Lab and LCH, plus an approximate CMYK. You also get the nearest Tailwind CSS class and CSS color name, contrast against white and black, tints and shades, ready-to-paste code for CSS, Tailwind, SwiftUI, Flutter and Android, and a searchable table of all 148 HTML color names.
| Name | HEX | RGB |
|---|---|---|
| aliceblue | #F0F8FF | rgb(240, 248, 255) |
| antiquewhite | #FAEBD7 | rgb(250, 235, 215) |
| aqua | #00FFFF | rgb(0, 255, 255) |
| aquamarine | #7FFFD4 | rgb(127, 255, 212) |
| azure | #F0FFFF | rgb(240, 255, 255) |
| beige | #F5F5DC | rgb(245, 245, 220) |
| bisque | #FFE4C4 | rgb(255, 228, 196) |
| black | #000000 | rgb(0, 0, 0) |
| blanchedalmond | #FFEBCD | rgb(255, 235, 205) |
| blue | #0000FF | rgb(0, 0, 255) |
| blueviolet | #8A2BE2 | rgb(138, 43, 226) |
| brown | #A52A2A | rgb(165, 42, 42) |
| burlywood | #DEB887 | rgb(222, 184, 135) |
| cadetblue | #5F9EA0 | rgb(95, 158, 160) |
| chartreuse | #7FFF00 | rgb(127, 255, 0) |
| chocolate | #D2691E | rgb(210, 105, 30) |
| coral | #FF7F50 | rgb(255, 127, 80) |
| cornflowerblue | #6495ED | rgb(100, 149, 237) |
| cornsilk | #FFF8DC | rgb(255, 248, 220) |
| crimson | #DC143C | rgb(220, 20, 60) |
| cyan | #00FFFF | rgb(0, 255, 255) |
| darkblue | #00008B | rgb(0, 0, 139) |
| darkcyan | #008B8B | rgb(0, 139, 139) |
| darkgoldenrod | #B8860B | rgb(184, 134, 11) |
| darkgray | #A9A9A9 | rgb(169, 169, 169) |
| darkgreen | #006400 | rgb(0, 100, 0) |
| darkgrey | #A9A9A9 | rgb(169, 169, 169) |
| darkkhaki | #BDB76B | rgb(189, 183, 107) |
| darkmagenta | #8B008B | rgb(139, 0, 139) |
| darkolivegreen | #556B2F | rgb(85, 107, 47) |
| darkorange | #FF8C00 | rgb(255, 140, 0) |
| darkorchid | #9932CC | rgb(153, 50, 204) |
| darkred | #8B0000 | rgb(139, 0, 0) |
| darksalmon | #E9967A | rgb(233, 150, 122) |
| darkseagreen | #8FBC8F | rgb(143, 188, 143) |
| darkslateblue | #483D8B | rgb(72, 61, 139) |
| darkslategray | #2F4F4F | rgb(47, 79, 79) |
| darkslategrey | #2F4F4F | rgb(47, 79, 79) |
| darkturquoise | #00CED1 | rgb(0, 206, 209) |
| darkviolet | #9400D3 | rgb(148, 0, 211) |
| deeppink | #FF1493 | rgb(255, 20, 147) |
| deepskyblue | #00BFFF | rgb(0, 191, 255) |
| dimgray | #696969 | rgb(105, 105, 105) |
| dimgrey | #696969 | rgb(105, 105, 105) |
| dodgerblue | #1E90FF | rgb(30, 144, 255) |
| firebrick | #B22222 | rgb(178, 34, 34) |
| floralwhite | #FFFAF0 | rgb(255, 250, 240) |
| forestgreen | #228B22 | rgb(34, 139, 34) |
| fuchsia | #FF00FF | rgb(255, 0, 255) |
| gainsboro | #DCDCDC | rgb(220, 220, 220) |
| ghostwhite | #F8F8FF | rgb(248, 248, 255) |
| gold | #FFD700 | rgb(255, 215, 0) |
| goldenrod | #DAA520 | rgb(218, 165, 32) |
| gray | #808080 | rgb(128, 128, 128) |
| green | #008000 | rgb(0, 128, 0) |
| greenyellow | #ADFF2F | rgb(173, 255, 47) |
| grey | #808080 | rgb(128, 128, 128) |
| honeydew | #F0FFF0 | rgb(240, 255, 240) |
| hotpink | #FF69B4 | rgb(255, 105, 180) |
| indianred | #CD5C5C | rgb(205, 92, 92) |
| indigo | #4B0082 | rgb(75, 0, 130) |
| ivory | #FFFFF0 | rgb(255, 255, 240) |
| khaki | #F0E68C | rgb(240, 230, 140) |
| lavender | #E6E6FA | rgb(230, 230, 250) |
| lavenderblush | #FFF0F5 | rgb(255, 240, 245) |
| lawngreen | #7CFC00 | rgb(124, 252, 0) |
| lemonchiffon | #FFFACD | rgb(255, 250, 205) |
| lightblue | #ADD8E6 | rgb(173, 216, 230) |
| lightcoral | #F08080 | rgb(240, 128, 128) |
| lightcyan | #E0FFFF | rgb(224, 255, 255) |
| lightgoldenrodyellow | #FAFAD2 | rgb(250, 250, 210) |
| lightgray | #D3D3D3 | rgb(211, 211, 211) |
| lightgreen | #90EE90 | rgb(144, 238, 144) |
| lightgrey | #D3D3D3 | rgb(211, 211, 211) |
| lightpink | #FFB6C1 | rgb(255, 182, 193) |
| lightsalmon | #FFA07A | rgb(255, 160, 122) |
| lightseagreen | #20B2AA | rgb(32, 178, 170) |
| lightskyblue | #87CEFA | rgb(135, 206, 250) |
| lightslategray | #778899 | rgb(119, 136, 153) |
| lightslategrey | #778899 | rgb(119, 136, 153) |
| lightsteelblue | #B0C4DE | rgb(176, 196, 222) |
| lightyellow | #FFFFE0 | rgb(255, 255, 224) |
| lime | #00FF00 | rgb(0, 255, 0) |
| limegreen | #32CD32 | rgb(50, 205, 50) |
| linen | #FAF0E6 | rgb(250, 240, 230) |
| magenta | #FF00FF | rgb(255, 0, 255) |
| maroon | #800000 | rgb(128, 0, 0) |
| mediumaquamarine | #66CDAA | rgb(102, 205, 170) |
| mediumblue | #0000CD | rgb(0, 0, 205) |
| mediumorchid | #BA55D3 | rgb(186, 85, 211) |
| mediumpurple | #9370DB | rgb(147, 112, 219) |
| mediumseagreen | #3CB371 | rgb(60, 179, 113) |
| mediumslateblue | #7B68EE | rgb(123, 104, 238) |
| mediumspringgreen | #00FA9A | rgb(0, 250, 154) |
| mediumturquoise | #48D1CC | rgb(72, 209, 204) |
| mediumvioletred | #C71585 | rgb(199, 21, 133) |
| midnightblue | #191970 | rgb(25, 25, 112) |
| mintcream | #F5FFFA | rgb(245, 255, 250) |
| mistyrose | #FFE4E1 | rgb(255, 228, 225) |
| moccasin | #FFE4B5 | rgb(255, 228, 181) |
| navajowhite | #FFDEAD | rgb(255, 222, 173) |
| navy | #000080 | rgb(0, 0, 128) |
| oldlace | #FDF5E6 | rgb(253, 245, 230) |
| olive | #808000 | rgb(128, 128, 0) |
| olivedrab | #6B8E23 | rgb(107, 142, 35) |
| orange | #FFA500 | rgb(255, 165, 0) |
| orangered | #FF4500 | rgb(255, 69, 0) |
| orchid | #DA70D6 | rgb(218, 112, 214) |
| palegoldenrod | #EEE8AA | rgb(238, 232, 170) |
| palegreen | #98FB98 | rgb(152, 251, 152) |
| paleturquoise | #AFEEEE | rgb(175, 238, 238) |
| palevioletred | #DB7093 | rgb(219, 112, 147) |
| papayawhip | #FFEFD5 | rgb(255, 239, 213) |
| peachpuff | #FFDAB9 | rgb(255, 218, 185) |
| peru | #CD853F | rgb(205, 133, 63) |
| pink | #FFC0CB | rgb(255, 192, 203) |
| plum | #DDA0DD | rgb(221, 160, 221) |
| powderblue | #B0E0E6 | rgb(176, 224, 230) |
| purple | #800080 | rgb(128, 0, 128) |
| rebeccapurple | #663399 | rgb(102, 51, 153) |
| red | #FF0000 | rgb(255, 0, 0) |
| rosybrown | #BC8F8F | rgb(188, 143, 143) |
| royalblue | #4169E1 | rgb(65, 105, 225) |
| saddlebrown | #8B4513 | rgb(139, 69, 19) |
| salmon | #FA8072 | rgb(250, 128, 114) |
| sandybrown | #F4A460 | rgb(244, 164, 96) |
| seagreen | #2E8B57 | rgb(46, 139, 87) |
| seashell | #FFF5EE | rgb(255, 245, 238) |
| sienna | #A0522D | rgb(160, 82, 45) |
| silver | #C0C0C0 | rgb(192, 192, 192) |
| skyblue | #87CEEB | rgb(135, 206, 235) |
| slateblue | #6A5ACD | rgb(106, 90, 205) |
| slategray | #708090 | rgb(112, 128, 144) |
| slategrey | #708090 | rgb(112, 128, 144) |
| snow | #FFFAFA | rgb(255, 250, 250) |
| springgreen | #00FF7F | rgb(0, 255, 127) |
| steelblue | #4682B4 | rgb(70, 130, 180) |
| tan | #D2B48C | rgb(210, 180, 140) |
| teal | #008080 | rgb(0, 128, 128) |
| thistle | #D8BFD8 | rgb(216, 191, 216) |
| tomato | #FF6347 | rgb(255, 99, 71) |
| turquoise | #40E0D0 | rgb(64, 224, 208) |
| violet | #EE82EE | rgb(238, 130, 238) |
| wheat | #F5DEB3 | rgb(245, 222, 179) |
| white | #FFFFFF | rgb(255, 255, 255) |
| whitesmoke | #F5F5F5 | rgb(245, 245, 245) |
| yellow | #FFFF00 | rgb(255, 255, 0) |
| yellowgreen | #9ACD32 | rgb(154, 205, 50) |
HEX is the most common format on the web and in design tools, and it is what most people mean by HTML color codes. It is compact and easy to paste, but hard to adjust by hand. RGB says the same thing in decimal numbers from 0 to 255, which is handy in JavaScript and when a tool asks for separate red, green and blue values.
HSL and HWB describe the same sRGB colors in a way people can reason about: pick a hue on the color wheel, then adjust saturation and lightness (or whiteness and blackness). They are good for quick tweaks, but their lightness does not match how bright a color looks; a yellow and a blue at 50% lightness look very different.
OKLCH, OKLab, Lab and LCH are perceptual formats. Their lightness numbers track how bright colors appear, and OKLCH and Lab can also describe colors outside sRGB for wide-gamut screens. For a modern design system, OKLCH is a sensible default: it is supported in all current major browsers and it is what Tailwind CSS 4 uses.
Alpha controls opacity from 0 (invisible) to 1 (solid). In HEX it is the optional fourth pair, so #4F98FB80 is the brand blue at about 50%. In functional formats modern CSS puts it after a slash, as in rgb(79 152 251 / 50%) or oklch(68% 0.164 256.7 / 0.5); the older rgba() and hsla() comma forms still work everywhere.
A translucent color has no single contrast ratio, because what you see depends on what is behind it. The contrast figures in this tool composite your color over white and over black before measuring, so they match what a reader would see on those backgrounds.
Screens make color by adding red, green and blue light; printers make it by laying cyan, magenta, yellow and black ink on paper that reflects light. The two systems cover different ranges of color. Bright screen blues and greens often have no exact ink equivalent, and some ink colors have no exact screen equivalent, which is why a logo can look duller in print than on a website.
The CMYK shown above uses the plain formula with no color profile. Professional print conversion uses an ICC profile that describes a specific press, ink set and paper, and it can give very different numbers. Use this value to start a conversation with your printer, not as the final spec.
Split the six characters into three pairs and read each pair as a base-16 number. For #4F98FB: 4F is 79, 98 is 152 and FB is 251, so the color is rgb(79, 152, 251). Paste any hex code above and the RGB value, plus every other format, appears instantly.
OKLCH describes a color by lightness, chroma (how colorful it is) and hue, using the OKLab model, which was designed so equal number changes look like roughly equal visual changes. That makes palettes, hover states and dark-mode variants easier to build than with HSL, where two colors with the same lightness number can look very different. Tailwind CSS version 4 defines its default palette in OKLCH.
Your color and every candidate are converted to OKLab and the one with the smallest straight-line distance wins. The score shown is that distance times 100: under 2 is very hard to tell apart, under 5 is close, and above 10 the name is only a rough guide. Tailwind candidates are the 288 default colors in Tailwind CSS 4.3, including black and white.
No, it is an approximation. Real CMYK depends on the inks, the paper and the printer's color profile, so the same RGB color can need quite different CMYK values on coated and uncoated stock. This tool uses the simple device formula with no profile, which is fine for a rough idea or a quick mock-up. For brand print work, ask your printer or designer to convert using the ICC profile for that job.
No. Pantone's color libraries and their official screen values are proprietary and licensed, so we do not publish them, and many Pantone spot inks are brighter than any normal screen can show anyway. To get a web color for a Pantone shade, look it up in Pantone's own tools or your printed guide, then paste the HEX or RGB value they give you into this converter for every other format.
CSS defines 148 named colors, which all modern browsers support. Some are duplicates under two names: aqua and cyan, fuchsia and magenta, and seven gray colors that also have a grey spelling. rebeccapurple was the last name added. The keywords transparent and currentcolor are not counted as named colors.
No. All conversion happens in your browser. The color in the address bar sits after the # sign, which browsers do not send to servers.
Related: HEX color picker, Color palette generator, Tailwind color palette generator, Color contrast checker, Color name finder.
Start for free or see all free tools. We.Inc is free to start, with no card needed. AI building is on paid plans from $20 a month.
We.Inc is an AI-powered website builder you can resell under your own brand. Launch a branded client dashboard, bill on Stripe Connect, and deliver AI-generated websites in minutes. White-label plans start at $99 a month for 25 client sites, with a 7-day free trial and no per-site fees.