{"id":856134,"date":"2026-05-20T17:16:55","date_gmt":"2026-05-20T17:16:55","guid":{"rendered":"https:\/\/elektrobox.ch\/?page_id=856134"},"modified":"2026-06-07T14:30:11","modified_gmt":"2026-06-07T14:30:11","slug":"color-conversion","status":"publish","type":"page","link":"https:\/\/elektrobox.ch\/index.php\/color-conversion\/","title":{"rendered":"Color Conversion"},"content":{"rendered":"      <section class=\"ccw-page\" aria-labelledby=\"ccw-page-title\">\n        <header class=\"ccw-hero\">\n          <div class=\"ccw-hero__content\">\n            <p class=\"ccw-kicker\">ElektroBox Tool<\/p>\n            <h1 id=\"ccw-page-title\">Color Converter for HEX, RGB, HSL, HSV, CMYK and CSS Colors<\/h1>\n            <p class=\"ccw-hero__lead\">\n              Convert colors directly in your browser for websites, electronics dashboards, UI mockups, LED projects and documentation. Check HEX, RGB, HSL, HSV, HWB, CMYK, decimal values and contrast ratios in one clean workspace.\n            <\/p>\n            <div class=\"ccw-hero__meta\" aria-label=\"Tool highlights\">\n              <span>Live preview<\/span>\n              <span>Browser-side conversion<\/span>\n              <span>Useful for web and maker projects<\/span>\n            <\/div>\n          <\/div>\n        <\/header>\n\n        <div class=\"ccw-layout\">\n          <main class=\"ccw-layout__main\">\n                <div class=\"ccw\" data-default-tab=\"converter\" data-default-color=\"#2563eb\" data-default-format=\"auto\">\n      <div class=\"ccw-tool-card\">\n        <div class=\"ccw-tool-head\">\n          <div>\n            <p class=\"ccw-kicker\">Color tool<\/p>\n            <h2>Color converter<\/h2>\n            <p>Convert, preview and copy color values for web, documentation and maker projects.<\/p>\n          <\/div>\n        <\/div>\n\n        <div class=\"ccw-shell\">\n          <div class=\"ccw-sidebar\" role=\"navigation\" aria-label=\"Color conversion navigation\">\n            <button type=\"button\" class=\"ccw-nav\" data-tab=\"converter\"><span>Color conversion<\/span><\/button>\n            <button type=\"button\" class=\"ccw-nav\" data-tab=\"wheel\"><span>Color wheel<\/span><\/button>\n            <button type=\"button\" class=\"ccw-nav\" data-tab=\"guide\"><span>Formats & notes<\/span><\/button>\n          <\/div>\n\n          <div class=\"ccw-main\" role=\"region\" aria-label=\"Color conversion content\">\n            <section class=\"ccw-panel\" data-tab=\"converter\">\n              <h3>Color conversion<\/h3>\n              <p class=\"ccw-sub\">Convert colors between HEX, RGB, HSL, HSV, HWB, CMYK and common CSS formats.<\/p>\n\n              <div class=\"ccw-card\">\n                <div class=\"ccw-row ccw-row-top\">\n                  <div class=\"ccw-field ccw-field-format\">\n                    <label>Input format<\/label>\n                    <select class=\"ccw-input-format\" aria-label=\"Select color input format\">\n                      <option value=\"auto\" selected>Auto detect<\/option>\n                      <option value=\"hex\">HEX \/ HEXA<\/option>\n                      <option value=\"rgb\">RGB \/ RGBA<\/option>\n                      <option value=\"hsl\">HSL \/ HSLA<\/option>\n                      <option value=\"hsv\">HSV \/ HSB<\/option>\n                      <option value=\"hwb\">HWB<\/option>\n                      <option value=\"cmyk\">CMYK<\/option>\n                      <option value=\"decimal\">Decimal<\/option>\n                      <option value=\"css\">CSS name \/ value<\/option>\n                    <\/select>\n                    <div class=\"ccw-small ccw-input-format-help\">Auto detects common color formats.<\/div>\n                  <\/div>\n\n                  <div class=\"ccw-field ccw-field-grow\">\n                    <label>Color input<\/label>\n                    <input class=\"ccw-input\" type=\"text\" value=\"#2563eb\" spellcheck=\"false\" autocomplete=\"off\" placeholder=\"#2563eb, rgb(37 99 235), hsl(221 83% 53%), cmyk(84% 58% 0% 8%)\" \/>\n                    <div class=\"ccw-small ccw-input-help\">Supported: HEX, HEXA, RGB(A), HSL(A), HSV\/HSB, HWB, CMYK, decimal and browser-supported CSS color names.<\/div>\n                  <\/div>\n\n                  <div class=\"ccw-field\">\n                    <label>Native color picker<\/label>\n                    <input class=\"ccw-native\" type=\"color\" value=\"#2563eb\" \/>\n                  <\/div>\n\n                  <div class=\"ccw-field ccw-field-alpha\">\n                    <label>Alpha<\/label>\n                    <input class=\"ccw-alpha\" type=\"range\" min=\"0\" max=\"100\" step=\"1\" value=\"100\" \/>\n                    <div class=\"ccw-small ccw-alpha-label\">100%<\/div>\n                  <\/div>\n                <\/div>\n\n                <div class=\"ccw-swatch-panel\" aria-label=\"Quick color presets\">\n                  <span>Quick colors<\/span>\n                  <div class=\"ccw-swatch-grid\">\n                    <button type=\"button\" class=\"ccw-swatch\" data-color=\"#00395F\" style=\"--swatch-color:#00395F\"><span>ElektroBox blue<\/span><\/button>\n                    <button type=\"button\" class=\"ccw-swatch\" data-color=\"#006C9C\" style=\"--swatch-color:#006C9C\"><span>Ocean blue<\/span><\/button>\n                    <button type=\"button\" class=\"ccw-swatch\" data-color=\"#0EA5C6\" style=\"--swatch-color:#0EA5C6\"><span>Cyan accent<\/span><\/button>\n                    <button type=\"button\" class=\"ccw-swatch\" data-color=\"#0F172A\" style=\"--swatch-color:#0F172A\"><span>Dark text<\/span><\/button>\n                    <button type=\"button\" class=\"ccw-swatch\" data-color=\"#F97316\" style=\"--swatch-color:#F97316\"><span>Orange marker<\/span><\/button>\n                    <button type=\"button\" class=\"ccw-swatch\" data-color=\"#22C55E\" style=\"--swatch-color:#22C55E\"><span>Signal green<\/span><\/button>\n                  <\/div>\n                <\/div>\n\n                <div class=\"ccw-row ccw-row-actions\">\n                  <button type=\"button\" class=\"ccw-btn ccw-copy-main\">Copy HEX<\/button>\n                  <button type=\"button\" class=\"ccw-btn ccw-copy-css\">Copy CSS RGB<\/button>\n                  <button type=\"button\" class=\"ccw-btn ccw-btn-ghost ccw-reset\">Reset<\/button>\n                <\/div>\n\n                <div class=\"ccw-hint ccw-status\" aria-live=\"polite\">Ready.<\/div>\n              <\/div>\n\n              <div class=\"ccw-grid-main\">\n                <div class=\"ccw-card ccw-preview-card\">\n                  <h4 class=\"ccw-h4\">Preview<\/h4>\n                  <div class=\"ccw-preview-wrap\">\n                    <div class=\"ccw-preview\" aria-label=\"Selected color preview\"><\/div>\n                    <div class=\"ccw-preview-meta\">\n                      <div class=\"ccw-preview-title\">Selected color<\/div>\n                      <div class=\"ccw-preview-value\">#2563EB<\/div>\n                      <div class=\"ccw-small\">The checkerboard background shows transparency when alpha is below 100%.<\/div>\n                    <\/div>\n                  <\/div>\n\n                  <div class=\"ccw-contrast-grid\">\n                    <div class=\"ccw-contrast-card ccw-contrast-white\">\n                      <span>Contrast on white<\/span>\n                      <strong class=\"ccw-contrast-white-value\">\u2013<\/strong>\n                    <\/div>\n                    <div class=\"ccw-contrast-card ccw-contrast-black\">\n                      <span>Contrast on black<\/span>\n                      <strong class=\"ccw-contrast-black-value\">\u2013<\/strong>\n                    <\/div>\n                  <\/div>\n                <\/div>\n\n                <div class=\"ccw-card\">\n                  <h4 class=\"ccw-h4\">Results<\/h4>\n                  <div class=\"ccw-results\" aria-label=\"Converted color results\">\n                    <div class=\"ccw-result\" data-copy=\"hex\"><span>HEX<\/span><code class=\"ccw-out-hex\">#2563EB<\/code><button type=\"button\">Copy<\/button><\/div>\n                    <div class=\"ccw-result\" data-copy=\"hex8\"><span>HEXA<\/span><code class=\"ccw-out-hex8\">#2563EBFF<\/code><button type=\"button\">Copy<\/button><\/div>\n                    <div class=\"ccw-result\" data-copy=\"rgb\"><span>RGB<\/span><code class=\"ccw-out-rgb\">rgb(37, 99, 235)<\/code><button type=\"button\">Copy<\/button><\/div>\n                    <div class=\"ccw-result\" data-copy=\"rgba\"><span>RGBA<\/span><code class=\"ccw-out-rgba\">rgba(37, 99, 235, 1)<\/code><button type=\"button\">Copy<\/button><\/div>\n                    <div class=\"ccw-result\" data-copy=\"hsl\"><span>HSL<\/span><code class=\"ccw-out-hsl\">hsl(221, 83%, 53%)<\/code><button type=\"button\">Copy<\/button><\/div>\n                    <div class=\"ccw-result\" data-copy=\"hsla\"><span>HSLA<\/span><code class=\"ccw-out-hsla\">hsla(221, 83%, 53%, 1)<\/code><button type=\"button\">Copy<\/button><\/div>\n                    <div class=\"ccw-result\" data-copy=\"hsv\"><span>HSV \/ HSB<\/span><code class=\"ccw-out-hsv\">hsv(221, 84%, 92%)<\/code><button type=\"button\">Copy<\/button><\/div>\n                    <div class=\"ccw-result\" data-copy=\"hwb\"><span>HWB<\/span><code class=\"ccw-out-hwb\">hwb(221 15% 8%)<\/code><button type=\"button\">Copy<\/button><\/div>\n                    <div class=\"ccw-result\" data-copy=\"cmyk\"><span>CMYK<\/span><code class=\"ccw-out-cmyk\">cmyk(84%, 58%, 0%, 8%)<\/code><button type=\"button\">Copy<\/button><\/div>\n                    <div class=\"ccw-result\" data-copy=\"decimal\"><span>Decimal<\/span><code class=\"ccw-out-decimal\">2455019<\/code><button type=\"button\">Copy<\/button><\/div>\n                    <div class=\"ccw-result\" data-copy=\"cssvar\"><span>CSS variable<\/span><code class=\"ccw-out-cssvar\">--color: #2563EB;<\/code><button type=\"button\">Copy<\/button><\/div>\n                  <\/div>\n                <\/div>\n              <\/div>\n            <\/section>\n\n            <section class=\"ccw-panel\" data-tab=\"wheel\">\n              <h3>Continuous color wheel<\/h3>\n              <p class=\"ccw-sub\">Pick a color from a continuous HSV color wheel. Drag inside the wheel to change hue and saturation.<\/p>\n\n              <div class=\"ccw-grid-wheel\">\n                <div class=\"ccw-card ccw-wheel-card\">\n                  <h4 class=\"ccw-h4\">Wheel picker<\/h4>\n                  <div class=\"ccw-wheel-wrap\">\n                    <canvas class=\"ccw-wheel\" width=\"280\" height=\"280\" aria-label=\"Continuous color wheel\"><\/canvas>\n                    <div class=\"ccw-wheel-marker\" aria-hidden=\"true\"><\/div>\n                  <\/div>\n                  <div class=\"ccw-small\">Use mouse, touch or pen input. The wheel updates the conversion results instantly.<\/div>\n                <\/div>\n\n                <div class=\"ccw-card\">\n                  <h4 class=\"ccw-h4\">Wheel controls<\/h4>\n                  <div class=\"ccw-field ccw-field-full\">\n                    <label>Brightness \/ value<\/label>\n                    <input class=\"ccw-value\" type=\"range\" min=\"0\" max=\"100\" step=\"1\" value=\"92\" \/>\n                    <div class=\"ccw-small ccw-value-label\">92%<\/div>\n                  <\/div>\n                  <div class=\"ccw-field ccw-field-full ccw-card-gap-small\">\n                    <label>Alpha<\/label>\n                    <input class=\"ccw-alpha-wheel\" type=\"range\" min=\"0\" max=\"100\" step=\"1\" value=\"100\" \/>\n                    <div class=\"ccw-small ccw-alpha-wheel-label\">100%<\/div>\n                  <\/div>\n                  <div class=\"ccw-wheel-current\">\n                    <div class=\"ccw-preview ccw-preview-small\" aria-label=\"Current wheel color preview\"><\/div>\n                    <div>\n                      <div class=\"ccw-preview-title\">Current wheel selection<\/div>\n                      <div class=\"ccw-wheel-readout\">H 221\u00b0 \u00b7 S 84% \u00b7 V 92%<\/div>\n                    <\/div>\n                  <\/div>\n                  <button type=\"button\" class=\"ccw-btn ccw-card-gap-small ccw-copy-wheel\">Copy selected HEX<\/button>\n                <\/div>\n              <\/div>\n            <\/section>\n\n            <section class=\"ccw-panel\" data-tab=\"guide\">\n              <h3>Formats & notes<\/h3>\n              <div class=\"ccw-card\">\n                <p class=\"ccw-text\"><strong>Input format:<\/strong> use Auto detect or select a specific input syntax such as HEX, RGB, HSL, HSV, HWB, CMYK, Decimal or CSS name\/value. When a format is selected, the input field is formatted in that syntax.<\/p>\n                <p class=\"ccw-text\"><strong>HEX \/ HEXA:<\/strong> common web color notation. HEXA adds an alpha channel at the end, for example <code>#2563EBCC<\/code>.<\/p>\n                <p class=\"ccw-text\"><strong>RGB \/ HSL \/ HSV \/ HWB:<\/strong> useful for CSS, design systems and color tuning. HSV is used by the continuous color wheel.<\/p>\n                <p class=\"ccw-text\"><strong>CMYK:<\/strong> calculated as a simple digital conversion. Print production can require calibrated ICC profiles, so CMYK values here should be treated as a practical estimate.<\/p>\n                <p class=\"ccw-text\"><strong>Privacy:<\/strong> all conversion happens in the visitor\u2019s browser. The plugin does not send color inputs to your server.<\/p>\n              <\/div>\n            <\/section>\n          <\/div>\n        <\/div>\n      <\/div>\n    <\/div>\n    \n            <div class=\"ccw-layout__below\" aria-label=\"Tool information\">\n              <aside class=\"ccw-side-card\">\n                <h2>Best for<\/h2>\n                <ul>\n                  <li>Converting HEX, RGB, HSL, HSV, HWB, CMYK and decimal color values<\/li>\n                  <li>Preparing CSS colors and variables for websites<\/li>\n                  <li>Checking contrast before using text or UI colors<\/li>\n                  <li>Picking colors for displays, LED projects and interface mockups<\/li>\n                <\/ul>\n              <\/aside>\n\n              <aside class=\"ccw-side-card ccw-side-card--soft\">\n                <h2>Before using a color<\/h2>\n                <p>\n                  For web design, check contrast against the real background. For print, treat CMYK as an approximate digital conversion because print production often depends on calibrated ICC profiles, paper and the printing process.\n                <\/p>\n              <\/aside>\n            <\/div>\n\n            <section class=\"ccw-content-section\" aria-labelledby=\"ccw-how-title\">\n              <p class=\"ccw-kicker\">How to use it<\/p>\n              <h2 id=\"ccw-how-title\">Convert colors and copy the format you need<\/h2>\n              <p>\n                Enter a color value or select one with the native picker. The converter updates all common output formats immediately, including HEXA with alpha, CSS RGB\/RGBA, HSL\/HSLA, HSV\/HSB, HWB, CMYK, decimal and a ready-to-copy CSS variable.\n              <\/p>\n              <div class=\"ccw-info-grid\">\n                <article>\n                  <h3>Enter or paste<\/h3>\n                  <p>Use auto-detection for common values such as <code>#00395F<\/code>, <code>rgb(0 57 95)<\/code> or <code>hsl(204 100% 19%)<\/code>.<\/p>\n                <\/article>\n                <article>\n                  <h3>Preview and compare<\/h3>\n                  <p>The preview panel shows the selected color and gives a quick contrast ratio on white and black backgrounds.<\/p>\n                <\/article>\n                <article>\n                  <h3>Copy the output<\/h3>\n                  <p>Use the copy buttons to transfer the exact value into CSS, WordPress blocks, documentation or embedded display code.<\/p>\n                <\/article>\n              <\/div>\n            <\/section>\n\n            <section class=\"ccw-content-section\" aria-labelledby=\"ccw-format-title\">\n              <p class=\"ccw-kicker\">Format guide<\/p>\n              <h2 id=\"ccw-format-title\">Which color format should you use?<\/h2>\n              <div class=\"ccw-example-grid\">\n                <article class=\"ccw-example-card\">\n                  <span>HEX \/ HEXA<\/span>\n                  <code>#00395F<\/code>\n                  <p>Compact and common in web design. HEXA adds transparency with an extra alpha channel.<\/p>\n                <\/article>\n                <article class=\"ccw-example-card\">\n                  <span>RGB \/ HSL<\/span>\n                  <code>rgb(0, 57, 95)<\/code>\n                  <p>Useful in CSS. HSL is often easier when adjusting hue, saturation or lightness manually.<\/p>\n                <\/article>\n                <article class=\"ccw-example-card\">\n                  <span>HSV \/ CMYK<\/span>\n                  <code>hsv(204, 100%, 37%)<\/code>\n                  <p>HSV is practical for color pickers and LEDs. CMYK is a digital estimate for print workflows.<\/p>\n                <\/article>\n              <\/div>\n            <\/section>\n\n            <section class=\"ccw-content-section\" aria-labelledby=\"ccw-faq-title\">\n              <p class=\"ccw-kicker\">FAQ<\/p>\n              <h2 id=\"ccw-faq-title\">Color converter questions<\/h2>\n              <details class=\"ccw-faq\">\n                <summary>Are colors sent to the server?<\/summary>\n                <p>No. The conversion runs in the visitor\u2019s browser and does not need to upload color values to WordPress.<\/p>\n              <\/details>\n              <details class=\"ccw-faq\">\n                <summary>Why can CMYK values differ from print software?<\/summary>\n                <p>This tool calculates a simple digital CMYK approximation. Professional print output can vary because it depends on ICC profiles, ink, paper and printer calibration.<\/p>\n              <\/details>\n              <details class=\"ccw-faq\">\n                <summary>What does the alpha slider do?<\/summary>\n                <p>Alpha controls transparency. A value of 100% is fully opaque; lower values are exported in formats such as RGBA or HEXA.<\/p>\n              <\/details>\n            <\/section>\n          <\/main>\n        <\/div>\n      <\/section>\n    \n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-856134","page","type-page","status-publish","hentry"],"blocksy_meta":{"styles_descriptor":{"styles":{"desktop":"","tablet":"","mobile":""},"google_fonts":[],"version":7}},"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v28.1 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Color Conversion - ElektroBox<\/title>\n<meta name=\"description\" content=\"Use this color conversion tool to convert HEX, RGB, HSL and CMYK values directly in your browser. Preview colors, copy values and create clean color formats for web design, electronics and UI projects.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/elektrobox.ch\/index.php\/color-conversion\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Color Conversion - ElektroBox\" \/>\n<meta property=\"og:description\" content=\"Use this color conversion tool to convert HEX, RGB, HSL and CMYK values directly in your browser. Preview colors, copy values and create clean color formats for web design, electronics and UI projects.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/elektrobox.ch\/index.php\/color-conversion\/\" \/>\n<meta property=\"og:site_name\" content=\"ElektroBox\" \/>\n<meta property=\"article:modified_time\" content=\"2026-06-07T14:30:11+00:00\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/elektrobox.ch\\\/index.php\\\/color-conversion\\\/\",\"url\":\"https:\\\/\\\/elektrobox.ch\\\/index.php\\\/color-conversion\\\/\",\"name\":\"Color Conversion - ElektroBox\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/elektrobox.ch\\\/#website\"},\"datePublished\":\"2026-05-20T17:16:55+00:00\",\"dateModified\":\"2026-06-07T14:30:11+00:00\",\"description\":\"Use this color conversion tool to convert HEX, RGB, HSL and CMYK values directly in your browser. Preview colors, copy values and create clean color formats for web design, electronics and UI projects.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/elektrobox.ch\\\/index.php\\\/color-conversion\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/elektrobox.ch\\\/index.php\\\/color-conversion\\\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/elektrobox.ch\\\/index.php\\\/color-conversion\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/elektrobox.ch\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Color Conversion\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/elektrobox.ch\\\/#website\",\"url\":\"https:\\\/\\\/elektrobox.ch\\\/\",\"name\":\"ElektroBox\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\\\/\\\/elektrobox.ch\\\/#\\\/schema\\\/person\\\/878bd55e17d9d0b1a53523fa5e90f6b2\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/elektrobox.ch\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\\\/\\\/elektrobox.ch\\\/#\\\/schema\\\/person\\\/878bd55e17d9d0b1a53523fa5e90f6b2\",\"name\":\"Jacob Jarosz\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/elektrobox.ch\\\/wp-content\\\/uploads\\\/2026\\\/05\\\/Logo_Color-Kopie-scaled.png\",\"url\":\"https:\\\/\\\/elektrobox.ch\\\/wp-content\\\/uploads\\\/2026\\\/05\\\/Logo_Color-Kopie-scaled.png\",\"contentUrl\":\"https:\\\/\\\/elektrobox.ch\\\/wp-content\\\/uploads\\\/2026\\\/05\\\/Logo_Color-Kopie-scaled.png\",\"width\":2560,\"height\":2560,\"caption\":\"Jacob Jarosz\"},\"logo\":{\"@id\":\"https:\\\/\\\/elektrobox.ch\\\/wp-content\\\/uploads\\\/2026\\\/05\\\/Logo_Color-Kopie-scaled.png\"},\"sameAs\":[\"http:\\\/\\\/elektrobox.ch\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Color Conversion - ElektroBox","description":"Use this color conversion tool to convert HEX, RGB, HSL and CMYK values directly in your browser. Preview colors, copy values and create clean color formats for web design, electronics and UI projects.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/elektrobox.ch\/index.php\/color-conversion\/","og_locale":"en_US","og_type":"article","og_title":"Color Conversion - ElektroBox","og_description":"Use this color conversion tool to convert HEX, RGB, HSL and CMYK values directly in your browser. Preview colors, copy values and create clean color formats for web design, electronics and UI projects.","og_url":"https:\/\/elektrobox.ch\/index.php\/color-conversion\/","og_site_name":"ElektroBox","article_modified_time":"2026-06-07T14:30:11+00:00","twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/elektrobox.ch\/index.php\/color-conversion\/","url":"https:\/\/elektrobox.ch\/index.php\/color-conversion\/","name":"Color Conversion - ElektroBox","isPartOf":{"@id":"https:\/\/elektrobox.ch\/#website"},"datePublished":"2026-05-20T17:16:55+00:00","dateModified":"2026-06-07T14:30:11+00:00","description":"Use this color conversion tool to convert HEX, RGB, HSL and CMYK values directly in your browser. Preview colors, copy values and create clean color formats for web design, electronics and UI projects.","breadcrumb":{"@id":"https:\/\/elektrobox.ch\/index.php\/color-conversion\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/elektrobox.ch\/index.php\/color-conversion\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/elektrobox.ch\/index.php\/color-conversion\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/elektrobox.ch\/"},{"@type":"ListItem","position":2,"name":"Color Conversion"}]},{"@type":"WebSite","@id":"https:\/\/elektrobox.ch\/#website","url":"https:\/\/elektrobox.ch\/","name":"ElektroBox","description":"","publisher":{"@id":"https:\/\/elektrobox.ch\/#\/schema\/person\/878bd55e17d9d0b1a53523fa5e90f6b2"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/elektrobox.ch\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":["Person","Organization"],"@id":"https:\/\/elektrobox.ch\/#\/schema\/person\/878bd55e17d9d0b1a53523fa5e90f6b2","name":"Jacob Jarosz","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elektrobox.ch\/wp-content\/uploads\/2026\/05\/Logo_Color-Kopie-scaled.png","url":"https:\/\/elektrobox.ch\/wp-content\/uploads\/2026\/05\/Logo_Color-Kopie-scaled.png","contentUrl":"https:\/\/elektrobox.ch\/wp-content\/uploads\/2026\/05\/Logo_Color-Kopie-scaled.png","width":2560,"height":2560,"caption":"Jacob Jarosz"},"logo":{"@id":"https:\/\/elektrobox.ch\/wp-content\/uploads\/2026\/05\/Logo_Color-Kopie-scaled.png"},"sameAs":["http:\/\/elektrobox.ch"]}]}},"_links":{"self":[{"href":"https:\/\/elektrobox.ch\/index.php\/wp-json\/wp\/v2\/pages\/856134","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/elektrobox.ch\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/elektrobox.ch\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/elektrobox.ch\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/elektrobox.ch\/index.php\/wp-json\/wp\/v2\/comments?post=856134"}],"version-history":[{"count":4,"href":"https:\/\/elektrobox.ch\/index.php\/wp-json\/wp\/v2\/pages\/856134\/revisions"}],"predecessor-version":[{"id":856424,"href":"https:\/\/elektrobox.ch\/index.php\/wp-json\/wp\/v2\/pages\/856134\/revisions\/856424"}],"wp:attachment":[{"href":"https:\/\/elektrobox.ch\/index.php\/wp-json\/wp\/v2\/media?parent=856134"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}