{"id":64606,"date":"2025-05-12T10:40:48","date_gmt":"2025-05-12T07:40:48","guid":{"rendered":"https:\/\/wpcalc.com\/en\/?p=64606"},"modified":"2026-09-28T09:59:22","modified_gmt":"2026-09-28T06:59:22","slug":"color-converter","status":"publish","type":"post","link":"https:\/\/wpcalc.com\/en\/web-tools\/color-converter\/","title":{"rendered":"Color Converter"},"content":{"rendered":"<section class=\"not-prose calculator-box\" aria-labelledby=\"calculator-title\"><div class=\"flex items-baseline sm:items-center justify-between gap-2 sm:gap-3\"><div class=\"flex flex-col sm:flex-row sm:items-center gap-2\"><span class=\"icon icon-calculator text-primary-700! text-base! dark:text-primary-300!\" aria-hidden=\"true\"><\/span><h2 id=\"calculator-title\" class=\"text-lg font-display font-bold\">HEX \u21c4 RGB \u21c4 HSL Color Converter<\/h2><\/div><div class=\"calcdash-favorite group\">\n  <button type=\"button\" class=\"favorite\" id=\"favorite\" data-favorite-id=\"64606\" data-favorite-title=\"Color Converter\" data-favorite-url=\"https:\/\/wpcalc.com\/en\/web-tools\/color-converter\/\" data-favorite-excerpt=\"Enter a CSS color name or code to see its RGB, HEX, HSL, HWB, CMYK, and NCol values, along with a color preview.\" aria-label=\"Add to Favorites\" data-favorite-icon=\"icon icon-conversion\">\n    <span class=\"icon icon-shape-star-empty\" aria-hidden=\"true\"><\/span>\n  <\/button>\n  <div class=\"calcdash-favorite__tip\" aria-hidden=\"true\">\n   <span class=\"favorite-tooltip\" id=\"favorite-tooltip\"><\/span>\n  <\/div>\n  <span class=\"sr-only\" role=\"status\" id=\"favorite-status\"><\/span>\n<\/div><\/div><form action=\"https:\/\/wpcalc.com\/en\/web-tools\/color-converter\/\" method=\"POST\" class=\"calculator\" id=\"calculator-64606\" data-post=\"64606\"><fieldset class=\"fieldset-input\"><legend class=\"sr-only\">Input Fields<\/legend><div class=\"field is-single\" id=\"input-1\"><label for=\"field-1\">Color<\/label><input type=\"text\" name=\"color\" id=\"field-1\" aria-describedby=\"calc-info-1\" placeholder=\"e.g. red, #f00, rgb(255,0,0)\" step=\"any\" value=\"skyblue\"\/><small id=\"calc-info-1\">Enter a color name or any CSS color code.<\/small><\/div><\/fieldset><div class=\"buttons\"><button type=\"submit\" data-text=\"Re-Calculate\" id=\"calculate-button\" data-post=\"64606\">Calculate<\/button><button type=\"reset\">Reset<\/button><\/div><div class=\"field is-checkbox hidden!\" id=\"field-auto-calc\"><input type=\"checkbox\" id=\"auto-calc\"><label for=\"auto-calc\">Calculate automatically<\/label><small>If enabled, the result will update automatically when you change any value.<\/small><\/div><div class=\"fieldset-result is-hidden\" aria-labelledby=\"result-title\" aria-live=\"polite\" role=\"region\"> <h3 class=\"result-title bg-gradient-to-r from-primary-50 to-gray-50 dark:from-primary-900 dark:to-gray-800\" id=\"result-title\"><span class=\"icon icon-s-pulse\" aria-hidden=\"true\"><\/span> Your Results<\/h3><div class=\"result-box\"><div class=\"field-result\" id=\"output-1\"><span class=\"field-title\"><span>Name<\/span><\/span><span class=\"field-value\" id=\"result-1\"><\/span><button type=\"button\" class=\"copy-result\" data-tooltip=\"Copy Result\" aria-label=\"Copy Result\"><span class=\"copy-icon icon icon-document-copy\" aria-hidden=\"true\"><\/span><\/button><\/div><div class=\"field-result\" id=\"output-2\"><span class=\"field-title\"><span>RGB<\/span><\/span><span class=\"field-value\" id=\"result-2\"><\/span><button type=\"button\" class=\"copy-result\" data-tooltip=\"Copy Result\" aria-label=\"Copy Result\"><span class=\"copy-icon icon icon-document-copy\" aria-hidden=\"true\"><\/span><\/button><\/div><div class=\"field-result\" id=\"output-3\"><span class=\"field-title\"><span>HEX<\/span><\/span><span class=\"field-value\" id=\"result-3\"><\/span><button type=\"button\" class=\"copy-result\" data-tooltip=\"Copy Result\" aria-label=\"Copy Result\"><span class=\"copy-icon icon icon-document-copy\" aria-hidden=\"true\"><\/span><\/button><\/div><div class=\"field-result\" id=\"output-4\"><span class=\"field-title\"><span>HSL<\/span><\/span><span class=\"field-value\" id=\"result-4\"><\/span><button type=\"button\" class=\"copy-result\" data-tooltip=\"Copy Result\" aria-label=\"Copy Result\"><span class=\"copy-icon icon icon-document-copy\" aria-hidden=\"true\"><\/span><\/button><\/div><div class=\"field-result\" id=\"output-5\"><span class=\"field-title\"><span>HWB<\/span><\/span><span class=\"field-value\" id=\"result-5\"><\/span><button type=\"button\" class=\"copy-result\" data-tooltip=\"Copy Result\" aria-label=\"Copy Result\"><span class=\"copy-icon icon icon-document-copy\" aria-hidden=\"true\"><\/span><\/button><\/div><div class=\"field-result\" id=\"output-6\"><span class=\"field-title\"><span>CMYK<\/span><\/span><span class=\"field-value\" id=\"result-6\"><\/span><button type=\"button\" class=\"copy-result\" data-tooltip=\"Copy Result\" aria-label=\"Copy Result\"><span class=\"copy-icon icon icon-document-copy\" aria-hidden=\"true\"><\/span><\/button><\/div><div class=\"field-result\" id=\"output-7\"><span class=\"field-title\"><span>NCol<\/span><\/span><span class=\"field-value\" id=\"result-7\"><\/span><button type=\"button\" class=\"copy-result\" data-tooltip=\"Copy Result\" aria-label=\"Copy Result\"><span class=\"copy-icon icon icon-document-copy\" aria-hidden=\"true\"><\/span><\/button><\/div><div class=\"field-result\" id=\"output-8\"><span class=\"field-title\"><span>Color<\/span><\/span><span class=\"field-value\" id=\"result-8\"><\/span><button type=\"button\" class=\"copy-result\" data-tooltip=\"Copy Result\" aria-label=\"Copy Result\"><span class=\"copy-icon icon icon-document-copy\" aria-hidden=\"true\"><\/span><\/button><\/div><\/div><div class=\"result-actions\"><button type=\"button\" class=\"copy-link\"><svg viewBox=\"0 0 20 20\" fill=\"currentColor\" aria-hidden=\"true\"><path d=\"M12.232 4.232a2.5 2.5 0 0 1 3.536 3.536l-1.225 1.224a.75.75 0 0 0 1.061 1.06l1.224-1.224a4 4 0 0 0-5.656-5.656l-3 3a4 4 0 0 0 .225 5.865.75.75 0 0 0 .977-1.138 2.5 2.5 0 0 1-.142-3.667l3-3Z\"\/><path d=\"M11.603 7.963a.75.75 0 0 0-.977 1.138 2.5 2.5 0 0 1 .142 3.667l-3 3a2.5 2.5 0 0 1-3.536-3.536l1.225-1.224a.75.75 0 0 0-1.061-1.06l-1.224 1.224a4 4 0 1 0 5.656 5.656l3-3a4 4 0 0 0-.225-5.865Z\"\/><\/svg><span class=\"copy-link__text\">Copy link to this calculation<\/span><\/button><span class=\"sr-only\" role=\"status\" id=\"copy-link-status\"><\/span><\/div><\/div><a href=\"#respond\" class=\"hidden transition-opacity duration-300 opacity-0 w-50 text-sm justify-center items-center gap-2 px-4 py-2 rounded bg-gray-200 text-gray-700 hover:bg-gray-300\" id=\"leave-comment\"><span class=\"icon icon-comments\" aria-hidden=\"true\"><\/span>Leave a Comment<\/a><\/form><\/section><section id=\"calc-reactions\" class=\"not-prose hidden my-12 bg-gradient-to-r from-primary-50 to-gray-50 border border-indigo-100 rounded-xl px-6 py-4 shadow-sm\" data-post=\"64606\" aria-live=\"polite\" aria-labelledby=\"calc-reactions-title\"><p id=\"calc-reactions-title\" class=\"text-sm text-gray-500 text-center mb-2\">How did this result make you feel?<\/p><div role=\"group\" aria-labelledby=\"calc-reactions-title\" class=\"grid grid-cols-3 sm:flex sm:flex-row sm:justify-around gap-4 sm:items-center sm:flex-wrap\"><button type=\"button\" aria-pressed=\"false\" class=\"reaction-btn flex flex-col items-center gap-1 text-sm text-gray-700 hover:text-primary-600 cursor-pointer transition-transform hover:scale-105\" data-reaction=\"like\"><span class=\"reaction-count\" data-reaction-count=\"like\">0<\/span><span class=\"reaction text-3xl\" aria-hidden=\"true\">\ud83d\ude00 <\/span><span class=\"reaction-description font-medium\">Like <\/span><\/button><button type=\"button\" aria-pressed=\"false\" class=\"reaction-btn flex flex-col items-center gap-1 text-sm text-gray-700 hover:text-primary-600 cursor-pointer transition-transform hover:scale-105\" data-reaction=\"helpful\"><span class=\"reaction-count\" data-reaction-count=\"helpful\">0<\/span><span class=\"reaction text-3xl\" aria-hidden=\"true\">\ud83d\udca1 <\/span><span class=\"reaction-description font-medium\">Helpful <\/span><\/button><button type=\"button\" aria-pressed=\"false\" class=\"reaction-btn flex flex-col items-center gap-1 text-sm text-gray-700 hover:text-primary-600 cursor-pointer transition-transform hover:scale-105\" data-reaction=\"confused\"><span class=\"reaction-count\" data-reaction-count=\"confused\">0<\/span><span class=\"reaction text-3xl\" aria-hidden=\"true\">\ud83d\ude15 <\/span><span class=\"reaction-description font-medium\">Confused <\/span><\/button><button type=\"button\" aria-pressed=\"false\" class=\"reaction-btn flex flex-col items-center gap-1 text-sm text-gray-700 hover:text-primary-600 cursor-pointer transition-transform hover:scale-105\" data-reaction=\"disappointed\"><span class=\"reaction-count\" data-reaction-count=\"disappointed\">0<\/span><span class=\"reaction text-3xl\" aria-hidden=\"true\">\ud83d\ude1e <\/span><span class=\"reaction-description font-medium\">Disappointed <\/span><\/button><button type=\"button\" aria-pressed=\"false\" class=\"reaction-btn flex flex-col items-center gap-1 text-sm text-gray-700 hover:text-primary-600 cursor-pointer transition-transform hover:scale-105\" data-reaction=\"inaccurate\"><span class=\"reaction-count\" data-reaction-count=\"inaccurate\">0<\/span><span class=\"reaction text-3xl\" aria-hidden=\"true\">\u274c <\/span><span class=\"reaction-description font-medium\">Inaccurate <\/span><\/button><\/div><div id=\"reaction-message\" class=\"hidden mt-8 rounded-md border border-primary-100 bg-white\/50 backdrop-blur-sm px-4 py-2 text-sm text-center shadow-sm\"><\/div><\/section><div class=\"calcdash-ad not-prose calcdash-ad--calc_result calcdash-ad--in-article\"><ins class=\"adsbygoogle\" style=\"display:block\" data-ad-client=\"ca-pub-1721569815777345\" data-ad-slot=\"6317458308\" data-ad-layout=\"in-article\" data-ad-format=\"fluid\"><\/ins><script>(adsbygoogle = window.adsbygoogle || []).push({});<\/script><\/div>\n<style id=\"wpcoderpro-inline-1\">.formula-box {\r\n\tborder-bottom: none !important;\r\n}<\/style><section class=\"formula-box\" aria-labelledby=\"formula-title\">\r\n\t<div id=\"formula-title\" class=\"not-prose font-display mb-4\"><span class=\"icon icon-formula\" aria-hidden=\"true\"><\/span><h2>Color Converter Formula<\/h2><\/div>\r\n\t<figure class=\"not-prose formula\">\r\n\t\t<figcaption class=\"formula-title\">Formula<\/figcaption>\r\n\t\t<div class=\"text-base text-gray-800\" id=\"formula\">\n\\[R=16h_1+h_2,\\qquad G=16h_3+h_4,\\qquad B=16h_5+h_6\\]\n<\/div>\r\n\t<\/figure>\r\n\t<\/p>\n<p><strong>Where:<\/strong><\/p>\n<ul>\n<li>\\(h_1,\\ldots,h_6\\) \u2014 the six digits of a HEX color, read as values from 0 to 15; A through F represent 10 through 15.<\/li>\n<li>\\(R\\), \\(G\\), and \\(B\\) \u2014 the red, green, and blue channel values, each from 0 to 255.<\/li>\n<\/ul>\n<p>This formula converts a six-digit HEX color to RGB. The calculator also accepts other supported color formats and converts between them.<\/p>\n<p>\r\n<\/section>\n<style id=\"wpcoderpro-inline-459\">.calculation-box {\r\n\tborder-bottom: none !important;\r\n}<\/style><section id=\"calculation\" class=\"calculation-box\" aria-labelledby=\"calculation-title\">\r\n\t<div id=\"calculation-title\" class=\"not-prose font-display\"><span class=\"icon icon-unordered-list\" aria-hidden=\"true\"><\/span><h2>Color Converter \u2013 Calculation Example<\/h2><\/div>\r\n\r\n<\/p>\n<p><strong>Example:<\/strong> the default input is <code>skyblue<\/code>. This named color corresponds to <code>#87CEEB<\/code>, so its HEX digit pairs can be converted to RGB.<\/p>\n<p>\\[R=8(16)+7=135,\\qquad G=12(16)+14=206,\\qquad B=14(16)+11=235\\]<\/p>\n<p><strong>Result:<\/strong> <code>skyblue<\/code> has HEX value <code>#87CEEB<\/code> and RGB value <code>rgb(135, 206, 235)<\/code>. Its HSL values are approximately 197\u00b0 hue, 71% saturation, and 73% lightness.<\/p>\n<p>\n\r\n<\/section>\n<h2>How to use the Color Converter<\/h2>\n<ol>\n<li>Enter a color in the <strong>Color<\/strong> field. You can start with the default <code>skyblue<\/code>, type a CSS color name such as <code>red<\/code>, or enter a code such as <code>#f00<\/code> or <code>rgb(255,0,0)<\/code>.<\/li>\n<li>Check the <strong>Color<\/strong> result for a visual preview of the interpreted input.<\/li>\n<li>Copy the format you need from <strong>Name<\/strong>, <strong>RGB<\/strong>, <strong>HEX<\/strong>, <strong>HSL<\/strong>, <strong>HWB<\/strong>, <strong>CMYK<\/strong>, or <strong>NCol<\/strong>.<\/li>\n<\/ol>\n<p>If <strong>Name<\/strong> says \u201cno name,\u201d the color has no matching name in the converter\u2019s named-color list. The numeric results can still represent a valid color.<\/p>\n<h2>What the color formats mean<\/h2>\n<p>A digital color can be described in several ways without changing its appearance. <strong>HEX<\/strong> writes red, green, and blue as hexadecimal digit pairs: <code>#87CEEB<\/code> means red 87, green CE, and blue EB in base 16. <strong>RGB<\/strong> expresses those same channels as decimal numbers from 0 to 255. If you want to work through the base-16 arithmetic separately, use the <a href=\"https:\/\/wpcalc.com\/en\/web-tools\/hex-converter\/\">Hex Converter<\/a>; it converts numbers, not complete CSS color values.<\/p>\n<p><strong>HSL<\/strong> describes hue, saturation, and lightness. Hue is a position around a color wheel, usually expressed in degrees; saturation describes color intensity, and lightness runs from black toward white. <strong>HWB<\/strong> uses hue, whiteness, and blackness instead. These formats can be easier to read when you are comparing shades or adjusting a color by eye. RGB and HEX are often more convenient when a specification calls for exact channel values.<\/p>\n<p><strong>CMYK<\/strong> gives cyan, magenta, yellow, and black values derived from the screen color. <strong>NCol<\/strong> is a hue-based notation provided by the converter; it is not as commonly used in CSS as HEX, RGB, or HSL. The output format changes how a color is written, not the underlying color chosen. Small differences in displayed percentages can result from rounding.<\/p>\n<h2>Practical limits and tips<\/h2>\n<p>The converter needs an input its color parser recognizes. Standard CSS color names and common CSS-style color codes are useful starting points. A three-digit HEX code is shorthand: for example, <code>#f00<\/code> expands to <code>#ff0000<\/code>. HEX letters are case-insensitive, so <code>#87ceeb<\/code> and <code>#87CEEB<\/code> represent the same color.<\/p>\n<p>Some inputs include an alpha value, which controls transparency. For recognized alpha-bearing inputs, the RGB, HSL, HWB, and NCol results use alpha-bearing forms. Check each result before copying it into another application: not every listed format describes transparency in the same way. The preview can also look different against a different background when a color is partly transparent.<\/p>\n<p>CMYK here is a mathematical conversion from a digital color, not a print-profile conversion. Printed appearance depends on the printer, inks, paper, and color-management settings, so use a suitable print workflow when exact production color matters. Likewise, a color\u2019s appearance on screen depends on the display and its settings; matching numeric values alone cannot guarantee identical appearance on every device.<\/p>\n<p>If you place a HEX color in a URL query parameter, remember that <code>#<\/code> has a special meaning in URLs. Use the <a href=\"https:\/\/wpcalc.com\/en\/web-tools\/url-encoder\/\">URL Encoder<\/a> to encode the value when needed.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Enter a CSS color name or code to see its RGB, HEX, HSL, HWB, CMYK, and NCol values, along with a color preview.<\/p>\n","protected":false},"author":70,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[63],"tags":[64],"class_list":["post-64606","post","type-post","status-publish","format-standard","hentry","category-web-tools","tag-converter-tools"],"acf":[],"_links":{"self":[{"href":"https:\/\/wpcalc.com\/en\/wp-json\/wp\/v2\/posts\/64606","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wpcalc.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wpcalc.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wpcalc.com\/en\/wp-json\/wp\/v2\/users\/70"}],"replies":[{"embeddable":true,"href":"https:\/\/wpcalc.com\/en\/wp-json\/wp\/v2\/comments?post=64606"}],"version-history":[{"count":3,"href":"https:\/\/wpcalc.com\/en\/wp-json\/wp\/v2\/posts\/64606\/revisions"}],"predecessor-version":[{"id":65333,"href":"https:\/\/wpcalc.com\/en\/wp-json\/wp\/v2\/posts\/64606\/revisions\/65333"}],"wp:attachment":[{"href":"https:\/\/wpcalc.com\/en\/wp-json\/wp\/v2\/media?parent=64606"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wpcalc.com\/en\/wp-json\/wp\/v2\/categories?post=64606"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wpcalc.com\/en\/wp-json\/wp\/v2\/tags?post=64606"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}