Text Color

Settings

Preview

Generated Code 


      

      
      

       
       
      

     

    

   

  

  
  

   

    

     

      
      
      How To Use
     

     
    
      
  • 
       
        1
       
       
        Adjust the settings in the left panel to customize your component.
       
      
    • 
      
  • 
       
        2
       
       
        View the real-time changes in the "Live Preview" window.
       
      
    • 
      
  • 
       
        3
       
       
        Click "Copy" to copy the generated code or "Download" to save as HTML.
       
      
    • 
      
  • 
       
        4
       
       
        Paste the code into your project's HTML file.
       
      
    • 
     

    

    

     

      
      
      FAQ
     

     

      

       

        Is this tool free?
       

       

        Yes, all tools in our HTML Code Library are 100% free to use for personal and commercial projects.
       

      

      

       

        Do I need to install anything?
       

       

        No installation is required. Everything runs directly in your browser.
       

      

      

       

        Is my data secure?
       

       

        Absolutely. All processing is done client-side. We never store or transmit your data.
       

      

     

    

   

   

    

     

      
      
      Compatibility
     

     

      
      
      
      
      
      
      
      
     

     

      Compatible with all modern browsers.
     

    

    

     

      
      
      Related Tools
     

     

      
       Table Generator
      
      
       Link Generator
      
      
       Color Generator
      
      
       HTML Editor
      
     

    

   

  

  
  
  
  
  
  
  
   \n${$('code-output').textContent}\n
   
   
   
  
  
 

`], { type: 'text/html' });
            const a = document.createElement('a');
            a.href = URL.createObjectURL(blob);
            a.download = 'text-color-code.html';
            a.click();
        });

        $('reset-btn').addEventListener('click', () => {
            $("color-txt").value = "Color"; $("color-val").value = "#ff0000";
            update();

         else {
                $('view-code-btn').classList.remove('active');
                $('edit-code-btn').classList.add('active');
                $('view-container').classList.add('hidden');
                $('edit-container').classList.remove('hidden');
                $('code-edit').value = $('code-output').textContent;
            }
        }

        $('code-edit').addEventListener('input', () => {
            const code = $('code-edit').value;
            $('preview-box').innerHTML = code;
            $('code-output').textContent = code;
        });
        
        });

        function showToast(msg) {
            const t = document.createElement('div');
            t.className = 'toast bg-blue-500 text-white px-4 py-2 rounded-lg text-sm font-medium shadow-lg';
            t.textContent = msg;
            $('toast-container').appendChild(t);
            setTimeout(() => t.remove(), 2500);
        }

        update();

         else {
                $('view-code-btn').classList.remove('active');
                $('edit-code-btn').classList.add('active');
                $('view-container').classList.add('hidden');
                $('edit-container').classList.remove('hidden');
                $('code-edit').value = $('code-output').textContent;
            }
        }

        $('code-edit').addEventListener('input', () => {
            const code = $('code-edit').value;
            $('preview-box').innerHTML = code;
            $('code-output').textContent = code;
        });