# Guache A button that opens a panel to pick a color from a shade area, type HEX, RGB or HSL and check the contrast. > Guache is a THM Componentes component that opens a color panel from any button you choose. It has a saturation area, a hue bar, HEX, HSL, HSLA, RGB and RGBA inputs, an alpha bar, ready-made swatches and a contrast check with AA and AAA badges. It suits editors, product configurators and admin dashboards. - Category: Forms and input - Origin: Adapted from open source under the MIT license, with a ready THM prompt - Load weight: Light: CSS or light JavaScript, no noticeable cost - Technology: Vue 3, TypeScript, Tailwind CSS v4 - Interaction: Mouse, Touch, Keyboard - URL: https://vibecode.thmtecnologia.com/en/components/guache/ ## What it looks like Clicking the button you define drops a panel right below it, in your theme colors. At the top sits a color rectangle that goes from white to the pure hue horizontally and darkens to black vertically, with a small circle you drag. Below, a rainbow bar changes the hue. Next come a format menu and fields to type the numbers, plus a checkered transparency bar in the formats with alpha. Six default swatches, plus your own, sit in a row, and the footer shows a letter A over the color, the contrast ratio and the AA and AAA badges. ## You may be looking for this if you asked for something like - “pick a color in the settings panel of my app” - “a color field that shows HEX and RGB values to copy” - “let customers choose the product color on my site” - “a color picker that warns if the contrast is readable” - “a palette with preset colors and a custom color option” - “choose a color with transparency for a dashboard theme” ## Also known as color picker, color selector, color input, HEX color picker, RGB color picker, color palette picker ## When to use - Admin dashboards where customers set their brand colors - Page, email or social post editors - Product configurators with free color choice - Design tools that need to check text contrast ## When to avoid - Choosing among a few fixed colors, where swatch buttons are enough - Keyboard-only use without changes, since the shade area and bars respond to mouse and touch only ## How to ask your AI ```text Add a color picker to the theme settings panel: saturation area, hue bar, HEX, RGB and HSL inputs, alpha, swatches with my brand colors, an AA and AAA contrast check and color controls that work with the keyboard. ``` With THM Componentes, you paste the full prompt from the catalog together with this component's code, and the AI reproduces this exact effect instead of improvising. ## Questions about Guache ### Does Guache work with a keyboard? Partly. In the original version of Guache, the saturation area and the hue and alpha bars respond to mouse and touch, while the number fields, the format menu and the swatches work with the keyboard. For full use without a mouse, ask your AI to turn the area and bars into arrow-key controls. ### Which formats does Guache return? Guache emits a value-change event with the same color in five formats at once: HEX, HSL, HSLA, RGB and RGBA, with the alpha rounded. It also accepts a starting value as HEX or as an HSV, HSL or RGB object, and the prompt installs its only extra dependency, a color conversion package. ### Does Guache follow dark mode? Yes. The panel in Guache uses the catalog theme tokens for background, border and text, so it follows the light and dark themes of your project. The contrast check computes the ratio for white text over the color on a dark background and for black text on a light background, and shows the higher one. ## Related components - [Anilina](https://vibecode.thmtecnologia.com/en/components/anilina/): A full color picker that shows what the screen can display, checks contrast and builds a tonal palette. - [Pingado](https://vibecode.thmtecnologia.com/en/components/pingado/): A bar that splits into two colored parts with each side's percentage, like coffee and milk in a cup. - [Prancheta](https://vibecode.thmtecnologia.com/en/components/prancheta/): An in-page photo editor to crop, rotate, adjust brightness and color, apply filters and export the image. - [Tocha](https://vibecode.thmtecnologia.com/en/components/tocha/): A text field whose border lights up in blue right where the cursor passes, like a small flashlight on the frame. - [Provador](https://vibecode.thmtecnologia.com/en/components/provador/): A 3D bottle that turns with your finger or mouse, changes color and finish and updates the price instantly. --- THM Componentes: THM Componentes is a catalog of 268 UI components for Vue 3 and Nuxt, 115 of them exclusive, each with a live demo and a ready prompt for Claude Code, Cursor and other AI assistants. Pick the effect, copy the prompt and your AI applies it to your project. Lifetime access for R$ 497 (about US$ 99).