Color Code Converter

HEX RGB HSL HWB CMYK NCol Copied to clipboard! const defaultConfig = { background_color: "#0f172a", surface_color: "#1e293b", text_color: "#f1f5f9", primary_action_color: "#3b82f6", secondary_action_color: "#64748b", font_family: "Space Mono", font_size: 16, main_title: "Universal Color Converter", subtitle: "Convert between HEX, RGB, HSL, HWB, CMYK, and NCOL formats instantly" }; let currentColor = { r: 59, g: 130, b: 246 }; // Default blue // Color conversion utilities function hexToRgb(hex) { const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex); return result ? { r: parseInt(result[1], 16), g: parseInt(result[2], 16), b: parseInt(result[3], 16) } : null; } function rgbToHex(r, g, b) { return "#" + [r, g, b].map(x => { const hex = Math.round(x).toString(16); return hex.length === 1 ? "0" + hex : hex; }).join(""); } function rgbToHsl(r, g, b) { r /= 255; g /= 255; b /= 255; const max = Math.max(r, g, b), min = Math.min(r, g, b); let h, s, l = (max + min) / 2; if (max === min) { h = s = 0; } else { const d = max - min; s = l > 0.5 ? d / (2 - max - min) : d / (max + min); switch (max) { case r: h = ((g - b) / d + (g < b ? 6 : 0)) / 6; break; case g: h = ((b - r) / d + 2) / 6; break; case b: h = ((r - g) / d + 4) / 6; break; } } return { h: Math.round(h * 360), s: Math.round(s * 100), l: Math.round(l * 100) }; } function hslToRgb(h, s, l) { h /= 360; s /= 100; l /= 100; let r, g, b; if (s === 0) { r = g = b = l; } else { const hue2rgb = (p, q, t) => { if (t 1) t -= 1; if (t < 1/6) return p + (q - p) * 6 * t; if (t < 1/2) return q; if (t < 2/3) return p + (q - p) * (2/3 - t) * 6; return p; }; const q = l < 0.5 ? l * (1 + s) : l + s - l * s; const p = 2 * l - q; r = hue2rgb(p, q, h + 1/3); g = hue2rgb(p, q, h); b = hue2rgb(p, q, h - 1/3); } return { r: Math.round(r * 255), g: Math.round(g * 255), b: Math.round(b * 255) }; } function rgbToHwb(r, g, b) { const hsl = rgbToHsl(r, g, b); const w = Math.min(r, g, b) / 255 * 100; const bl = 100 - Math.max(r, g, b) / 255 * 100; return { h: hsl.h, w: Math.round(w), b: Math.round(bl) }; } function hwbToRgb(h, w, bl) { w /= 100; bl /= 100; if (w + bl >= 1) { const gray = Math.round(w / (w + bl) * 255); return { r: gray, g: gray, b: gray }; } const rgb = hslToRgb(h, 100, 50); const r = rgb.r / 255; const g = rgb.g / 255; const b = rgb.b / 255; return { r: Math.round((r * (1 - w - bl) + w) * 255), g: Math.round((g * (1 - w - bl) + w) * 255), b: Math.round((b * (1 - w - bl) + w) * 255) }; } function rgbToCmyk(r, g, b) { let c = 1 - (r / 255); let m = 1 - (g / 255); let y = 1 - (b / 255); let k = Math.min(c, m, y); if (k === 1) { c = m = y = 0; } else { c = (c - k) / (1 - k); m = (m - k) / (1 - k); y = (y - k) / (1 - k); } return { c: Math.round(c * 100), m: Math.round(m * 100), y: Math.round(y * 100), k: Math.round(k * 100) }; } function cmykToRgb(c, m, y, k) { c /= 100; m /= 100; y /= 100; k /= 100; return { r: Math.round(255 * (1 - c) * (1 - k)), g: Math.round(255 * (1 - m) * (1 - k)), b: Math.round(255 * (1 - y) * (1 - k)) }; } function rgbToNcol(r, g, b) { const hsl = rgbToHsl(r, g, b); const h = hsl.h; const whiteness = Math.round(hsl.l > 50 ? (2 * hsl.l - hsl.s * hsl.l / 50 - 100) : (hsl.s * hsl.l / 50)); const blackness = Math.round(100 - hsl.l - whiteness); const whi1 = Math.round(Math.min(r, g, b) / 255 * 100); const bla1 = 100 - Math.round(Math.max(r, g, b) / 255 * 100); let hue; if (h >= 0 && h = 60 && h = 120 && h = 180 && h = 240 && h < 300) hue = `B${Math.round((h - 240) / 60 * 100)}`; else hue = `M${Math.round((h - 300) / 60 * 100)}`; return { hue, w: Math.max(0, whiteness), b: Math.max(0, blackness) }; } function ncolToRgb(hue, w, bl) { const letter = hue[0]; const percent = parseInt(hue.slice(1)); const hueMap = { R: 0, Y: 60, G: 120, C: 180, B: 240, M: 300 }; const baseHue = hueMap[letter]; const h = baseHue + (percent / 100) * 60; const l = (100 - bl - w) / 2 + w; const s = l === 0 || l === 100 ? 0 : ((100 - bl - w) / (l { toast.classList.add('hidden'); }, 2000); } async function onConfigChange(config) { const baseSize = config.font_size || defaultConfig.font_size; const customFont = config.font_family || defaultConfig.font_family; const baseFontStack = 'monospace'; const bodyFontStack = 'sans-serif'; const backgroundColor = config.background_color || defaultConfig.background_color; const surfaceColor = config.surface_color || defaultConfig.surface_color; const textColor = config.text_color || defaultConfig.text_color; const primaryActionColor = config.primary_action_color || defaultConfig.primary_action_color; const secondaryActionColor = config.secondary_action_color || defaultConfig.secondary_action_color; document.getElementById('app-wrapper').style.backgroundColor = backgroundColor; document.getElementById('app-wrapper').style.color = textColor; document.getElementById('main-title').textContent = config.main_title || defaultConfig.main_title; document.getElementById('main-title').style.fontSize = `${baseSize * 2}px`; document.getElementById('main-title').style.color = textColor; document.getElementById('main-title').style.fontFamily = `${customFont}, ${baseFontStack}`; document.getElementById('subtitle').textContent = config.subtitle || defaultConfig.subtitle; document.getElementById('subtitle').style.fontSize = `${baseSize}px`; document.getElementById('subtitle').style.color = textColor; document.getElementById('subtitle').style.fontFamily = `${customFont}, ${bodyFontStack}`; document.querySelectorAll('.color-input-wrapper').forEach(wrapper => { wrapper.style.backgroundColor = surfaceColor; }); document.querySelectorAll('.format-label').forEach(label => { label.style.fontSize = `${baseSize * 0.75}px`; label.style.color = textColor; label.style.fontFamily = `${customFont}, ${baseFontStack}`; }); document.querySelectorAll('.color-input').forEach(input => { input.style.backgroundColor = backgroundColor; input.style.borderColor = secondaryActionColor; input.style.color = textColor; input.style.fontSize = `${baseSize * 0.875}px`; input.style.fontFamily = `${customFont}, ${baseFontStack}`; }); document.querySelectorAll('.copy-button').forEach(button => { button.style.backgroundColor = primaryActionColor; button.style.fontSize = `${baseSize * 0.875}px`; }); document.getElementById('toast').style.backgroundColor = primaryActionColor; document.getElementById('toast').style.color = textColor; document.getElementById('toast').style.fontSize = `${baseSize * 0.875}px`; document.getElementById('toast').style.fontFamily = `${customFont}, ${bodyFontStack}`; } // Event listeners document.getElementById('hex-input').addEventListener('input', (e) => { const hex = e.target.value; if (/^#?[0-9A-Fa-f]{6}$/.test(hex)) { const rgb = hexToRgb(hex); if (rgb) updateAllFormats(rgb); } }); document.getElementById('rgb-input').addEventListener('input', (e) => { const match = e.target.value.match(/rgb$(\d+),\s*(\d+),\s*(\d+)$/); if (match) { updateAllFormats({ r: parseInt(match[1]), g: parseInt(match[2]), b: parseInt(match[3]) }); } }); document.getElementById('hsl-input').addEventListener('input', (e) => { const match = e.target.value.match(/hsl$(\d+),\s*(\d+)%,\s*(\d+)%$/); if (match) { const rgb = hslToRgb(parseInt(match[1]), parseInt(match[2]), parseInt(match[3])); updateAllFormats(rgb); } }); document.getElementById('hwb-input').addEventListener('input', (e) => { const match = e.target.value.match(/hwb$(\d+)\s+(\d+)%\s+(\d+)%$/); if (match) { const rgb = hwbToRgb(parseInt(match[1]), parseInt(match[2]), parseInt(match[3])); updateAllFormats(rgb); } }); document.getElementById('cmyk-input').addEventListener('input', (e) => { const match = e.target.value.match(/cmyk$(\d+)%,\s*(\d+)%,\s*(\d+)%,\s*(\d+)%$/); if (match) { const rgb = cmykToRgb(parseInt(match[1]), parseInt(match[2]), parseInt(match[3]), parseInt(match[4])); updateAllFormats(rgb); } }); document.getElementById('ncol-input').addEventListener('input', (e) => { const match = e.target.value.match(/([RYGCBM]\d+),\s*(\d+)%,\s*(\d+)%/); if (match) { const rgb = ncolToRgb(match[1], parseInt(match[2]), parseInt(match[3])); updateAllFormats(rgb); } }); document.querySelectorAll('.copy-button').forEach(button => { button.addEventListener('click', async () => { const format = button.dataset.format; const input = document.getElementById(`${format}-input`); try { await navigator.clipboard.writeText(input.value); showToast(); } catch (err) { const tempInput = document.createElement('input'); tempInput.value = input.value; document.body.appendChild(tempInput); tempInput.select(); document.execCommand('copy'); document.body.removeChild(tempInput); showToast(); } }); }); // Initialize if (window.elementSdk) { window.elementSdk.init({ defaultConfig, onConfigChange, mapToCapabilities: (config) => ({ recolorables: [ { get: () => config.background_color || defaultConfig.background_color, set: (value) => { config.background_color = value; window.elementSdk.setConfig({ background_color: value }); } }, { get: () => config.surface_color || defaultConfig.surface_color, set: (value) => { config.surface_color = value; window.elementSdk.setConfig({ surface_color: value }); } }, { get: () => config.text_color || defaultConfig.text_color, set: (value) => { config.text_color = value; window.elementSdk.setConfig({ text_color: value }); } }, { get: () => config.primary_action_color || defaultConfig.primary_action_color, set: (value) => { config.primary_action_color = value; window.elementSdk.setConfig({ primary_action_color: value }); } }, { get: () => config.secondary_action_color || defaultConfig.secondary_action_color, set: (value) => { config.secondary_action_color = value; window.elementSdk.setConfig({ secondary_action_color: value }); } } ], borderables: [], fontEditable: { get: () => config.font_family || defaultConfig.font_family, set: (value) => { config.font_family = value; window.elementSdk.setConfig({ font_family: value }); } }, fontSizeable: { get: () => config.font_size || defaultConfig.font_size, set: (value) => { config.font_size = value; window.elementSdk.setConfig({ font_size: value }); } } }), mapToEditPanelValues: (config) => new Map([ ["main_title", config.main_title || defaultConfig.main_title], ["subtitle", config.subtitle || defaultConfig.subtitle] ]) }); onConfigChange(window.elementSdk.config); } updateAllFormats(currentColor); (function(){function c(){var b=a.contentDocument||a.contentWindow.document;if(b){var d=b.createElement('script');d.innerHTML="window.__CF$cv$params={r:'9ba5d89023f63204',t:'MTc2NzgxMzk3Ny4wMDAwMDA='};var a=document.createElement('script');a.nonce='';a.src='/cdn-cgi/challenge-platform/scripts/jsd/main.js';document.getElementsByTagName('head')[0].appendChild(a);";b.getElementsByTagName('head')[0].appendChild(d)}}if(document.body){var a=document.createElement('iframe');a.height=1;a.width=1;a.style.position='absolute';a.style.top=0;a.style.left=0;a.style.border='none';a.style.visibility='hidden';document.body.appendChild(a);if('loading'!==document.readyState)c();else if(window.addEventListener)document.addEventListener('DOMContentLoaded',c);else{var e=document.onreadystatechange||function(){};document.onreadystatechange=function(b){e(b);'loading'!==document.readyState&&(document.onreadystatechange=e,c())}}}})();

Color Code Converter

CMYK, Hex, HSL, HWB, NCol, RGB Code Conversion

EDK-Tech

Leave a Reply Cancel reply

EDK-Tech

Subscribe to our mailing list to get the new updates!

Related Articles

How To Remove WordPress Generator Meta Tags?

How-To Completely Uninstall Joomla! Extension?

Unicode Character Codes

How-to install Drupal in root instead of web directory?

Leave a Reply Cancel reply