Custom and Style Tabs
There are two tabs in the color palette, the "Custom" tab and the "Style" tab, each with different settings.
[Custom tab: Set colors for elements.
[Style tab: Register a color style, select a registered style
This article explains the procedure for setting colors using the color palette.
1. Select the element for which you want to specify a color
Select the element for which you want to set the color by clicking on it on the screen.
You can specify a color for the following elements
Box: fill, border
Text: text color, background color
Rich text: text color, background color
Icon: color of the icon
2. Opening the Color Palette
The location of the color palette depends on the selected element.
They are located in the right panel, in the tabs listed in the table below, respectively.
Open the color palette by clicking on the item for which you want to set the color from the corresponding tab.
Selected element | Location of the color palette (right panel) |
Boxes | [Boxes tab |
Text | [Text tab |
Rich Text | [Contents tab |
Icons | Icon [Icon] tab |
3. Selecting Transparency (No Fill), Single Color, or Gradient
Setting Transparency (No Fill)
To make boxes, borders, etc. transparent (no fill), click the icon 
in the upper right corner of the palette.
Selecting a single color or gradient
In the center of the palette, select whether you want to use a single color or a gradient.
If you choose gradient, adjust the color and angle in the detailed gradient settings described below.
4. Selecting a color
Select a color in one of the following ways
Default Color
You can select a color from the sample colors.
Click on the icon
at the upper left of the palette to display the default colors.Select a sample color from the list. You can fine-tune the color after selection.
To stop selecting the default color, click the icon again.
Note: My Color
My Color" stores previously registered My Colors in the default color.
My Color stopped registering new colors on March 13, 2025. The function itself is also scheduled to be phased out.
For details, please refer to "Suspension of New Color Registration and Termination of the My Color Function".
Designation of RGBA numerical values and HEX codes
Color can be specified by directly entering RGBA numerical values or HEX codes.
Enter values directly in the text field in the center of the palette.
To switch between codes, use the icon to the right of the text field.
Tips: RGBA numerical values and HEX codes
Both RGBA numerical values and HEX codes are commonly used color codes in various design tools and development environments. They are useful for specifying exact colors and for working with other design tools.
RGBA Numeric
RGBA is a color representation system using four values: red (R), green (G), blue (B), and transparency (A).
R, G, and B are specified in the range of 0 to 255, respectively. Opacity (A) is set in the range of 0 (completely transparent) to 1 (completely opaque).
HEX Code
HEX code is a method of expressing color in hexadecimal. Opacity is set in the range from 0% (completely transparent) to 100% (completely opaque).
＜Typical examples of HEX codes
white: #ffffff
black: #000000
red: #ff0000
blue: #0000ff
yellow：#ffffff00
Color Picker
Extract colors from a design created by another service and use the colors in the editor.
Click the eyedropper icon
at the left center of the palette, and the cursor will change to a circle.Move the cursor to the area you want to extract and click to extract the color.
Color Style
Colors registered in a color style can be selected from the [Style] tab at the upper right of the palette.
Point: What is a color style?
Color Style is a function to register and manage colors used repeatedly in the editor.
By simply applying a registered color, the same color can be reused, reducing the time and effort required to specify colors and preventing color variations and setting errors.
For detailed setting instructions, see How to Set Color Styles.
5. Setting Opacity
Opacity is set in the center right of the palette. It can also be operated in the settings area on the right panel.
The range is from 0% to 100% or from 0 to 1. The higher the value, the higher the opacity.
Gradient Detail Settings
This section explains how to set the settings when a gradient is selected.
Specifying the color to be used for the gradient
Use the gradient bar in the center of the palette to set the gradient.
You can add a slider to add a color to be used for the gradient, but the default settings are a starting point and an ending point.
To add a color, click on the position you wish to add and add a slider.
You can drag the slider to adjust its position.
Move the cursor over the slider and click [X] to remove it.
Adjusting the angle of the gradient
Changing the angle changes the direction of the color change.
Place the cursor over the arrow icon on the right side of the gradient bar.
In the Angle Adjustment panel, determine the angle of the gradient.
