Using a Color Converter Tool Effectively in Kodular — A Complete Guide

Guides
, ,
1

Tool: https://color-converter-tool.web.app/

Why Do You Need This?

Kodular accepts colors in multiple formats depending on where you’re setting them — the Designer palette, Color blocks, or dynamic property blocks in your logic. The problem is these formats are not the same, and converting between them manually is error-prone.

For example:

  • You find a nice color #00C2A8 online
  • You want to use it dynamically in a block to set a button’s background color
  • Kodular’s color block picker has a limited fixed palette with no HEX input
  • The dynamic property setter expects an integer — but what integer does #00C2A8 map to?

This is where the Color Converter tool saves you. Pick your color once, get every format instantly, use the right one wherever you need it.

Kodular Color Limitations You Should Know First

Before getting into the workflow, it helps to understand what Kodular does and does not support natively:

Where Can Type HEX? Can Use Integer? Can Use make color?
Designer color palette :white_check_mark: Yes — HEX field at bottom of palette :cross_mark: No :cross_mark: No
Color block (in Blocks editor) :cross_mark: No — limited fixed palette only, no text input :cross_mark: No :white_check_mark: Use instead
Component color property (in Blocks) :cross_mark: No text/HEX string accepted :white_check_mark: Yes (number block) :white_check_mark: Yes
Dynamic component color :cross_mark: No :white_check_mark: Yes (most reliable) :white_check_mark: Yes

Key takeaways:

  • The Designer is the only place you can type a HEX value directly
  • The color block picker in Blocks editor has a limited palette and no HEX input — don’t rely on it for exact colors
  • In Blocks, always use either make color or an integer number block for precise colors
  • You cannot plug a text string like "#00C2A8" into any color property — Kodular will throw an error

Understanding the Four Formats the Tool Gives You

1. RGBA (0–255 each)

  • Format: R, G, B, A — four separate numbers 0 to 255
  • A is alpha (transparency): 255 = fully opaque, 0 = fully transparent
  • Example: R:0, G:194, B:168, A:255
  • Used in: Kodular’s make color block ← most useful for Blocks editor

