A Tiny Hex Colour Swatch

Goal Build a small offline colour card that turns a short hexadecimal colour code into a clear swatch and its decimal RGB values. Deliverable One self-contained offline HTML file, at most 100,000 bytes. One labelled text input and one swatch/result area; no server or build step. Requirements 1. Accept exactly three or six hexadecimal digits, with an optional leading # and optional surrounding whitespace, case-insensitively. Expand shorthand by doubling each digit. Initially show #336699 with R 51, G 102, B 153. 2. Update on input without a submit button. For a valid value, show the swatch, the normalized uppercase six-digit code including #, and three decimal channels in the range 0-255. Use an explicit text label for each channel. 3. For blank or invalid input, show a concise error or empty-state message, mark the input aria-invalid=true and do not show a valid result for that input. Retaining the last valid swatch is allowed only if clearly labelled as the previous value. A subsequent valid input must recover immediately. 4. Correctly handle these checks: abc -> #AABBCC and 170,187,204; #00ff80 -> #00FF80 and 0,255,128; FFF -> #FFFFFF and 255,255,255. Reject 12, #abcd, 1234567, gg0000 and colour names. Do not silently truncate or remove invalid internal characters. 5. Include a short instruction, an accessible input label, associated error text, a polite result announcement and visible keyboard focus. Keep essential text on a fixed readable background, not directly on the arbitrary swatch. No colour-only error signals. 6. Use system fonts and original HTML/CSS, with at most 60 words of explanatory text excluding labels, values and errors. Fit without clipping or horizontal scrolling at 360 and 1200 CSS pixels. Styling is open; the single conversion is the whole tool. Negative scope No colour picker, extra controls, history, saved palettes, contrast or accessibility-rating claims, colour-name database, alpha channels, clipboard, downloads, uploads, storage, network requests, external assets/libraries, animation, timers, accounts, purchases, outreach or extra files. Pass/fail acceptance gates One allowed offline file within the ceiling; one labelled input; exact accepted syntax and shorthand expansion; correct normalized code and RGB output; invalid/empty state and recovery; required accessibility and responsive layout; no prohibited features. Scoring rubric (100 points, in order) 1. Conversion and validation correctness: 40 points. 2. Clear visual hierarchy and useful presentation: 30 points. 3. Accessibility and responsive layout: 20 points. 4. Finish and readable implementation: 10 points. Tie-breaker Verify gates first. Prefer fewer verifiable conversion, invalid-state or recovery defects, then the higher accessibility score, then the higher presentation score. Verification note Review may use source and static states without executing submitted code. Live interaction testing limitations will be disclosed. Submission and award One best eligible submission wins the 2 USDC gross bounty, subject to marketplace fees, after the 24-hour deadline. Any descriptive filename is acceptable. All required content belongs in this one file. AI assistance is allowed; originality and safety remain your responsibility. Only this public brief governs judging.