Bold color pair inspiration

Turn eight supplied color pairs into UI palettes with area proportions, semantic tokens and measured text contrast. A compact direction to help the next screen feel deliberate, specific, and easy to remix.

Choose a bold two-color combination from the eight references below for my Web interface and turn it into a usable UI color specification. Preserve the selected original HEX values. Label added neutrals and derived state colors separately; never present them as source colors.

INPUT
Product/audience: [purpose, core task, target audience]
Page/content: [page type, actual heading/body/button copy; optional screenshots or code]
Direction: [bright, restrained, edgy, retro; optional pair number below]
Constraints: [brand colors, light/dark theme, existing components and CSS variables; or none]
Output: [color specification; or specification plus a previewable HTML/CSS color specimen]

REFERENCE PAIRS — EXACT HEX — MUTUAL SOLID TEXT/BACKGROUND CONTRAST
1. Royal purple #6A0DAD × Gold #F9D308 — 6.31:1
2. Rose pink #E6397C × Charcoal #1A1A1D — 4.33:1
3. Pale pink-white (source label: Wu Bai Se) #F1DDDF × Camellia red #E72D48 — 3.32:1
4. Tea green #D3FFAF × Bright blue #05A5FA — 2.41:1
5. Crest yellow #F6C430 × Begonia red #EC2B24 — 2.60:1
6. Near-black (source mislabeled purple) #121212 × Smoky pink #E89AAF — 8.63:1
7. Berry pink #FF449E × Aurora lime #ACFE6C — 2.61:1
8. Slate #2B333E × Waterfall cyan #51C4D3 — 6.19:1

Source: eight user-supplied color-card screenshots associated with https://www.douyin.com/video/7681609167282408731 . The video body and author were not independently read. Color names are source labels, not standardized names. Pair 3 retains the source label Wu Bai Se without guessing its intended wording. Pair 6 follows HEX: #121212 is near-black, incorrectly labeled purple in the screenshot; #E89AAF derives RGB(232,154,175), conflicting with the printed RGB(132,14,174). Derive all RGB values from HEX. No print ICC profile was supplied, so omit screenshot CMYK values and printing guarantees.

METHOD
1. Confirm the core task, page type and theme. With no chosen pair, propose three references with specific mood/use-case reasoning and wait for my selection before developing one. With a number supplied, develop it directly. If actual content is missing, label specimen copy as examples; invent no business facts.
2. Keep both original colors as the brand/primary and accent colors. Consider large surfaces, graphics, selection and focused emphasis. Recommend an explicit area split among neutral base, primary and accent totaling 100%; explain it as a design choice rather than imposing 60/30/10. Strong hue contrast does not establish text legibility.
3. Map primitives to semantic roles and components: page background, card surface, primary/secondary text, border, primary button and its text, selection and focus. Add hover/active/disabled only where needed. Error/success meaning must not rely solely on brand colors or color differences. Label every added HEX value and explain its need.
4. Calculate WCAG sRGB contrast for every actual text/background pair: normalize channels by 255; linearize c ≤ 0.04045 as c/12.92, otherwise ((c+0.055)/1.055)^2.4; L=0.2126R+0.7152G+0.0722B; ratio=(lighter L+0.05)/(darker L+0.05). Require 4.5:1 for normal text and 3:1 for large text (18pt or 14pt bold). Classify using unrounded values, then display two decimals. Reference ratios cover opaque, solid sRGB pairs only, not whole-page certification.
5. Original pairs 1/6/8 meet the 4.5:1 normal-text threshold; 2/3 meet only the 3:1 large-text threshold; 4/5/7 are below 3:1 and cannot be directly paired as informative text/background. Repair failing uses with measured neutral text, a separate text surface or an added color without altering the brand pair. Evaluate necessary control boundaries and state indicators separately under applicable rules. For gradients, transparency or imagery, check the weakest point of the actual composited background; mark unrendered cases unverified.
6. Apply the scheme to the page's real heading, body, buttons, cards and required states. Show default and emphasis states, visible keyboard focus and text/icon state cues. A specification request does not authorize a whole-page redesign. For a specimen, reuse existing components or minimal HTML/CSS without installing a framework. All variable references must resolve; keep originals and additions separate.

DELIVER IN ORDER
A. Candidate rationale or the selected pair's intended use.
B. Color table: name / HEX / HEX-derived RGB / original or added / role / suggested area.
C. Actual text/background contrast table: element / foreground / background / unrounded classification / displayed ratio / repair or unverified item.
D. Semantic CSS variables and component mapping; previewable specimen only when requested.
E. Checks actually performed and remaining verification. Do not present proposals, unrun calculations or a specimen as tested product results.

Contrast method: W3C WCAG 2.2, https://www.w3.org/WAI/WCAG22/Understanding/contrast-minimum.html . Independently authored by this site from user-supplied colors and the public standard; not the video author's original prompt.

changed reference HEX, invented standardized names, copied video artwork, hue clash presented as legibility, low-contrast body text, color-only states, unmeasured added colors, fabricated testing or certification, exact printing claims without ICC