Hello firends wellcome to edusynth.in - If you're looking for reliable and easy-to-use tools for color conversion and gradient creation, you're in the right place. These tools are designed with front-end developers and designers in mind, offering clean interfaces and instant results.
Both the Color Code Converter and the CSS Linear Gradient Generator are fully functional tools built using lightweight HTML, CSS, and JavaScript. They are 100% browser-based, so there's no need for installation or heavy software.
You can easily access, customize, and reuse these tools in your own web projects. The source code is openly shared to help developers learn and integrate similar functionality into their workflow. Whether you're working on a small UI design or a large-scale website, these tools can save time and improve visual consistency.
Table of Contents
Color Code Converter (HEX, RGB, HSL) Tool source code
Why Use It?
Color formats play a key role in web design. Common formats include HEX, RGB, and HSL. Each has its own use depending on the design or coding context.
Sometimes, you get a HEX code from design software, but CSS properties might require RGB or HSL. That’s when a converter becomes essential.
Benefits
- Instant switching between
HEX,RGB, andHSL - Reduces manual work and color errors
- One-click copy feature for output
- Responsive layout for mobile and desktop
How to Use:
- Enter your color code in the input field (like
#ff5733orrgb(255,87,51)) - Select input and output format
- Click
Convertvand copy your result
HTML Section:
<div class="tool_container">
<div class="input-row">
<div class="input-group">
<label class="input-label">Enter Color</label>
<input type="text" id="colorInput" class="text-input" placeholder="#2a9d90 or rgb(42, 157, 144)">
</div>
<input type="color" id="colorPicker" onchange="pickColor(this.value)">
</div>
<div id="colorPreview"></div>
<div class="convert-row">
<select id="outputFormat" class="select-input">
<option value="hex">HEX</option>
<option value="rgb">RGB</option>
<option value="hsl">HSL</option>
</select>
<button class="convert-button" onclick="handleConvert()">Convert</button>
</div>
<div id="errorMsg" class="error" style="display:none;"></div>
<div class="result-row">
<textarea id="result" readonly></textarea>
<button class="copy-btn" onclick="copyResult()">Copy</button>
</div>
</div>CSS Section:
.tool_container{background-color:#f5f7fa;padding:25px;border-radius:12px;box-shadow:0 4px 15px rgba(0,0,0,0.1);max-width:450px;margin:0 auto;font-family:'Segoe UI',Tahoma,Geneva,Verdana,sans-serif}
.input-row{display:flex;align-items:center;gap:15px;margin-bottom:20px}
.input-group{flex:1}
.input-label{display:block;margin-bottom:8px;font-weight:600;color:#333;font-size:14px}
.text-input{width:100%;padding:10px 12px;border:1px solid #ddd;border-radius:6px;font-size:14px;transition:border 0.3s}
.text-input:focus{border-color:#4caf50;outline:none}
#colorPicker{width:40px;height:40px;border:2px solid #ddd;border-radius:6px;cursor:pointer;margin-top:38px}
#colorPreview{height:80px;width:100%;margin:15px 0;border-radius:6px;border:2px solid #ddd;transition:all 0.3s}
.convert-row{display:flex;align-items:center;gap:10px;margin-bottom:20px}
.select-input{flex:1;padding:10px 12px;border:1px solid #ddd;border-radius:6px;background-color:white;font-size:14px}
.convert-button{background-color:#4caf50;color:white;padding:10px 20px;border:none;border-radius:6px;cursor:pointer;font-size:14px;font-weight:600;transition:background-color 0.3s;white-space:nowrap}
.convert-button:hover{background-color:#3d8b40}
.result-row{display:flex;align-items:center;gap:10px;margin-top:15px}
#result{flex:1;padding:10px 12px;border:1px solid #ddd;border-radius:6px;font-size:14px;resize:none;min-height:40px}
.copy-btn{background-color:#2196F3;color:white;border:none;padding:10px 15px;border-radius:6px;cursor:pointer;font-size:14px;transition:background-color 0.3s;white-space:nowrap}
.copy-btn:hover{background-color:#0b7dda}
.simple-text{font-size:13px;color:#666;margin-left:5px}
.error{margin-top:8px;color:#e74c3c;font-size:13px;background:#fdecea;border:1px solid #f5c2c7;padding:6px 10px;border-radius:4px;max-width:300px;animation:fadeIn 0.3s ease-in-out}
@keyframes fadeIn{from{opacity:0;transform:translateY(-3px)}to{opacity:1;transform:translateY(0)}}JavaScript Section:
function pickColor(hex) {
document.getElementById('colorInput').value = hex;
document.getElementById('colorPreview').style.backgroundColor = hex;
}
function detectColorFormat(color) {
if (/^#([A-Fa-f0-9]{3}){1,2}$/.test(color)) return "hex";
if (/^rgb/i.test(color)) return "rgb";
if (/^hsl/i.test(color)) return "hsl";
return null;
}
function hexToRgb(hex) {
let r, g, b;
if (hex.length === 4) {
r = parseInt(hex[1]+hex[1], 16);
g = parseInt(hex[2]+hex[2], 16);
b = parseInt(hex[3]+hex[3], 16);
} else {
r = parseInt(hex[1]+hex[2], 16);
g = parseInt(hex[3]+hex[4], 16);
b = parseInt(hex[5]+hex[6], 16);
}
return `rgb(${r}, ${g}, ${b})`;
}
function rgbToHex(rgb) {
const [r, g, b] = rgb.match(/\d+/g).map(Number);
return "#" + [r, g, b].map(x => x.toString(16).padStart(2, '0')).join('');
}
function rgbToHsl(rgb) {
const [r, g, b] = rgb.match(/\d+/g).map(x => x / 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)); break;
case g: h = ((b - r) / d + 2); break;
case b: h = ((r - g) / d + 4); break;
}
h *= 60;
}
return `hsl(${Math.round(h)}, ${Math.round(s*100)}%, ${Math.round(l*100)}%)`;
}
function hslToRgb(hsl) {
const [h, s, l] = hsl.match(/\d+/g).map(Number);
const sat = s / 100, light = l / 100;
const c = (1 - Math.abs(2 * light - 1)) * sat;
const x = c * (1 - Math.abs((h / 60) % 2 - 1));
const m = light - c / 2;
let r=0, g=0, b=0;
if (h < 60) [r, g, b] = [c, x, 0];
else if (h < 120) [r, g, b] = [x, c, 0];
else if (h < 180) [r, g, b] = [0, c, x];
else if (h < 240) [r, g, b] = [0, x, c];
else if (h < 300) [r, g, b] = [x, 0, c];
else [r, g, b] = [c, 0, x];
const to255 = x => Math.round((x + m) * 255);
return `rgb(${to255(r)}, ${to255(g)}, ${to255(b)})`;
}
function convertColor(input, from, to) {
if (from === "hex") {
const rgb = hexToRgb(input);
return to === "rgb" ? rgb : rgbToHsl(rgb);
} else if (from === "rgb") {
return to === "hex" ? rgbToHex(input) : rgbToHsl(input);
} else if (from === "hsl") {
const rgb = hslToRgb(input);
return to === "hex" ? rgbToHex(rgb) : rgb;
}
}
function showError(msg) {
const err = document.getElementById('errorMsg');
err.innerText = msg;
err.style.display = 'block';
setTimeout(() => { err.style.display = 'none'; }, 3000);
}
function handleConvert() {
const colorInput = document.getElementById('colorInput').value.trim();
const outputFormat = document.getElementById('outputFormat').value;
const detectedFormat = detectColorFormat(colorInput);
if (colorInput && detectedFormat) {
if (detectedFormat !== outputFormat) {
const result = convertColor(colorInput, detectedFormat, outputFormat);
document.getElementById('result').value = result;
document.getElementById('colorPreview').style.backgroundColor = (outputFormat === "hex") ? result : (outputFormat === "rgb") ? result : hslToRgb(result);
} else {
showError("Please select a different output format than the input format.");
}
} else {
showError("Please enter a valid color code.");
}
}
function copyResult() {
const result = document.getElementById('result');
result.select();
document.execCommand("copy");
}View If you want to see how this tool looks and works, just click the demo button below.
Color Code Converter:
The code for the Color Code Converter is fully optimized and works perfectly. All HTML, CSS, and JavaScript parts are correctly configured. You don’t need to modify anything — simply copy and use it as it is.
CSS Linear Gradient Generator source code
Why Use It?
Gradients are a key element in modern web design. They add depth, style, and a professional feel to backgrounds, buttons, and banners.
Manually writing linear-gradient code can be tricky. It involves choosing the right color combination, direction, and syntax — even small mistakes can break your layout.
Benefits
- Real-time gradient preview with direction control
- One-click copy for instantly usable
CSS code - Responsive UI for desktop and mobile
- Supports top, bottom, left, right, and diagonal angles
How to Use:
- Choose your two preferred colors using the color pickers
- Select the desired gradient direction
- Copy the
generated CSSand paste it into your design
HTML Section:
<div class="wrapper">
<div class="gradient-box"></div>
<div class="row options">
<div class="column direction">
<p>Direction</p>
<div class="select-box">
<select>
<option value="to top">Top</option>
<option value="to right top">Right top</option>
<option value="to right">Right</option>
<option value="to right bottom">Right bottom</option>
<option value="to bottom">Bottom</option>
<option value="to left bottom">Left bottom</option>
<option value="to left">Left</option>
<option selected="" value="to left top">Left top</option>
</select>
</div>
</div>
<div class="column palette">
<p>Colors</p>
<div class="colors">
<input type="color" value="#5665E9" />
<input type="color" value="#A271F8" />
</div>
</div>
</div>
<textarea class="row" disabled="">background-image: linear-gradient(to left top, #977DFE, #6878FF);</textarea>
<div class="row buttons">
<button class="refresh">Refresh Colors</button>
<button class="copy">Copy Code</button>
</div>
</div>CSS Section:
.wrapper{padding:25px;background:#fff;border-radius:7px;box-shadow:0 15px 30px rgba(0,0,0,0.06)}
.wrapper .gradient-box{height:220px;width:100%;border-radius:7px;background:linear-gradient(to left top,#5665E9,#A271F8)}
.wrapper .row{display:flex;margin:20px 0;justify-content:space-between}
.options p{font-size:1.1rem;margin-bottom:8px}
.row:where(.column,button){width:calc(100% / 2 - 12px)}
.options .select-box{border-radius:5px;padding:10px 15px;border:1px solid #aaa}
.select-box select{width:100%;border:none;outline:none;font-size:1.12rem;background:none}
.options .palette{margin-left:60px}
.palette input{height:41px;width:calc(100% / 2 - 20px)}
.palette input:last-child{margin-left:6px}
.wrapper textarea{width:100%;color:#333;font-size:1.05rem;resize:none;padding:10px 15px;border-radius:5px;border:1px solid #ccc}
.buttons button{padding:15px 0;border:none;outline:none;color:#fff;margin:0 0 -15px;font-size:1.09rem;border-radius:5px;cursor:pointer;transition:0.3s ease}
.buttons .refresh{background:#6C757D}
.buttons .refresh:hover{background:#5f666d}
.buttons .copy{background:#8A6CFF}
.buttons .copy:hover{background:#704dff}
@media screen and (max-width: 432px) {
.wrapper {
padding: 25px 20px;
}
.row :where(.column, button) {
width: calc(100% / 2 - 8px);
}
.options .select-box {
padding: 8px 15px;
}
.options .palette {
margin-left: 40px;
}
.options .colors {
display: flex;
justify-content: space-between;
}
.palette input {
width: calc(100% / 2 - 5px);
}
.palette input:last-child {
margin-left: 0;
}
}JavaScript Section:
const gradientBox = document.querySelector(".gradient-box");
const selectMenu = document.querySelector(".select-box select");
const colorInputs = document.querySelectorAll(".colors input");
const textarea = document.querySelector("textarea");
const refreshBtn = document.querySelector(".refresh");
const copyBtn = document.querySelector(".copy");
const getRandomColor = () => {
const randomHex = Math.floor(Math.random() * 0xffffff).toString(16);
return `#${randomHex}`;
}
const generateGradient = (isRandom) => {
if(isRandom) {
colorInputs[0].value = getRandomColor();
colorInputs[1].value = getRandomColor();
}
const gradient = `linear-gradient(${selectMenu.value}, ${colorInputs[0].value}, ${colorInputs[1].value})`;
gradientBox.style.background = gradient;
textarea.value = `background: ${gradient};`;
}
const copyCode = () => {
navigator.clipboard.writeText(textarea.value);
copyBtn.innerText = "Code Copied";
setTimeout(() => copyBtn.innerText = "Copy Code", 1600);
}
colorInputs.forEach(input => {
input.addEventListener("input", () => generateGradient(false));
});
selectMenu.addEventListener("change", () => generateGradient(false));
refreshBtn.addEventListener("click", () => generateGradient(true));
copyBtn.addEventListener("click", copyCode);View If you want to see how this tool looks and works, just click the demo button below.
CSS Linear Gradient Generator:
This CSS Gradient Generator tool is already well-coded with complete HTML, CSS, and JS. No changes are required. Just use the code directly without any adjustments for smooth functionality.
Download both tool source code
If you want to download the source code for both tools together, simply click the download button below. You’ll get the complete code package instantly.
Note:This content has been created with the help of AI to ensure clarity, readability, and completeness. All information has been reviewed and customized to serve human readers.
What does a color code converter do?
A color code converter allows you to convert colors between HEX, RGB, and HSL formats instantly for web development or design purposes.
Is the CSS gradient generator tool mobile responsive?
Yes, the CSS gradient generator is fully responsive and works smoothly on both mobile and desktop devices.
Can I use these tools without installing anything?
Absolutely! Both tools are browser-based and require no installation or external libraries to function.
Does the converter support invalid color format detection?
Yes, it includes error checking to detect and notify users of incorrect or unsupported color formats.
Related Posts
Final Overview
This two-in-one color utility offers a practical solution for modern web developers and designers. The Color Code Converter ensures fast and accurate switching between HEX, RGB, and HSL formats, while the CSS Gradient Generator simplifies the creation of stylish background gradients.
Both tools are lightweight, mobile-friendly, and require no external libraries or dependencies. Whether you're designing a website or learning front-end development, these tools provide a reliable and efficient way to manage color-related tasks directly in the browser.
