Color Explorer

You are tasked with building a Color Explorer — a React-based application that helps users explore colors by typing in natural language color names like "lavender", "skyblue", or "darkorange".

The app matches the user’s input against a predefined color dictionary and displays the color name and its corresponding HEX code with a beautiful circular preview.

Your goal is to:

• Convert any valid CSS color name into its HEX code.
• Display the color preview in a visually appealing circular shape.
• Handle typos or unsupported color names with a helpful error.
• Deliver a responsive, accessible, and easy-to-use interface.

Requirements

• An input field for the user to enter a color name.
• A search button to trigger the conversion and display.
• If valid:
  • Show color name
  • Show HEX code
  • Show a circular color preview
• If invalid:
  • Show error message like: "Sorry, I couldn't recognize that color."

Supported Color Names

The app supports 140+ standard CSS color names listed in colorData.js file. Input is case-insensitive and whitespace is ignored.

Edge Cases & Constraints

• Input should be trimmed and converted to lowercase before matching.
• Color names with extra spaces or different casing should still work (" Light Gray ").
• Only exact matches from the dictionary provided in the colorData.js will be recognized.
• If the input is not in the list, a clear error should appear and remove the previous result.

Data Test IDs (required for testing)

• data-testid="color-input": The input field for color name
• data-testid="search-button": The button that triggers search
• data-testid="color-name": The rendered color name
• data-testid="color-hex": The rendered HEX code
• data-testid="color-preview": The circle showing color preview
• data-testid="error-msg": Error display when input is invalid
• data-testid="color-box": Container for valid result

Reference UI