2. HEX (#RRGGBB or #RRGGBBAA)

  • Standard web color format
  • 6-digit: #RRGGBB (opaque), 8-digit: #RRGGBBAA (with alpha)
  • Example: #00C2A8
  • Used in: Designer color palette only (type into the HEX field at palette bottom)

3. ARGB (#AARRGGBB)

  • Android’s native format — alpha comes first, not last
  • Example: #FF00C2A8
  • :warning: Easy to confuse with 8-digit HEX — byte order is different
  • Used in: Some third-party extensions that explicitly state they accept ARGB strings

4. Integer (signed 32-bit ARGB)

  • Android stores every color as a single signed 32-bit integer internally
  • Example: -4152664 for #00C2A8 at full opacity
  • Can be negative — this is normal and expected for fully opaque colors
  • Used in: Dynamic component color properties, extensions expecting a raw color integer

How to Use the Tool

:backhand_index_pointing_right: Open: https://color-converter-tool.web.app/

Left side — Color Picker:

  • Drag the circle on the gradient canvas to pick hue + saturation + brightness
  • Use the rainbow bar to change the hue
  • Use the checkered alpha bar to adjust transparency

Right side — Color Values:

  • All four formats update live as you pick
  • Use the Copy button next to whichever format you need

Three ways to input a color:

  1. Pick visually — drag the gradient canvas
  2. Type a HEX code — click the HEX field, type e.g. #2B7FFF, everything else syncs instantly
  3. Type RGBA values — adjust R, G, B, A spinners for precise control

Applying Colors in Kodular — The Right Method for Each Situation

Method 1: Designer Color Palette → Use HEX

When: Setting a component’s color statically at design time.

Steps:

  1. In the tool → type or pick your color → copy the HEX value (e.g. #2B7FFF)
  2. In Kodular Designer → click the component → click its color property swatch
  3. The palette opens — at the bottom there is a small HEX text field
  4. Paste your HEX value → press Enter → color applies

Tip: For semi-transparent colors at design time, use 8-digit HEX with alpha at the end — e.g. #00C2A880 for 50% opacity teal. The Designer accepts both formats.

Method 2: Color Property in Blocks Editor → Use make color

When: Changing a component’s color dynamically inside your blocks — e.g. changing a button color on click, highlighting based on a condition.

Why not the color block picker? The color block picker in Kodular’s Blocks editor only shows a limited fixed palette. There is no HEX input field and no way to enter an exact color. For any color outside that basic palette, the picker is useless for precision work.

The correct approach — make color block:

  1. In the tool → note the RGBA values (R, G, B, A fields on the right)
  2. In Kodular Blocks → Colors drawer → drag make color block
  3. It expects a list — use make a list with four items: R, G, B, A
  4. Plug that list into make color
  5. Use the result anywhere a color is expected

Example for teal #00C2A8 fully opaque:

make color (make a list [0, 194, 168, 255])

This is the most readable approach — anyone reviewing your blocks can understand the color from the numbers.

Method 3: Dynamic Component / Extension Color Property → Use Integer

When: Setting colors via dynamic component properties, the Dynamic Components Extension, or any third-party extension block whose color parameter expects a raw integer.

Why integer here? Dynamic property setters and many extensions don’t accept a make color block — they expect the underlying Android color integer directly.

Steps:

  1. In the tool → copy the Integer value (e.g. -4152664)
  2. In Blocks → drag a Number block → type that integer
  3. Pass it to the color parameter

Why is the number negative? Android stores colors as signed 32-bit integers. When alpha is 255 (0xFF), the 32nd bit is set to 1, making the number negative in signed representation. This is completely normal — -1 is actually #FFFFFFFF (fully opaque white). The negative sign does not mean anything is wrong.

Quick alpha reference:

Opacity Alpha value HEX alpha
100% (fully opaque) 255 FF
75% 191 BF
50% 128 80
25% 64 40
0% (invisible) 0 00

Practical Example — End to End

You want to use electric teal #00C2A8 across your app:

  1. Open the tool → type #00C2A8 in the HEX field → set alpha to 255
  2. Tool shows:
  • RGBA: R:0, G:194, B:168, A:255
  • HEX: #00C2A8FF
  • ARGB: #FF00C2A8
  • Integer: -4152664

Now use the right format in each place:

Where in Kodular Use this from tool Value
Designer palette HEX #00C2A8
make color block RGBA [0, 194, 168, 255]
Dynamic component / extension Integer -4152664
Extension expecting ARGB string ARGB #FF00C2A8

Semi-Transparent Colors

Drag the checkered alpha bar (bottom slider in the color picker) to reduce opacity. Useful for:

  • Overlay/scrim backgrounds
  • Disabled state versions of a color (same hue, less opacity)
  • Subtle tinted card backgrounds

Example: 40% opacity teal overlay

  1. Pick #00C2A8 → drag alpha to ~40% → A value shows ~102
  2. Use Integer in dynamic blocks, or 8-digit HEX #00C2A867 in Designer

Common Mistakes to Avoid

Mistake What Goes Wrong Fix
Plugging a HEX text string into a color property block Runtime error or wrong color Use make color or Integer instead
Relying on the Blocks color picker for exact colors Can’t get your exact color, limited palette Use make color with RGBA values from the tool
Confusing 8-digit HEX (#RRGGBBAA) with ARGB (#AARRGGBB) Color looks completely wrong HEX has alpha at end; ARGB has alpha at start
Omitting the 4th value (A) in make color list Color may render transparent Always include A:255 for fully opaque
Worrying about negative integers Nothing — works correctly Negative is normal for opaque colors in Android
Forgetting # prefix in Designer HEX field Color doesn’t apply Always include the #

Quick Reference Card

Situation Format Example
Designer palette (opaque) HEX #RRGGBB #00C2A8
Designer palette (transparent) HEX #RRGGBBAA #00C2A880
make color block RGBA list [0, 194, 168, 255]
Dynamic component / extension Integer -4152664
Extension expecting ARGB string ARGB #AARRGGBB #FF00C2A8

Tool Link

:backhand_index_pointing_right: https://color-converter-tool.web.app/

Bookmark it. Once you start working with precise colors in Kodular, you’ll use it constantly.

A Color Converter tool interface showing a color picker and synchronized color values in RGBA, HEX, ARGB, and Integer formats. (Captioned by AI)
A Color Converter tool interface showing a color picker and synchronized color values in RGBA, HEX, ARGB, and Integer formats. (Captioned by AI)1008×907 97.7 KB

Example:
First make color list utilizes 4 numbers as in RGBA format, number 39 is used for opacity
Second make color list utilizes 4 numbers as in RGB format without any opacity
Third one uses input of a color as an integer for the decoration of an element. Color integer numbers as input can be used heavily when working with dynamic cards.

A visual code snippet setting text colors of Label_SecurityInfo and configuring Decoration1 with shape, background color, border color, and roundness properties. (Captioned by AI)
A visual code snippet setting text colors of Label_SecurityInfo and configuring Decoration1 with shape, background color, border color, and roundness properties. (Captioned by AI)605×313 22.3 KB

Guide written based on real Kodular development experience. Tested with Kodular Creator (latest). If you find any format that behaves differently in a specific extension, drop a comment below and I’ll update the guide.