# Color swatch

> Learn how to use Color Swatches to capture, organize, and document colors while creating moodboards and style guides. Include hex codes to ensure design consistency.

Source: https://mockflow.com/docs/boards/components/color-swatch-in-ideaboard

Available in:
                    

              Basic
            

              WireframePro
            

              MockFlow Board
            

              Bundle Plan
            

              Enterprise
            

Color Swatches let you visually capture and organize colors on the board while building moodboards or style guides. Optionally show the hex code to define exact colors and keep design decisions consistent.

1. Click on the 'Add Anything' icon in the top left corner, select the component 'Color Code', drag and drag it onto the canvas.

![Adding Color Code Step 2 - MockFlow IdeaBoard ](https://assets.mockflow.com/docs/media/83c4275f6d39b55170ee1e3d.gif)

**Choosing the color:** The color can be chosen by using the 'Select Color' from the quick toolbar.

![Customizing the color code Component - MockFlow IdeaBoard](https://assets.mockflow.com/docs/media/c02e595bf13394b298e5e511.gif)

### **Other Formatting Options**

**Show or hide HEX code:** You can hide or show the HEX code and RGB code of a particular color using the 'Toggle HEX Code' and 'Toggle RGB Code' options from the quick toolbar.

![HEX code in Color Code - MockFlow IdeaBoard ](https://assets.mockflow.com/docs/media/c487220507e89a03850fa140.gif)

**Customizing shape style:** You can change the shape of the color swatch by using the 'Shape Styles' with the options - Full, square, and circle.

![Customzing Shape Styles in Color Code - MockFlow IdeaBoard ](https://assets.mockflow.com/docs/media/1d9382f047a4c3baebbdc140.gif)

**Change color code font styles:** You can change the font family, font size, and text alignment from the quick toolbar itself.

![Customizing font styles in Color code - MockFlow IdeaBoard](https://assets.mockflow.com/docs/media/ea55018677b7119a81525aef.webp)

**Interacting with the color code:** The interact action for the color code component copies the hex code to your clipboard so that you can use it elsewhere.

![Interacting with Color Code - MockFlow IdeaBoard ](https://assets.mockflow.com/docs/media/7b9ab869e11f64c0974d474d.gif)

![Ideaboard - Color Code Component (1).gif](https://assets.mockflow.com/docs/media/44099b8312f392c6cee410b6.gif)