Help Center

Support email - support@mockflow.com

Color swatch

Available in:
Basic
WireframePro
IdeaBoard
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.


1Click 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


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


Customizing the color code Component - MockFlow IdeaBoard



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


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


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


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

Ideaboard - Color Code Component (1).gif










Rate this article
great ok bad
For more questions - Contact Us
...