Add Color Utility tool with conversion + picker tabs

[Copilot]

Adds a new color-focused tool that auto-detects pasted color formats, converts them to common variants, and offers a picker mode with instant copyable outputs. The tool is integrated into the existing tool set and UI to match QuickDevTools conventions.

• Color Utility tool

  • New tabbed interface for Color Conversion (default) and Color Picker modes
  • Automatic format detection for HEX/RGB(A)/HSL(A) with multi-format output + copy actions
  • Visual swatch previews for picker mode (full opacity output)

• App integration

  • Tool registration in sidebar and router
  • Documentation update to include the new tool and shortcut note

Example:

const conversionFormats = useMemo(() => [
  { name: 'HEX', value: formatHex(parsedColor) },
  { name: 'RGB', value: formatRgb(parsedColor) },
  { name: 'RGBA', value: formatRgba(parsedColor) },
  { name: 'HSL', value: formatHsl(parsedColor) },
  { name: 'HSLA', value: formatHsla(parsedColor) },
], [parsedColor]);

Screenshot

Original prompt

---

This section details on the original issue you should resolve

<issue_title>Add another tool which will work as a color picker and color code converter both in save view</issue_title>
<issue_description>One of the users requested a new color-related tool with the following requirements:

• Color code conversion: The user can paste a color value (such as a hex code or RGB value), and the tool should automatically detect the format and convert it into other common color formats. The process should be simple and automatic, without requiring the user to select the input format manually.

• Color picker: The user should be able to visually pick a color and instantly see its values in multiple formats. The tool must allow copying the color code in each format.

Both features should be included within a single tool. The interface should use a tab-style toggle to switch between the two modes, with Color Conversion set as the default mode.
</issue_description>

<agent_instructions>Implement the new Color Utility Tool while strictly following the existing quickdevtools project architecture, folder structure, and coding conventions. Reuse current shared components, utilities, and styling patterns wherever possible.

Ensure the UI matches the existing color scheme and design system so the new tool feels native to the project. Do not introduce breaking changes, refactor unrelated code, or modify existing tool behavior. The implementation must be isolated to the new feature and should not affect any current functionality.

Prioritize clean, modular code that integrates smoothly with the current codebase and maintains consistency with established patterns.</agent_instructions>

Comments on the Issue (you are @copilot in this section)

• Fixes Add another tool which will work as a color picker and color code converter both in save view #2

---

💬 We'd love your input! Share your thoughts on Copilot coding agent in our 2 minute survey.

[dipeshsingh253]

@copilot remove the opactivy bar from the colorpicker its not required. Everything else looks good.

[Copilot]

@copilot remove the opactivy bar from the colorpicker its not required. Everything else looks good.

Removed the color picker opacity bar and locked picker output to full opacity. Screenshot: https://github.com/user-attachments/assets/7cc2bb47-38b1-49f5-88e9-dbdb6a4b74dd. Commit: c6895a1.