Decimal to Hex to Binary Converter
.calc-header {
margin-bottom: 30px;
padding: 25px;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
border-radius: 12px;
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
color: white;
}
.calc-header h2 {
margin-top: 0;
color: white;
font-size: 28px;
margin-bottom: 10px;
}
.calc-header p {
margin: 10px 0;
opacity: 0.95;
font-size: 15px;
}
.input-row {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 15px;
margin-top: 20px;
}
.input-group {
display: flex;
flex-direction: column;
}
.input-group label {
margin-bottom: 8px;
font-weight: 600;
font-size: 14px;
}
.input-group input {
padding: 14px;
font-size: 16px;
border: 2px solid rgba(255,255,255,0.3);
border-radius: 6px;
font-family: 'Courier New', monospace;
background: rgba(255,255,255,0.95);
transition: all 0.3s ease;
}
.input-group input:focus {
outline: none;
border-color: #4CAF50;
background: white;
box-shadow: 0 0 0 3px rgba(76, 175, 80, 0.1);
}
.button-container {
margin-top: 20px;
display: flex;
gap: 10px;
}
.calc-button {
padding: 14px 35px;
font-size: 16px;
background: #4CAF50;
color: white;
border: none;
border-radius: 6px;
cursor: pointer;
font-weight: bold;
transition: all 0.3s ease;
box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}
.calc-button:hover {
background: #45a049;
transform: translateY(-1px);
box-shadow: 0 4px 8px rgba(0,0,0,0.3);
}
.calc-button:active {
background: #3d8b40;
transform: translateY(0);
}
.calc-button.secondary {
background: #666;
}
.calc-button.secondary:hover {
background: #555;
}
.calc-button.secondary:active {
background: #444;
}
.result-section {
background: white;
border: 1px solid #e0e0e0;
border-radius: 8px;
margin-bottom: 15px;
overflow: hidden;
box-shadow: 0 2px 4px rgba(0,0,0,0.05);
transition: all 0.3s ease;
display: none;
}
.result-section.show {
display: block;
}
.result-section:hover {
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}
.section-header {
background: linear-gradient(135deg, #4CAF50 0%, #45a049 100%);
color: white;
padding: 15px 20px;
display: flex;
justify-content: space-between;
align-items: center;
}
.section-header h3 {
margin: 0;
font-size: 18px;
display: flex;
align-items: center;
gap: 10px;
}
.section-header .icon {
font-size: 20px;
}
.section-content {
padding: 20px;
background: #fafafa;
}
.data-row {
display: flex;
margin: 12px 0;
padding: 10px;
background: white;
border-radius: 4px;
border-left: 3px solid #4CAF50;
}
.data-label {
font-weight: bold;
color: #555;
min-width: 180px;
flex-shrink: 0;
}
.data-value {
color: #333;
font-family: 'Courier New', monospace;
word-break: break-word;
font-size: 15px;
}
.data-value.highlight {
color: #4CAF50;
font-weight: bold;
}
.help-text {
margin-top: 15px;
font-size: 14px;
color: rgba(255,255,255,0.9);
background: rgba(0,0,0,0.1);
padding: 10px 15px;
border-radius: 4px;
}
.help-text strong {
color: white;
}
.error {
background: #ffebee;
color: #c62828;
padding: 15px 20px;
border-radius: 8px;
border-left: 4px solid #c62828;
margin: 20px 0;
display: none;
}
.error.show {
display: block;
}
.results-container {
margin-top: 30px;
}
/* Responsive design */
@media (max-width: 768px) {
.input-row {
grid-template-columns: 1fr;
}
.button-container {
flex-direction: column;
}
.calc-button {
width: 100%;
}
.data-row {
flex-direction: column;
}
.data-label {
margin-bottom: 5px;
min-width: auto;
}
}
दशमलव-हेक्स-बाइनरी कनवर्टर
दशमलव, हेक्साडेसिमल और बाइनरी प्रारूपों के बीच संख्याओं को परिवर्तित करें। किसी भी प्रारूप में एक मान दर्ज करें और रूपांतरण देखने के लिए सबमिट पर क्लिक करें।
सुझावों:किसी एक फ़ील्ड में मान दर्ज करें. अन्य फ़ील्ड खाली छोड़ें. रूपांतरण परिणाम नीचे दिखाई देंगे.
🔢दशमलव से परिवर्तित
दशमलव:
हेक्साडेसिमल:
बाइनरी:
🔠हेक्साडेसिमल से परिवर्तित
हेक्साडेसिमल:
दशमलव:
बाइनरी:
💾बाइनरी से परिवर्तित
बाइनरी:
दशमलव:
हेक्साडेसिमल: