In this learning content, we will discover how to work with the color palette found in the Text and Fill fields in the Styling panel.
First, let's start with the color field in the Text section. Here, you can change the text colors of the Label and Icon elements. Similarly, we can set the text color for the Button and Input elements through this section.
Now let's turn our attention to the Fill section. Here, we can add a background color to elements or update the overall background color of the screen. During this process, you also have the option to use predefined styles. Unlike Text, this section also includes Gradient Color and Image options in the Color palette.
Let's see how we can change colors when we drag and drop an icon element onto the screen. To change the color of an icon, you can use the Text field, just like you would change the text color of a label. And if you want to add a background color to your icon, the Color field in the Fill section is exactly what you need.
We have explored the basics of working with colors. So, what are the features of the color palette we are using?
First, it is important to note that color palettes may vary depending on where they are used. In other words, even if the palettes used in a Text field and a Fill field look the same, they may offer different options.
For example, in the background, i.e., the Fill area, you can access different fill options such as solid color, gradient, image, and even AI-powered images. However, such background effects are not available in the Text area; here, you can only select the text color.
Therefore, to better understand the scope of the color palette, let's continue based on the palette in the Fill area.
At the top of the palette, there are different fill types that can be applied to the background. These options are, in order: Solid, which is a solid color fill; Gradient, which is a gradient; Image, which is an image; and AI Image, which is an image generated by artificial intelligence.
In the same upper section, there is also a color addition area that allows you to save colors that you have created or use frequently as Custom.
At the bottom of the palette, we first encounter Saturation and Brightness, which are offered by the Solid option. Saturation determines the intensity of colors, while brightness determines how light or dark they are. As saturation increases, colors become more vivid, and as brightness increases, the color tone changes.
Next, we encounter Hue. Hue refers to the colors created by light of different wavelengths. This feature is a tool that allows you to see how the color tone changes when you play with it.
Third is the Alpha Channel. This determines the degree of transparency of a color or image. When you decrease the alpha value, the transparency increases.
Now, let's talk about the Hex code, RGB, and Alpha Channel value values we use to represent colors. Hex codes and the RGB model help us understand how colors are created on electronic devices. The Alpha Channel value adjusts the transparency level of the color.
Fifth, let's talk about the 16 different color options offered by Kuika. These color options are provided ready-made and make it easier for you to choose colors.
We have an area where you can save the colors you add. This allows you to quickly find colors for reuse in your project. Here, you can view the colors you have saved as a list or grid.
The second option at the top of the color palette is Gradient Fill. This option allows you to apply background colors with a gradient effect. When you go to the Gradient Fill area, you can easily define the colors that make up the gradient and the angle at which the transition will occur.
The third option at the top of the color palette is Image. This area allows you to use an image directly instead of solid colors or gradients for your background.
Using the Image Fill option, you can add a new image and determine how it will be positioned. You can also change its position using the alignment options and easily view and manage the images you have uploaded.
You've learned the basics of working with colors. You're now ready to create colorful and vibrant screen designs with Kuika!
In this learning content, we will discover how to work with the color palette found in the Text and Fill fields in the Styling panel.
First, let's start with the color field in the Text section. Here, you can change the text colors of the Label and Icon elements. Similarly, we can set the text color for the Button and Input elements through this section.
Now let's turn our attention to the Fill section. Here, we can add a background color to elements or update the overall background color of the screen. During this process, you also have the option to use predefined styles. Unlike Text, this section also includes Gradient Color and Image options in the Color palette.
Let's see how we can change colors when we drag and drop an icon element onto the screen. To change the color of an icon, you can use the Text field, just like you would change the text color of a label. And if you want to add a background color to your icon, the Color field in the Fill section is exactly what you need.
We have explored the basics of working with colors. So, what are the features of the color palette we are using?
First, it is important to note that color palettes may vary depending on where they are used. In other words, even if the palettes used in a Text field and a Fill field look the same, they may offer different options.
For example, in the background, i.e., the Fill area, you can access different fill options such as solid color, gradient, image, and even AI-powered images. However, such background effects are not available in the Text area; here, you can only select the text color.
Therefore, to better understand the scope of the color palette, let's continue based on the palette in the Fill area.
At the top of the palette, there are different fill types that can be applied to the background. These options are, in order: Solid, which is a solid color fill; Gradient, which is a gradient; Image, which is an image; and AI Image, which is an image generated by artificial intelligence.
In the same upper section, there is also a color addition area that allows you to save colors that you have created or use frequently as Custom.
At the bottom of the palette, we first encounter Saturation and Brightness, which are offered by the Solid option. Saturation determines the intensity of colors, while brightness determines how light or dark they are. As saturation increases, colors become more vivid, and as brightness increases, the color tone changes.
Next, we encounter Hue. Hue refers to the colors created by light of different wavelengths. This feature is a tool that allows you to see how the color tone changes when you play with it.
Third is the Alpha Channel. This determines the degree of transparency of a color or image. When you decrease the alpha value, the transparency increases.
Now, let's talk about the Hex code, RGB, and Alpha Channel value values we use to represent colors. Hex codes and the RGB model help us understand how colors are created on electronic devices. The Alpha Channel value adjusts the transparency level of the color.
Fifth, let's talk about the 16 different color options offered by Kuika. These color options are provided ready-made and make it easier for you to choose colors.
We have an area where you can save the colors you add. This allows you to quickly find colors for reuse in your project. Here, you can view the colors you have saved as a list or grid.
The second option at the top of the color palette is Gradient Fill. This option allows you to apply background colors with a gradient effect. When you go to the Gradient Fill area, you can easily define the colors that make up the gradient and the angle at which the transition will occur.
The third option at the top of the color palette is Image. This area allows you to use an image directly instead of solid colors or gradients for your background.
Using the Image Fill option, you can add a new image and determine how it will be positioned. You can also change its position using the alignment options and easily view and manage the images you have uploaded.
You've learned the basics of working with colors. You're now ready to create colorful and vibrant screen designs with Kuika!
