logo
Resources
Table of content
Motiff AI
Interface
Layers and tools
Layer properties
Design systems
Prototypes
Dev Mode
Collaboration
Import and export
File settings
Account
File management
Team management
Sharing and permissions
Billing
Organization
Apps
Work with support
Help Center/Layer properties/Color properties/Color models in Motiff

Color models in Motiff

Motiff supports five color models to represent colors: HEX, HSB, HSL, CSS, and RGB. Switching between different color models only affects how Motiff describes colors but does not affect how Motiff renders them.

'Color models in Motiff.png'

Color models

Color models may vary depending on the application, hardware, or output requirements. You can view and switch between various color modes in the color picker:

HEX

HEX (Hexadecimal Color Codes): The default HEX color mode refers to hexadecimal color codes. It usually consists of a # followed by 6 hexadecimal digits, representing the color values of the red, green, and blue channels, and ranging from 00 to FF. For example, #FFFFFF represents white. HEX is widely used in web design and other applications that require precise color codes.

RGB

RGB (Red Green Blue): This is the most common color model. Every color rendered on a monitor or screen is composed of different amounts of red, green, and blue primary colors.

You may have seen the term RBGa in other resources. The a in RBGa stands for alpha, an opacity of color with a value ranging from 0% to 100%.

HSB

HSB (Hue Saturation Brightness): This is another model of RGB. Unlike the RGB model, which is based on how colors are rendered on displays, the HSB model represents colors based on how the human eye perceives them. This model allows designers to select and manipulate colors more intuitively in graphic design. It is generally used in color palette tools.

Hue represents the type of color (such as red, blue, green, etc.), which is expressed as an angle in the range of 0-360°. Saturation represents the intensity or purity of color, ranging from 0-100%, with 0% being gray and 100% being full color. Brightness indicates the brightness of a color, also ranging from 0-100%, with 0% being black and 100% being white.

HSL

HSL (Hue Saturation Luminance): The HSL model is another color model based on how the human eye perceives color, similar to the HSB model. The main difference between these two models is how lightness is treated. In the HSL model, from black (0%) to white (100%), the middle value (50%) is the pure color. The HSB model is more suitable for selecting bright colors, while the HSL model is better for uniform color matching.

CSS

CSS (Cascading Style Sheets): The CSS color model allows you to view or enter RGBa values using CSS syntax. It can be represented in a format similar to the following: rgba(39,99,230,1) .

Tip: When you want to synchronize color information with developers, the CSS model can copy and paste the CSS code information of the selected color directly into a stylesheet.

View color models in the color picker

When Motiff exports all content in the sRGB color model, you can view the color in another color model. You can also view and adjust the colors of different color models in the color picker:

  1. 1.Click on the fill or stroke property in the design panel to open the color picker.
  2. 2.Below the sliders of hue and opacity, you can see the current color model and its corresponding values.
  3. 3.Use the dropdown list to switch color modes. Choose between HEX, HSB, HSL, CSS, and RGB:

'Color models in Motiff.png'

  1. 4.Motiff will show the color values according to the model you select.