Free Online Decimal to Hex and RGB Color Converter

Project Overview

A professional-grade, browser-based color utility that allows users to input decimal color values and instantly receive valid Hex and RGB outputs. Designed for UI/UX designers and front-end developers, the tool focuses on speed, accuracy, and accessibility.

Core Features

• Live Conversion Engine: Instant calculation as the user types decimal values (e.g., 16777215 to #FFFFFF).
• Dual Conversion Paths: Support for both Decimal-to-Hex and Decimal-to-RGB workflows.
• Real-time Color Preview: A dynamic swatch that updates to show the selected color immediately.
• One-Click Copy: Dedicated copy buttons for each output format with a visual "Copied!" toast notification (built as a custom UI element, no browser alerts).
• Recent History (In-Memory Only): A session-based list of the last 5 conversions, stored in JavaScript variables to respect the no-storage constraint.
• Accessibility Validator: A simple contrast ratio indicator relative to white and black text to ensure usability.

UI/UX Design

• Layout: Centered card-based interface on a clean, light-gray background (#F9FAFB).
• Header: Simple title and clear, descriptive sub-headline.
• Main Tool Area:
  • Large, prominent input field for the decimal number.
  • Results section featuring side-by-side cards for Hex and RGB.
  • Color preview swatch circle with a subtle drop shadow.
• Interaction Design: Smooth CSS transitions on all hover states and input focus states. Micro-animations when buttons are clicked.

Color Palette

• Background: #F9FAFB (Cool Gray 50)
• Primary Blue: #2563EB (Active buttons, focus rings)
• Text: #111827 (Gray 900)
• Surface: #FFFFFF (White cards with soft shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1))
• Success Green: #059669 (For copy confirmation feedback)

Developer Directives & Constraints

• Architecture: Single-file HTML (HTML5 + Tailwind CSS + Vanilla JS).
• Storage: STRICTLY NO localStorage, sessionStorage, or cookies. Use an array variable in JS for the history feature.
• Sandbox Compatibility: Do NOT use alert(), confirm(), or prompt(). All user notifications must be handled by custom HTML modal or toast overlays.
• External Links: All links must include target="_blank" and rel="noopener noreferrer".
• Dependencies: Use CDN links for Tailwind CSS and Feather Icons.
• Responsiveness: Fluid container width; on mobile, stack result cards vertically. On desktop, display horizontally.
• Branding: Absolutely no branding or custom logos. Keep UI strictly functional and clean.